{{--
    Editor de tema/tokens (Configurações → Aparência), gerado do `ThemeSchema` (ADR-016/ADR-046).
    Um controle por token — nunca o documento JSON. A amostra usa o `/theme.css` já publicado
    (same-origin), sem folha de estilo embutida nem atributo de estilo, e mostra os tokens salvos.
--}}
@php
    $firstError = $errors->any() ? $errors->keys()[0] : null;
@endphp

@push('styles')
    <link rel="stylesheet" href="{{ route('layout.theme') }}">
@endpush

<x-layout::cms
    :title="__($label)"
    :breadcrumbs="[
        ['label' => __('configuracoes::cms.title'), 'url' => route('configuracoes.cms.index')],
        ['label' => __($label)],
    ]">
    @if (session('status'))
        <x-cms::alert variant="success">{{ session('status') }}</x-cms::alert>
    @endif

    <x-cms::form-errors />

    <x-cms::card>
        <form method="post" action="{{ route('configuracoes.cms.update', ['section' => $section]) }}" class="grid gap-4">
            @csrf
            @method('PUT')

            <x-cms::fieldset
                id="configuracoes-theme"
                :legend="__('configuracoes::cms.theme_data')"
                :description="__($description)">
                @foreach ($fields as $field)
                    @php
                        $key = $field['key'];
                        $fieldLabel = __($field['label']);
                        $help = __($field['help']);
                        $value = $values[$key] ?? null;
                        $describedBy = array_values(array_filter([
                            'field-'.$key.'-help',
                            $errors->has($key) ? 'field-'.$key.'-error' : null,
                        ]));
                    @endphp

                    @if ($field['type'] === 'scale')
                        <div class="form-control w-full">
                            <label class="label" for="field-{{ $key }}">
                                <span class="label-text">
                                    {{ $fieldLabel }}<span aria-hidden="true"> *</span>
                                </span>
                            </label>

                            <select id="field-{{ $key }}" name="{{ $key }}" class="select select-bordered w-full"
                                    required
                                    @if ($firstError === $key) autofocus @endif
                                    @if ($describedBy !== []) aria-describedby="{{ implode(' ', $describedBy) }}" @endif
                                    @if ($errors->has($key)) aria-invalid="true" @endif>
                                @foreach ($field['values'] as $option)
                                    <option value="{{ $option }}" @selected(old($key, $value) === $option)>{{ $option }}</option>
                                @endforeach
                            </select>

                            <span id="field-{{ $key }}-help" class="label-text-alt">{{ $help }}</span>

                            @error($key)
                                <span id="field-{{ $key }}-error" class="label-text-alt text-error" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    @else
                        <x-cms::form-group
                            :name="$key"
                            :label="$fieldLabel"
                            type="text"
                            :value="$value"
                            :help="$help"
                            :required="true"
                            :autofocus="$firstError === $key"
                            dir="ltr"
                            spellcheck="false"
                            autocomplete="off"
                            autocapitalize="off" />
                    @endif
                @endforeach
            </x-cms::fieldset>

            <div class="flex flex-wrap items-center gap-2">
                <x-cms::button type="submit" variant="primary">{{ __('configuracoes::cms.save') }}</x-cms::button>
                <x-cms::button variant="ghost" :href="route('configuracoes.cms.index')">{{ __('configuracoes::cms.cancel') }}</x-cms::button>
            </div>
        </form>
    </x-cms::card>

    <x-cms::card>
        <section class="theme-preview" aria-labelledby="theme-preview-title">
            <h2 id="theme-preview-title" class="theme-preview__title">{{ __('configuracoes::cms.preview_title') }}</h2>
            <p class="theme-preview__note">{{ __('configuracoes::cms.preview_note') }}</p>

            <h3 class="theme-preview__heading">{{ __('configuracoes::cms.preview_heading') }}</h3>
            <p class="theme-preview__text">{{ __('configuracoes::cms.preview_text') }}</p>
            <p class="theme-preview__text">
                <a class="theme-preview__link" href="{{ route('layout.theme') }}">{{ __('configuracoes::cms.preview_link') }}</a>
            </p>
            <p>
                <a class="btn btn-primary" href="{{ route('configuracoes.cms.index') }}">{{ __('configuracoes::cms.preview_button') }}</a>
            </p>

            <h3 class="theme-preview__heading">{{ __('configuracoes::cms.preview_tokens') }}</h3>
            <dl class="theme-preview__tokens">
                @foreach ($fields as $field)
                    <div class="theme-preview__token">
                        <dt>{{ __($field['label']) }}</dt>
                        <dd>
                            @if ($field['type'] === 'color')
                                <span class="theme-preview__swatch theme-preview__swatch--{{ $field['key'] }}" aria-hidden="true"></span>
                            @endif
                            <code>{{ $saved[$field['key']] ?? '' }}</code>
                        </dd>
                    </div>
                @endforeach
            </dl>
        </section>
    </x-cms::card>
</x-layout::cms>