<div class="flex w-full flex-col gap-6">
    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
        <div class="setel-metric-card p-5">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <p class="text-sm text-[var(--setel-text-muted)]">Total proyectos</p>
                    <p class="mt-1 text-3xl font-bold tabular-nums text-[var(--setel-text)]">{{ $this->totalProjects }}</p>
                    <p class="mt-2 text-sm text-[var(--setel-text-muted)]">Cartera operativa</p>
                </div>
                <span class="setel-metric-icon setel-metric-icon--solid-blue"><flux:icon.folder class="size-6 text-white" /></span>
            </div>
        </div>
        <div class="setel-metric-card p-5">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <p class="text-sm text-[var(--setel-text-muted)]">Activos</p>
                    <p class="mt-1 text-3xl font-bold tabular-nums text-[var(--setel-text)]">{{ $this->activeProjects }}</p>
                    <p class="mt-2 text-sm text-[var(--setel-text-muted)]">En curso o vigentes</p>
                </div>
                <span class="setel-metric-icon setel-metric-icon--solid-green"><flux:icon.check-circle class="size-6 text-white" /></span>
            </div>
        </div>
        <div class="setel-metric-card p-5 sm:col-span-2 xl:col-span-1">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <p class="text-sm text-[var(--setel-text-muted)]">Inactivos</p>
                    <p class="mt-1 text-3xl font-bold tabular-nums text-[var(--setel-text)]">{{ $this->inactiveProjects }}</p>
                    <p class="mt-2 text-sm text-[var(--setel-text-muted)]">Suspendidos o cerrados</p>
                </div>
                <span class="setel-metric-icon setel-metric-icon--solid-red"><flux:icon.x-circle class="size-6 text-white" /></span>
            </div>
        </div>
    </div>

    <div class="setel-card overflow-hidden">
        <div class="flex flex-col gap-4 border-b border-[var(--setel-card-border)] px-5 py-4 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <h2 class="text-lg font-semibold setel-text-primary">Gestión de proyectos</h2>
                <p class="mt-0.5 text-sm text-[var(--setel-text-muted)]">Agrupa sitios y trabajos por proyecto</p>
            </div>
            <button type="button" class="setel-btn-primary" wire:click="openCreate" wire:loading.attr="disabled" wire:target="openCreate">
                <flux:icon.plus class="size-4" />
                Registrar proyecto
            </button>
        </div>

        <div class="flex flex-col gap-2 border-b border-[var(--setel-card-border)] px-5 py-4 sm:flex-row sm:items-center sm:gap-3">
            <div class="setel-input-icon-wrap isolate max-w-md min-w-0 flex-1 sm:min-w-[240px]">
                <span class="setel-input-icon" aria-hidden="true"><flux:icon.search class="size-5" /></span>
                <input type="search" class="setel-input setel-input--has-icon" wire:model.live.debounce.400ms="search" placeholder="Buscar proyecto..." />
            </div>
            <div class="flex items-center gap-2 sm:ms-auto">
                <label class="text-sm font-medium text-[var(--setel-text-muted)]" for="projects-per-page">Mostrar</label>
                <select id="projects-per-page" class="setel-input w-auto min-w-[5.5rem]" wire:model.live="perPage">
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                </select>
            </div>
            @if ($search !== '')
                <button type="button" class="setel-btn-secondary" wire:click="resetSearch">Limpiar</button>
            @endif
        </div>

        <div class="setel-table-wrap" wire:loading.class="opacity-60">
            <table class="setel-table">
                <thead>
                    <tr>
                        <th class="w-[48px] text-center">#</th>
                        <th>Nombre</th>
                        <th class="w-[120px] text-center">Color</th>
                        <th class="text-center">Sitios</th>
                        <th class="text-center">Trabajos</th>
                        <th class="w-[140px] text-center">Estado</th>
                        <th class="w-[140px] text-center">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($this->projects as $project)
                        <tr wire:key="project-row-{{ $project->id }}">
                            <td class="text-center tabular-nums text-[var(--setel-text-muted)]">{{ $loop->iteration + ($this->projects->currentPage() - 1) * $this->projects->perPage() }}</td>
                            <td class="font-semibold text-[var(--setel-text)]">{{ $project->name }}</td>
                            <td class="text-center">
                                <span class="inline-flex items-center justify-center gap-2">
                                    <span
                                        class="size-7 shrink-0 rounded-md border border-[var(--setel-card-border)] shadow-sm"
                                        style="background-color: {{ $project->color ?? '#2563eb' }}"
                                        title="{{ $project->color ?? '#2563eb' }}"
                                    ></span>
                                    <span class="font-mono text-xs text-[var(--setel-text-muted)]">{{ $project->color ?? '—' }}</span>
                                </span>
                            </td>
                            <td class="text-center">
                                <span class="setel-users-count {{ $project->sites_count > 0 ? 'setel-users-count--has' : 'setel-users-count--empty' }}">
                                    <span class="setel-users-count__icon"><flux:icon.map-pin class="size-3.5" /></span>
                                    <span>{{ $project->sites_count }}</span>
                                </span>
                            </td>
                            <td class="text-center">
                                <span class="setel-users-count {{ $project->works_count > 0 ? 'setel-users-count--has' : 'setel-users-count--empty' }}">
                                    <span class="setel-users-count__icon"><flux:icon.clipboard-document-list class="size-3.5" /></span>
                                    <span>{{ $project->works_count }}</span>
                                </span>
                            </td>
                            <td class="align-middle">
                                <div class="flex items-center justify-center">
                                    @if ($project->status)
                                        <span class="setel-badge setel-badge--user-active uppercase">Activo</span>
                                    @else
                                        <span class="setel-badge setel-badge--user-inactive uppercase">Inactivo</span>
                                    @endif
                                </div>
                            </td>
                            <td class="align-middle">
                                <div class="setel-row-actions">
                                    <button type="button" class="setel-icon-action setel-icon-action--edit" wire:click="openEdit({{ $project->id }})" title="Editar">
                                        <flux:icon.pencil class="size-5" />
                                    </button>
                                    <button
                                        type="button"
                                        class="setel-icon-action setel-icon-action--delete"
                                        wire:click="confirmDelete({{ $project->id }})"
                                        @disabled($project->sites_count > 0 || $project->works_count > 0)
                                        title="Eliminar"
                                    >
                                        <flux:icon.trash class="size-5 {{ $project->sites_count > 0 || $project->works_count > 0 ? 'opacity-50' : '' }}" />
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-4 py-8 text-center text-sm text-[var(--setel-text-muted)]">No hay proyectos disponibles.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="border-t border-[var(--setel-card-border)] px-5 py-4">{{ $this->projects->links() }}</div>
    </div>

    <flux:modal wire:model.self="showModal" wire:close="closeModal" class="max-w-[560px] w-full !max-w-[560px]">
        <div class="space-y-4">
            <div class="flex items-start gap-3 pe-10">
                <span class="setel-modal__icon shrink-0 !static !flex"><flux:icon.folder class="size-5" /></span>
                <div>
                    <flux:heading size="lg">{{ $isEditing ? 'Editar proyecto' : 'Registrar proyecto' }}</flux:heading>
                    <flux:subheading class="mt-1">Nombre, color en mapa y estado.</flux:subheading>
                </div>
            </div>
            <div class="space-y-4 border-t border-[var(--setel-card-border)] pt-4">
                <flux:field>
                    <flux:label>Nombre</flux:label>
                    <flux:input wire:model="form.name" placeholder="Ej: Expansión red norte" />
                    @error('form.name')
                        <p class="mt-1 text-sm font-medium text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </flux:field>
                <flux:field>
                    <flux:label>Color (mapa y sitios)</flux:label>
                    <div class="flex flex-wrap items-center gap-4">
                        <input
                            type="color"
                            class="h-12 w-[4.5rem] shrink-0 cursor-pointer rounded-md border border-[var(--setel-card-border)] bg-[var(--setel-card-bg)] p-1"
                            wire:model.live="form.color"
                            aria-label="Selector de color del proyecto"
                        />
                        <p class="font-mono text-sm font-semibold tracking-wide text-[var(--setel-text)]">{{ $form->color }}</p>
                    </div>
                    <flux:description>Valor hexadecimal. Los sitios vinculados a este proyecto usan este color en el mapa de sitios.</flux:description>
                    @error('form.color')
                        <p class="mt-1 text-sm font-medium text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </flux:field>
                <flux:field>
                    <flux:label>Estado</flux:label>
                    <div class="rounded-lg border border-[var(--setel-card-border)] bg-[var(--setel-content-bg)] px-3 py-2.5">
                        <div class="flex items-center justify-between gap-3">
                            <span class="text-sm font-semibold tracking-wide text-[var(--setel-text)]">{{ $this->form->status ? 'ACTIVO' : 'INACTIVO' }}</span>
                            <flux:switch wire:model.live="form.status" align="left" />
                        </div>
                    </div>
                </flux:field>
            </div>
            <div class="flex items-center justify-end gap-2 border-t border-[var(--setel-card-border)] pt-4">
                <flux:button type="button" variant="ghost" wire:click="closeModal">Cancelar</flux:button>
                <button type="button" class="setel-btn-primary" wire:click="save" wire:loading.attr="disabled" wire:target="save" wire:loading.class="setel-btn-loading">
                    <span wire:loading wire:target="save" class="inline-flex items-center gap-2"><span class="setel-btn-spinner"></span>Guardando...</span>
                    <span wire:loading.remove wire:target="save" class="inline-flex items-center gap-2"><flux:icon.save class="size-4" />Guardar</span>
                </button>
            </div>
        </div>
    </flux:modal>

    <flux:modal wire:model.self="showDeleteConfirm" wire:close="closeDeleteModal" class="max-w-sm !max-w-sm">
        <div class="space-y-4 text-center">
            <div class="mx-auto flex size-14 items-center justify-center rounded-full bg-red-100 text-red-600 dark:bg-red-950/50 dark:text-red-400">
                <flux:icon.exclamation-triangle class="size-8" />
            </div>
            <div>
                <flux:heading size="lg">¿Eliminar proyecto?</flux:heading>
                <flux:subheading class="mt-2">Esta acción no se puede deshacer.</flux:subheading>
            </div>
            <div class="flex items-center justify-center gap-2 border-t border-[var(--setel-card-border)] pt-4">
                <flux:button type="button" variant="ghost" wire:click="closeDeleteModal">Cancelar</flux:button>
                <flux:button type="button" variant="danger" wire:click="destroy" wire:loading.attr="disabled" wire:target="destroy">Eliminar</flux:button>
            </div>
        </div>
    </flux:modal>

    @include('components.catalog.toast', ['showToast' => $showToast, 'toastType' => $toastType, 'toastMessage' => $toastMessage, 'toastSeq' => $toastSeq])
</div>
