@extends('layouts.app')

@section('content')
    <div class="space-y-6">
        <div class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                <div>
                    <p class="text-sm font-medium uppercase tracking-wide text-sky-600">{{ __('app.bitrix24_first') }}</p>
                    <h1 class="mt-2 text-3xl font-semibold text-slate-900">{{ __('app.dashboard_title') }}</h1>
                    <p class="mt-3 max-w-3xl text-sm leading-6 text-slate-600">{{ __('app.dashboard_description') }}</p>
                </div>
                <div class="rounded-xl bg-slate-50 p-4 text-sm text-slate-600 ring-1 ring-slate-200">
                    <p><span class="font-semibold text-slate-900">{{ __('app.current_locale') }}:</span> {{ app()->getLocale() }}</p>
                    <p><span class="font-semibold text-slate-900">{{ __('app.portal_domain') }}:</span> {{ $bitrixContext['domain'] ?: __('app.not_available') }}</p>
                    <p><span class="font-semibold text-slate-900">{{ __('app.placement') }}:</span> {{ $bitrixContext['placement'] ?: __('app.embedded_app') }}</p>
                </div>
            </div>
        </div>

        <div class="grid gap-6 lg:grid-cols-2">
            <section class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
                <h2 class="text-lg font-semibold text-slate-900">{{ __('app.mvp_scope') }}</h2>
                <ul class="mt-4 space-y-3 text-sm leading-6 text-slate-600">
                    <li>{{ __('app.scope_installation') }}</li>
                    <li>{{ __('app.scope_robot') }}</li>
                    <li>{{ __('app.scope_webhook') }}</li>
                    <li>{{ __('app.scope_multilingual') }}</li>
                </ul>
            </section>

            <section class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
                <h2 class="text-lg font-semibold text-slate-900">{{ __('app.available_endpoints') }}</h2>
                <div class="mt-4 space-y-3 text-sm text-slate-600">
                    @foreach ($endpoints as $label => $endpoint)
                        <div>
                            <p class="font-medium text-slate-900">{{ $label }}</p>
                            <code class="mt-1 block rounded-lg bg-slate-100 px-3 py-2 text-xs text-slate-700">{{ $endpoint }}</code>
                        </div>
                    @endforeach
                </div>
            </section>
        </div>

        <div class="grid gap-6 lg:grid-cols-2">
            <section class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
                <h2 class="text-lg font-semibold text-slate-900">{{ __('app.configuration_status_title') }}</h2>
                <ul class="mt-4 space-y-3 text-sm leading-6 text-slate-600">
                    <li>{{ $portalSummary['installed'] ? __('app.portal_detected') : __('app.portal_missing') }}</li>
                    <li>{{ $portalSummary['active_account_id'] ? __('app.active_account_configured', ['account' => $portalSummary['active_account_id']]) : __('app.active_account_missing') }}</li>
                </ul>
            </section>

            <section class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
                <h2 class="text-lg font-semibold text-slate-900">{{ __('app.configuration_actions_title') }}</h2>
                <p class="mt-4 text-sm leading-6 text-slate-600">{{ __('app.configuration_actions_description') }}</p>
                <div class="mt-4">
                    <a href="{{ $endpoints['settings'] }}" class="inline-block rounded-xl bg-sky-600 px-5 py-3 text-sm font-medium text-white">
                        {{ __('app.open_settings') }}
                    </a>
                </div>
            </section>
        </div>

        <section class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
            <h2 class="text-lg font-semibold text-slate-900">{{ __('app.next_steps_title') }}</h2>
            <ol class="mt-4 list-decimal space-y-2 pl-5 text-sm leading-6 text-slate-600">
                <li>{{ __('app.next_step_env') }}</li>
                <li>{{ __('app.next_step_migrate') }}</li>
                <li>{{ __('app.next_step_credentials') }}</li>
                <li>{{ __('app.next_step_fields') }}</li>
            </ol>
        </section>
    </div>
@endsection