@props([
    /** "investor" or "startup" — selects the schema source + endpoint shape. */
    'entity',
    /** Section key (e.g. "identity") — must exist in EntitySectionSchema. */
    'sectionKey',
    /** PATCH endpoint that accepts {fields:{...}}. Required. */
    'updateUrl',
    /** The Eloquent model instance whose data this section displays. Required. */
    'model',
    /** Section title (already translated string) for the card header. */
    'title',
    /** Optional icon name (without the `#icon-` prefix). */
    'icon' => 'shield',
    /** Optional icon background colour pair: ['bg' => '...', 'fg' => '...']. */
    'iconStyle' => null,
    /** sessionStorage collapse key (e.g. "inv.identity"). Required for persistence. */
    'collapseKey',
    /** Whether the card starts open. Defaults to true. */
    'open' => true,
])

@php
    use App\Services\Admin\EntitySectionSchema;

    $schema = EntitySectionSchema::getSection($entity, $sectionKey);
    $fields = $schema['fields'] ?? [];

    // Snapshot current field values from the model. The snapshot is sent
    // to the Alpine component so Cancel can revert + Save can diff.
    // Multiselect fields read their pivot column off the relation's items;
    // dates serialise to YYYY-MM-DD so <input type="date"> binds cleanly.
    $currentValues = [];
    foreach ($fields as $name => $def) {
        if (($def['type'] ?? null) === 'multiselect') {
            $relation = $def['relation'];
            $column   = $def['pivot_column'];
            $items    = $model->relationLoaded($relation)
                ? $model->{$relation}
                : $model->{$relation}()->get();
            $currentValues[$name] = $items->pluck($column)->map(fn ($id) => (int) $id)->filter()->values()->all();
            continue;
        }
        if (($def['type'] ?? null) === 'string_list') {
            $raw = $model->getAttribute($name);
            $currentValues[$name] = is_array($raw)
                ? array_values(array_filter(array_map('strval', $raw), fn ($v) => trim($v) !== ''))
                : [];
            continue;
        }
        $raw = $model->getAttribute($name);
        if (($def['type'] ?? null) === 'date' && $raw instanceof \DateTimeInterface) {
            $raw = $raw->format('Y-m-d');
        }
        $currentValues[$name] = $raw;
    }

    // Option catalogues (countries + cities + labels) — fetched once per
    // page load via the static cache in EntitySectionSchema; multiple
    // sections share the result. Skip the call entirely when the section
    // has no select-style fields, to save the queries.
    $needsCatalogues = collect($fields)->contains(fn ($d) => in_array($d['type'], ['country', 'city', 'select', 'label', 'multiselect', 'group'], true));
    $catalogues = $needsCatalogues ? EntitySectionSchema::optionCatalogues($entity) : ['countries' => [], 'cities' => [], 'labels' => [], 'groups' => []];

    $sectionDomId = 'sec-' . str_replace('_', '-', $sectionKey);
@endphp

<section class="rd-card rd-card--editable"
         id="{{ $sectionDomId }}"
         data-collapse-key="{{ $collapseKey }}"
         data-open="{{ $open ? 'true' : 'false' }}"
         x-data="editableSection({
             url: @js($updateUrl),
             entity: @js($entity),
             sectionKey: @js($sectionKey),
             fields: @js(array_keys($fields)),
             initial: @js($currentValues),
             catalogues: @js($catalogues),
         })"
         {{-- Hero stat tiles + bio dispatch this event to jump into edit
              mode without duplicating the form in the hero. Listener
              scoped by sectionKey so only the targeted card reacts. --}}
         x-on:section:enter-edit.window="if ($event.detail && $event.detail.sectionKey === @js($sectionKey)) { enterEdit(); $el.scrollIntoView({behavior:'smooth', block:'start'}); }"
         {{-- Edit Mode flipping OFF mid-edit closes any open form so
              orphan UI doesn't linger after the affordances vanish. --}}
         x-on:edit-mode:disabled.window="if (mode === 'edit') cancel()"
         :class="mode === 'edit' ? 'rd-card--editing' : ''">
    <div class="rd-card__head">
        {{-- Title side: the part that triggers collapse. The edit/save
             actions live in a sibling div with @click.stop so clicking
             them doesn't fold the card open/closed. --}}
        <h3 class="rd-card__title">
            <span class="rd-card__icon" @if ($iconStyle) style="background: {{ $iconStyle['bg'] }}; color: {{ $iconStyle['fg'] }};" @endif>
                <svg><use href="#icon-{{ $icon }}"/></svg>
            </span>
            {{ $title }}
        </h3>
        <div class="rd-card__edit-actions" @click.stop>
            {{-- View mode: icon-only Edit affordance. Hidden globally
                 by the body:not(.edit-mode-on) CSS rule unless the
                 admin has flipped the Edit-Mode toggle in the navbar. --}}
            <template x-if="mode === 'view'">
                <button type="button"
                        class="rd-edit-btn rd-edit-btn--icon-only"
                        data-edit-affordance
                        @click="enterEdit()"
                        :title="@js(__('admin.section_edit.edit'))"
                        :aria-label="@js(__('admin.section_edit.edit'))">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                    </svg>
                </button>
            </template>
            {{-- Edit mode: Cancel + Save (Save shows a spinner when busy). --}}
            <template x-if="mode !== 'view'">
                <div class="rd-edit-actions__group">
                    <button type="button" class="rd-edit-btn rd-edit-btn--ghost" @click="cancel()" :disabled="mode === 'saving'">
                        {{ __('admin.section_edit.cancel') }}
                    </button>
                    <button type="button" class="rd-edit-btn rd-edit-btn--primary" @click="save()" :disabled="mode === 'saving'">
                        <svg x-show="mode === 'saving'" class="rd-edit-spinner" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
                        </svg>
                        <span x-text="mode === 'saving' ? @js(__('admin.section_edit.saving')) : @js(__('admin.section_edit.save'))"></span>
                    </button>
                </div>
            </template>
        </div>
        <span class="rd-card__chevron"><svg width="18" height="18"><use href="#icon-chevron"/></svg></span>
    </div>
    <div class="rd-card__body-wrap"><div class="rd-card__body">
        {{-- View mode — the page supplies whatever rich markup it wants. --}}
        <div x-show="mode === 'view'" x-cloak>
            {{ $slot }}
        </div>

        {{-- Edit mode — auto-rendered form from the schema. --}}
        <div x-show="mode !== 'view'" x-cloak class="rd-edit-form">
            <div class="rd-edit-grid">
                @foreach ($fields as $name => $def)
                    <x-admin.section-field
                        :name="$name"
                        :def="$def"
                    />
                @endforeach
            </div>
            <div x-show="errorMessage" x-cloak class="rd-edit-error" x-text="errorMessage"></div>
        </div>
    </div></div>
</section>