@php
    $stageMeta = [
        'pre_production' => ['chip' => 'bg-indigo-50 text-indigo-600',  'icon' => 'flag'],
        'production'     => ['chip' => 'bg-sky-50 text-sky-600',        'icon' => 'cog-6-tooth'],
        'pre_delivery'   => ['chip' => 'bg-emerald-50 text-emerald-600','icon' => 'shield-check'],
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">

        <x-page-header :title="__('Quality Checklists')" :subtitle="__('Define the checks each job must pass. A baseline applies to every job; category templates add checks for that job type.')">
            @if ($canManage)
                <x-button type="button" wire:click="createTemplate">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('New Template') }}
                </x-button>
            @endif
        </x-page-header>

        @if ($templates->isEmpty())
            <x-card class="p-6">
                <x-empty-state
                    icon="shield-check"
                    :title="__('No checklist templates yet')"
                    :message="__('Create a baseline template (applies to every job) and category templates for specific job types.')"
                    class="border-0"
                >
                    @if ($canManage)
                        <x-button type="button" wire:click="createTemplate">
                            <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                            {{ __('New Template') }}
                        </x-button>
                    @endif
                </x-empty-state>
            </x-card>
        @else
            <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
                <!-- Template list -->
                <div class="space-y-2">
                    @foreach ($templates as $template)
                        <button type="button" wire:click="selectTemplate({{ $template->id }})"
                                class="block w-full rounded-2xl border p-4 text-left transition {{ $selected && $selected->id === $template->id ? 'border-indigo-300 bg-indigo-50/50 ring-1 ring-indigo-200' : 'border-slate-200 bg-white hover:border-slate-300' }}">
                            <div class="flex items-center justify-between gap-2">
                                <div class="min-w-0">
                                    <p class="truncate text-sm font-semibold text-slate-900">{{ $template->name }}</p>
                                    <p class="mt-0.5 text-xs text-slate-500">
                                        @if ($template->job_category_id === null)
                                            <x-badge color="indigo">{{ __('Baseline, all jobs') }}</x-badge>
                                        @else
                                            <x-badge color="slate">{{ $template->category?->name ?? __('Category') }}</x-badge>
                                        @endif
                                    </p>
                                </div>
                                @unless ($template->is_active)
                                    <span class="shrink-0 rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold uppercase text-slate-400">{{ __('Inactive') }}</span>
                                @endunless
                            </div>
                            <p class="mt-2 text-xs text-slate-400">{{ trans_choice('{0} No checks|{1} :count check|[2,*] :count checks', $template->items_count, ['count' => $template->items_count]) }}</p>
                        </button>
                    @endforeach
                </div>

                <!-- Selected template items -->
                <div class="lg:col-span-2">
                    @if ($selected)
                        <x-card class="p-6">
                            <div class="flex items-start justify-between gap-3 border-b border-slate-100 pb-4">
                                <div>
                                    <h2 class="text-lg font-semibold text-slate-900">{{ $selected->name }}</h2>
                                    <p class="mt-0.5 text-sm text-slate-500">
                                        @if ($selected->job_category_id === null)
                                            {{ __('Applies to every job in addition to any category template.') }}
                                        @else
                                            {{ __('Applies to jobs in :cat (plus the baseline).', ['cat' => $selected->category?->name ?? __('this category')]) }}
                                        @endif
                                    </p>
                                </div>
                                @if ($canManage)
                                    <div class="flex shrink-0 items-center gap-2">
                                        <button type="button" wire:click="editTemplate({{ $selected->id }})" class="rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-50 hover:text-indigo-600" title="{{ __('Edit template') }}">
                                            <x-icon name="pencil-square" class="h-4 w-4" />
                                        </button>
                                        <button type="button" wire:click="deleteTemplate({{ $selected->id }})" wire:confirm="{{ __('Delete this template and its checks?') }}" class="rounded-lg p-1.5 text-slate-400 transition hover:bg-rose-50 hover:text-rose-600" title="{{ __('Delete template') }}">
                                            <x-icon name="trash" class="h-4 w-4" />
                                        </button>
                                    </div>
                                @endif
                            </div>

                            @if ($canManage)
                                <div class="mt-4 flex justify-end">
                                    <x-button type="button" wire:click="addItem">
                                        <x-icon name="plus" class="-ml-1 mr-1.5 h-4 w-4" />
                                        {{ __('Add check') }}
                                    </x-button>
                                </div>
                            @endif

                            <div class="mt-4 space-y-6">
                                @foreach ($stageOrder as $stage)
                                    @php $stageItems = $items[$stage] ?? collect(); $meta = $stageMeta[$stage] ?? $stageMeta['production']; @endphp
                                    @if ($stageItems->isNotEmpty())
                                        <div wire:key="tstage-{{ $stage }}">
                                            <div class="mb-2 flex items-center gap-2">
                                                <span class="flex h-6 w-6 items-center justify-center rounded-lg {{ $meta['chip'] }}"><x-icon :name="$meta['icon']" class="h-3.5 w-3.5" /></span>
                                                <h3 class="text-sm font-semibold text-slate-700">{{ $stageLabels[$stage] ?? $stage }}</h3>
                                            </div>
                                            <ul class="divide-y divide-slate-100 rounded-xl border border-slate-100">
                                                @foreach ($stageItems as $item)
                                                    <li wire:key="titem-{{ $item->id }}" class="flex items-start justify-between gap-3 p-3">
                                                        <div class="min-w-0">
                                                            <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
                                                                <span class="text-sm font-medium text-slate-800">{{ $item->label }}</span>
                                                                @if ($item->is_required)
                                                                    <span class="rounded bg-rose-50 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-rose-600">{{ __('Required') }}</span>
                                                                @else
                                                                    <span class="rounded bg-slate-100 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-slate-500">{{ __('Optional') }}</span>
                                                                @endif
                                                                <x-badge :color="$respMeta[$item->responsible]['color'] ?? 'slate'">{{ $respMeta[$item->responsible]['label'] ?? ucfirst($item->responsible) }}</x-badge>
                                                                @if ($item->requires_approval)<span class="text-[11px] text-slate-400">{{ __('· approval') }}</span>@endif
                                                                @if ($item->requires_evidence)<span class="text-[11px] text-slate-400">{{ __('· evidence') }}</span>@endif
                                                            </div>
                                                            @if ($item->description)<p class="mt-0.5 text-xs text-slate-400">{{ $item->description }}</p>@endif
                                                        </div>
                                                        @if ($canManage)
                                                            <div class="flex shrink-0 items-center gap-2">
                                                                <button type="button" wire:click="editItem({{ $item->id }})" class="text-xs font-medium text-indigo-600 hover:text-indigo-700">{{ __('Edit') }}</button>
                                                                <button type="button" wire:click="deleteItem({{ $item->id }})" wire:confirm="{{ __('Remove this check?') }}" class="text-slate-300 transition hover:text-rose-600"><x-icon name="trash" class="h-4 w-4" /></button>
                                                            </div>
                                                        @endif
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif
                                @endforeach

                                @if ($items->isEmpty())
                                    <p class="rounded-xl border border-dashed border-slate-200 py-8 text-center text-sm text-slate-400">{{ __('No checks yet. Add the first one.') }}</p>
                                @endif
                            </div>
                        </x-card>
                    @else
                        <x-card class="p-10 text-center text-sm text-slate-400">{{ __('Select a template to manage its checks.') }}</x-card>
                    @endif
                </div>
            </div>
        @endif
    </div>

    <!-- Template modal -->
    <x-dialog-modal wire:model.live="showTemplateModal" maxWidth="lg">
        <x-slot name="title">{{ $editingTemplateId ? __('Edit Template') : __('New Template') }}</x-slot>
        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div>
                    <x-label for="templateName" :value="__('Template name')" />
                    <x-input id="templateName" type="text" wire:model="templateName" class="mt-1 block w-full" placeholder="{{ __('e.g. Signage QA') }}" />
                    <x-input-error for="templateName" class="mt-1" />
                </div>
                <div>
                    <x-label for="templateCategoryId" :value="__('Applies to')" />
                    <select id="templateCategoryId" wire:model="templateCategoryId" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Baseline, every job') }}</option>
                        @foreach ($categories as $category)
                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-slate-400">{{ __('Category templates stack on top of the baseline.') }}</p>
                    <x-input-error for="templateCategoryId" class="mt-1" />
                </div>
                <label class="flex items-center gap-2 text-sm text-slate-700">
                    <input type="checkbox" wire:model="templateActive" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                    {{ __('Active') }}
                </label>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showTemplateModal', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="saveTemplate" wire:loading.attr="disabled">{{ __('Save') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Item modal -->
    <x-dialog-modal wire:model.live="showItemModal" maxWidth="lg">
        <x-slot name="title">{{ $editingItemId ? __('Edit Check') : __('Add Check') }}</x-slot>
        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div>
                    <x-label for="itemLabel" :value="__('Check')" />
                    <x-input id="itemLabel" type="text" wire:model="itemLabel" class="mt-1 block w-full" placeholder="{{ __('e.g. Colours verified against approved proof') }}" />
                    <x-input-error for="itemLabel" class="mt-1" />
                </div>
                <div>
                    <x-label for="itemDescription" :value="__('Guidance (optional)')" />
                    <textarea id="itemDescription" rows="2" wire:model="itemDescription" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="itemDescription" class="mt-1" />
                </div>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="itemStage" :value="__('Stage')" />
                        <select id="itemStage" wire:model="itemStage" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($stageOrder as $s)
                                <option value="{{ $s }}">{{ $stageLabels[$s] ?? $s }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <x-label for="itemResponsible" :value="__('Responsible')" />
                        <select id="itemResponsible" wire:model="itemResponsible" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($responsibleOptions as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="itemResponsible" class="mt-1" />
                    </div>
                </div>
                <div class="space-y-2 rounded-xl bg-slate-50 p-3">
                    <label class="flex items-center gap-2 text-sm text-slate-700">
                        <input type="checkbox" wire:model="itemRequired" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                        {{ __('Required, gates the job status until done') }}
                    </label>
                    <label class="flex items-center gap-2 text-sm text-slate-700">
                        <input type="checkbox" wire:model="itemRequiresApproval" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                        {{ __('Needs an approver name + date') }}
                    </label>
                    <label class="flex items-center gap-2 text-sm text-slate-700">
                        <input type="checkbox" wire:model="itemRequiresEvidence" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                        {{ __('Needs a photo/file as evidence') }}
                    </label>
                </div>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showItemModal', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="saveItem" wire:loading.attr="disabled">{{ __('Save') }}</x-button>
        </x-slot>
    </x-dialog-modal>
</div>