@props([
    'items' => null,
    'filters' => null,
    'selectedId' => null,
])

@php
    $items = $items ?? collect([
        ['id' => 2149, 'name' => 'Michele Barone', 'roles' => ['Proprietario'], 'unit' => 'Scala A / Interno 5', 'status' => 'Attivo', 'source' => 'legacy'],
        ['id' => 3022, 'name' => 'Giulia Neri', 'roles' => ['Inquilino'], 'unit' => 'Scala B / Interno 1', 'status' => 'Da validare', 'source' => 'manuale'],
        ['id' => 4411, 'name' => 'Studio Rossi', 'roles' => ['Fornitore'], 'unit' => '—', 'status' => 'Sospeso', 'source' => 'legacy'],
    ]);

    $filters = $filters ?? collect([
        ['label' => 'Tutti', 'value' => 'all', 'active' => true],
        ['label' => 'Clienti', 'value' => 'clienti'],
        ['label' => 'Fornitori', 'value' => 'fornitori'],
        ['label' => 'Inquilini', 'value' => 'inquilini'],
        ['label' => 'Da importare', 'value' => 'legacy'],
    ]);

    $selectedId = $selectedId ?? 2149;
@endphp

<div class="list-panel netgescon-card h-full flex flex-col">
    <div class="space-y-5 flex-1 flex flex-col">
        <div>
            <p class="text-xs uppercase tracking-wide text-slate-500 mb-2">Ricerca rapida</p>
            <div class="relative">
                <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
                    <i class="fas fa-search"></i>
                </span>
                <input type="text" class="w-full rounded-2xl border border-slate-200 bg-white py-2.5 pl-11 pr-4 text-sm focus:border-blue-400 focus:ring-2 focus:ring-blue-200" placeholder="Cerca per nome, codice, CF..." autocomplete="off">
            </div>
        </div>

        <div>
            <p class="text-xs uppercase tracking-wide text-slate-500 mb-2">Filtri salvati</p>
            <div class="flex flex-wrap gap-2">
                @foreach($filters as $filter)
                    <button type="button" class="filter-chip {{ $filter['active'] ?? false ? 'is-active' : '' }}">
                        {{ $filter['label'] }}
                    </button>
                @endforeach
            </div>
        </div>

        <div class="flex items-center justify-between">
            <p class="text-xs uppercase tracking-wide text-slate-500 mb-0">Risultati</p>
            <span class="pill pill-muted">{{ $items->count() }} soggetti</span>
        </div>

        <div class="list-panel-scroll flex-1">
            @forelse($items as $item)
                <button type="button" class="list-panel-item {{ $item['id'] === $selectedId ? 'is-active' : '' }}">
                    <div class="flex items-start gap-4 text-left">
                        <div class="avatar-circle bg-slate-100 text-blue-600">
                            {{ collect(explode(' ', $item['name']))->map(fn($part) => substr($part, 0, 1))->take(2)->implode('') }}
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center justify-between">
                                <p class="font-semibold text-slate-900 mb-0">{{ $item['name'] }}</p>
                                <small class="text-slate-400">#{{ $item['id'] }}</small>
                            </div>
                            <div class="flex flex-wrap gap-2 mt-2 text-xs">
                                @foreach($item['roles'] as $role)
                                    <span class="pill pill-primary">{{ $role }}</span>
                                @endforeach
                                <span class="pill pill-muted">{{ $item['unit'] }}</span>
                            </div>
                            <div class="flex items-center justify-between mt-3 text-xs text-slate-500">
                                <span>Stato: {{ $item['status'] }}</span>
                                <span class="font-semibold {{ $item['source'] === 'legacy' ? 'text-amber-500' : 'text-emerald-500' }}">
                                    {{ $item['source'] === 'legacy' ? 'Import Gescon' : 'Inserito' }}
                                </span>
                            </div>
                        </div>
                    </div>
                </button>
            @empty
                <div class="text-center text-slate-400 py-8">
                    <i class="fas fa-users-slash text-2xl mb-3"></i>
                    <p class="text-sm">Nessun nominativo trovato con i filtri selezionati.</p>
                </div>
            @endforelse
        </div>

        <div class="list-panel-footer">
            <button type="button" class="netgescon-btn netgescon-btn-outline-secondary w-full">
                <i class="fas fa-plus mr-2"></i>Nuovo nominativo
            </button>
        </div>
    </div>
</div>

@once
@push('styles')
<style>
    .list-panel {
        border-radius: 28px;
    }

    .filter-chip {
        border-radius: 999px;
        border: 1px solid #e2e8f0;
        padding: 0.3rem 0.9rem;
        font-size: 0.85rem;
        font-weight: 500;
        color: #475569;
        background: #fff;
        transition: all 0.2s ease;
    }

    .filter-chip.is-active {
        border-color: transparent;
        color: #fff;
        background: linear-gradient(135deg, #2563eb, #7c3aed);
        box-shadow: 0 8px 18px rgba(59, 130, 246, 0.3);
    }

    .list-panel-scroll {
        overflow-y: auto;
        padding-right: 0.35rem;
        max-height: calc(100vh - 360px);
    }

    .list-panel-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .list-panel-scroll::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.6);
        border-radius: 10px;
    }

    .list-panel-item {
        width: 100%;
        border-radius: 22px;
        border: 1px solid transparent;
        background: #fff;
        padding: 0.95rem 1rem;
        margin-bottom: 0.85rem;
        transition: all 0.2s ease;
    }

    .list-panel-item:hover {
        border-color: #e2e8f0;
        box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
    }

    .list-panel-item.is-active {
        border-color: rgba(37, 99, 235, 0.45);
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(124, 58, 237, 0.05));
        box-shadow: 0 15px 30px rgba(59, 130, 246, 0.25);
    }

    .list-panel .avatar-circle {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
    }

    .list-panel-footer {
        margin-top: auto;
        padding-top: 1.25rem;
        border-top: 1px dashed #e2e8f0;
    }
</style>
@endpush
@endonce