@use('Core\Localization\Locales')
@use('Layout\Blocks\BlockCatalog')
@use('Layout\Blocks\BlockType')

@push('scripts')
    @vite('src/modules/Portal/Home/Assets/js/home-editor.js')
@endpush

{{--
    Editor da home (P5.S2.1 — emenda ADR-016) — o módulo preenche **só** o `<main>` do shell.

    - A lista é o **documento**: a ordem dos itens é a ordem no portal e “ocultar” preserva a posição.
    - Mover/ocultar/remover/salvar são **botões de submit** do mesmo `PUT /cms/home` (funcionam sem
      JS; o caminho de teclado é o mesmo, WCAG 2.2 SC 2.5.7 — não há arrastar).
    - Cada seção tem um `<dialog>` **nativo** com os campos (sem `<form>` aninhado: os campos
      pertencem ao formulário de fora). Sem JS o CSS (`@media (scripting: none)`) mantém os campos
      visíveis no fluxo e os botões continuam valendo.
    - `novalidate`: campos obrigatórios dentro de diálogos fechados não podem bloquear o submit do
      navegador (o controle inválido ficaria inalcançável). A validação é **server-side**, por
      schema, com resumo `role="alert"` e erro no campo.
    - A prévia estrutural abaixo é do **rascunho salvo**; a versão visual no shell real fica na
      rota autenticada `home.preview` (uma por locale) e publicar exige `home.aprovar` (S2.2).
--}}
<x-layout::cms :title="__('home::cms.title')" :breadcrumbs="[['label' => __('home::cms.title')]]">
    @if (session('status'))
        <x-cms::alert variant="success">{{ session('status') }}</x-cms::alert>
    @endif

    <x-cms::form-errors :title="__('home::cms.error_summary')" />

    <p class="text-sm opacity-70">{{ __('home::cms.intro') }}</p>

    {{-- Adicionar é um GET: escolhe o tipo e recarrega a tela com a seção **nova** (nada é persistido). --}}
    <form method="get" action="{{ route('home.cms.index') }}" class="mt-4 flex flex-wrap items-end gap-3">
        <label class="form-control">
            <span class="label"><span class="label-text">{{ __('home::cms.add_type') }}</span></span>
            <select name="novo" class="select select-bordered">
                <option value="">{{ __('home::cms.choose_type') }}</option>

                @foreach ($definitions as $definition)
                    @continue($definition->type === BlockType::Hero && ! $canAddHero)
                    <option value="{{ $definition->type->value }}" @selected(request()->query('novo') === $definition->type->value)>
                        {{ __($definition->type->label()) }}
                    </option>
                @endforeach
            </select>
        </label>

        <x-cms::button type="submit" variant="secondary">{{ __('home::cms.add') }}</x-cms::button>
    </form>

    <form method="post" action="{{ route('home.cms.update') }}" class="mt-8 grid gap-6" data-home-editor novalidate>
        @csrf
        @method('put')
        <input type="hidden" name="lock_version" value="{{ $lockVersion }}">

        <section aria-labelledby="home-sections-title">
            <h2 id="home-sections-title" class="text-xl font-bold">{{ __('home::cms.sections') }}</h2>
            <p class="mt-1 text-sm opacity-70">{{ __('home::cms.sections_hint') }}</p>

            @if ($sections === [])
                <x-cms::empty-state :title="__('home::cms.sections_empty')" class="mt-4" />
            @else
                <ol class="mt-4 grid gap-4">
                    @foreach ($sections as $index => $section)
                        @php
                            $prefix = 'sections['.$index.']';
                            $errorPrefix = 'sections.'.$index.'.props';
                            $idPrefix = 'home-section-'.$section->id;
                            $dialogId = $idPrefix.'-dialog';
                        @endphp

                        <li class="rounded-xl border border-civic-border bg-surface p-4" data-home-section="{{ $section->id }}">
                            <input type="hidden" name="{{ $prefix }}[id]" value="{{ $section->id }}">
                            <input type="hidden" name="{{ $prefix }}[type]" value="{{ $section->type->value }}">
                            <input type="hidden" name="{{ $prefix }}[hidden]" value="{{ $section->hidden ? '1' : '0' }}">

                            <div class="flex flex-wrap items-start justify-between gap-3">
                                <div>
                                    <h3 class="text-lg font-bold">
                                        {{ $index + 1 }}. {{ __($section->type->label()) }}
                                        @if ($section->hidden)
                                            <span class="badge badge-warning align-middle">{{ __('home::cms.hidden') }}</span>
                                        @else
                                            <span class="badge badge-ghost align-middle">{{ __('home::cms.visible') }}</span>
                                        @endif
                                    </h3>

                                    <p class="mt-1 text-sm opacity-70">
                                        {{ $summaries[$section->id] ?? __('home::cms.untitled') }}
                                    </p>
                                </div>

                                <div class="flex flex-wrap gap-2">
                                    <button type="button" class="btn btn-sm btn-primary" data-cms-dialog-trigger
                                            data-home-editor-open="{{ $section->id }}" aria-haspopup="dialog">
                                        <x-ui::icon name="pencil" />
                                        <span>{{ __('home::cms.edit') }}</span>
                                    </button>

                                    @if (! $loop->first)
                                        <button type="submit" name="action" value="move-up:{{ $section->id }}" class="btn btn-sm btn-ghost">
                                            <span>{{ __('home::cms.move_up') }}</span>
                                        </button>
                                    @endif

                                    @if (! $loop->last)
                                        <button type="submit" name="action" value="move-down:{{ $section->id }}" class="btn btn-sm btn-ghost">
                                            <span>{{ __('home::cms.move_down') }}</span>
                                        </button>
                                    @endif

                                    <button type="submit" name="action" value="{{ $section->hidden ? 'show' : 'hide' }}:{{ $section->id }}" class="btn btn-sm btn-ghost">
                                        <x-ui::icon :name="$section->hidden ? 'eye' : 'eye-off'" />
                                        <span>{{ $section->hidden ? __('home::cms.show') : __('home::cms.hide') }}</span>
                                    </button>

                                    <x-cms::modal
                                        :id="$idPrefix.'-remove'"
                                        :label="__('home::cms.remove')"
                                        :title="__('home::cms.remove_title')"
                                        variant="error">
                                        <p>{{ __('home::cms.remove_help') }}</p>

                                        <button type="submit" name="action" value="remove:{{ $section->id }}" class="btn btn-error mt-4">
                                            <x-ui::icon name="trash-2" />
                                            <span>{{ __('home::cms.remove_confirm') }}</span>
                                        </button>
                                    </x-cms::modal>
                                </div>
                            </div>

                            <dialog id="{{ $dialogId }}" class="cms-dialog w-full max-w-3xl rounded-xl p-0"
                                    data-cms-dialog data-home-editor-dialog="{{ $section->id }}"
                                    aria-labelledby="{{ $dialogId }}-title">
                                <div class="cms-dialog__body grid gap-4">
                                    <h4 id="{{ $dialogId }}-title" class="text-lg font-bold">
                                        {{ __('home::cms.edit') }} — {{ __($section->type->label()) }}
                                    </h4>

                                    @include('home::cms.partials.home-block-fields', [
                                        'definition' => BlockCatalog::get($section->type),
                                        'props' => $section->props,
                                        'prefix' => $prefix.'[props]',
                                        'errorPrefix' => $errorPrefix,
                                        'idPrefix' => $idPrefix,
                                    ])

                                    <div class="flex justify-end">
                                        <button type="button" class="btn w-full sm:w-auto" data-home-editor-close>
                                            {{ __('home::cms.close') }}
                                        </button>
                                    </div>
                                </div>
                            </dialog>
                        </li>
                    @endforeach
                </ol>
            @endif
        </section>

        @if ($pending !== null)
            @php
                $pendingId = 'home-section-novo';
                $pendingDialogId = $pendingId.'-dialog';
            @endphp

            <section class="rounded-xl border border-dashed border-civic-border p-4" aria-labelledby="home-pending-title">
                <h2 id="home-pending-title" class="text-xl font-bold">{{ __('home::cms.pending_title') }}</h2>
                <p class="mt-1 text-sm opacity-70">{{ __('home::cms.pending_hint') }}</p>

                <input type="hidden" name="novo[type]" value="{{ $pending['definition']->type->value }}">

                <div class="mt-4 flex flex-wrap gap-2">
                    <button type="button" class="btn btn-sm btn-primary" data-cms-dialog-trigger
                            data-home-editor-open="novo" aria-haspopup="dialog">
                        <x-ui::icon name="pencil" />
                        <span>{{ __('home::cms.edit') }}</span>
                    </button>

                    <a class="btn btn-sm btn-ghost" href="{{ route('home.cms.index') }}">
                        <x-ui::icon name="x" />
                        <span>{{ __('home::cms.pending_cancel') }}</span>
                    </a>
                </div>

                <dialog id="{{ $pendingDialogId }}" class="cms-dialog w-full max-w-3xl rounded-xl p-0"
                        data-cms-dialog data-home-editor-dialog="novo"
                        aria-labelledby="{{ $pendingDialogId }}-title">
                    <div class="cms-dialog__body grid gap-4">
                        <h3 id="{{ $pendingDialogId }}-title" class="text-lg font-bold">
                            {{ __('home::cms.pending_title') }} — {{ __($pending['definition']->type->label()) }}
                        </h3>

                        @include('home::cms.partials.home-block-fields', [
                            'definition' => $pending['definition'],
                            'props' => $pending['props'],
                            'prefix' => 'novo[props]',
                            'errorPrefix' => 'novo.props',
                            'idPrefix' => $pendingId,
                        ])

                        <div class="flex justify-end">
                            <button type="button" class="btn w-full sm:w-auto" data-home-editor-close>
                                {{ __('home::cms.close') }}
                            </button>
                        </div>
                    </div>
                </dialog>
            </section>
        @endif

        <div class="flex flex-wrap gap-3">
            <x-cms::button type="submit" name="action" value="save" variant="primary">
                <x-ui::icon name="check-circle" />
                <span>{{ __('home::cms.save') }}</span>
            </x-cms::button>
        </div>
    </form>

    <section class="mt-10 rounded-xl border border-civic-border bg-surface p-4" aria-labelledby="home-preview-auth-title">
        <h2 id="home-preview-auth-title" class="text-xl font-bold">{{ __('home::cms.preview_auth') }}</h2>
        <p class="mt-1 text-sm opacity-70">{{ __('home::cms.preview_auth_hint') }}</p>

        <ul class="mt-3 flex flex-wrap gap-3" role="list">
            @foreach (Locales::all() as $locale)
                <li>
                    <a class="btn btn-sm btn-ghost" href="{{ route('home.preview', ['locale' => $locale]) }}">
                        <x-ui::icon name="external-link" />
                        <span>{{ Locales::label($locale) }}</span>
                    </a>
                </li>
            @endforeach
        </ul>
    </section>

    @if ($canPublish)
        <section class="mt-8 rounded-xl border border-civic-border bg-surface p-4" aria-labelledby="home-publish-title">
            <h2 id="home-publish-title" class="text-xl font-bold">{{ __('home::cms.publish_title') }}</h2>
            <p class="mt-1 text-sm opacity-70">{{ __('home::cms.publish_hint') }}</p>

            {{-- Formulário próprio (sem aninhar `forms`): publica o rascunho **salvo**. --}}
            <form method="post" action="{{ route('home.cms.publish') }}" class="mt-3">
                @csrf

                <x-cms::button type="submit" variant="primary">
                    <x-ui::icon name="send" />
                    <span>{{ __('home::cms.publish') }}</span>
                </x-cms::button>
            </form>
        </section>
    @endif

    <section class="mt-10 rounded-xl border border-civic-border bg-surface p-4" aria-labelledby="home-preview-title">
        <h2 id="home-preview-title" class="text-xl font-bold">{{ __('home::cms.preview') }}</h2>
        <p class="mt-1 text-sm opacity-70">{{ __('home::cms.preview_hint') }}</p>

        @if (! $hasDraft)
            <p class="mt-3">{{ __('home::cms.preview_none') }}</p>
        @elseif ($preview === null)
            <p class="mt-3 text-error">{{ __('home::cms.preview_invalid') }}</p>
        @elseif ($preview->sections === [])
            <p class="mt-3">{{ __('home::cms.preview_empty') }}</p>
        @else
            <ol class="mt-3 grid gap-2">
                @foreach ($preview->sections as $index => $section)
                    <li class="flex flex-wrap items-center gap-2 rounded-lg border border-civic-border px-3 py-2">
                        <span class="badge badge-ghost">{{ __($section->type->label()) }}</span>
                        <span class="font-semibold">{{ $index + 1 }}.</span>
                        <span>{{ $summaries[$section->id] ?? __('home::cms.untitled') }}</span>

                        @if ($section->hidden)
                            <span class="badge badge-warning">{{ __('home::cms.hidden') }}</span>
                        @endif
                    </li>
                @endforeach
            </ol>
        @endif
    </section>
</x-layout::cms>