@props([
    'breadcrumbs' => [
        ['label' => 'Dashboard', 'icon' => 'fa-home', 'route' => '#'],
        ['label' => 'Anagrafica unica', 'icon' => 'fa-id-card', 'route' => '#'],
    ],
    'condominium' => null,
    'subject' => null,
    'indicators' => [
        ['label' => 'Unità collegate', 'value' => '—', 'icon' => 'fa-building', 'tone' => 'primary'],
        ['label' => 'Rate scadute', 'value' => '—', 'icon' => 'fa-receipt', 'tone' => 'warning'],
        ['label' => 'Ticket aperti', 'value' => '—', 'icon' => 'fa-headset', 'tone' => 'info'],
    ],
    'showBreadcrumbs' => true,
])

@php
    $condominium = $condominium ?? [
        'name' => 'Condominio Demo',
        'code' => 'CDM-001',
        'address' => 'Via Esempio 1, Roma',
        'units' => 24,
    ];

    $subject = $subject ?? [
        'name' => 'Michele Barone',
        'code' => 'SUB-2149',
        'roles' => ['Proprietario', 'Cliente'],
        'status' => 'Attivo',
        'phone' => '+39 06 000000',
        'email' => 'm.barone@example.com',
    ];
@endphp

<div class="netgescon-card context-header space-y-6">
    @if($showBreadcrumbs)
        <div class="flex flex-wrap items-center gap-3 text-sm text-slate-500">
            <div class="flex flex-wrap items-center gap-2">
                @foreach($breadcrumbs as $crumb)
                    <div class="flex items-center gap-2 text-slate-600">
                        @isset($crumb['icon'])
                            <i class="fas {{ $crumb['icon'] }} text-blue-500"></i>
                        @endisset
                        <span>{{ $crumb['label'] }}</span>
                    </div>
                    @if(! $loop->last)
                        <i class="fas fa-angle-right text-xs"></i>
                    @endif
                @endforeach
            </div>
            <div class="ml-auto flex items-center">
                <button type="button" class="netgescon-btn netgescon-btn-outline-primary netgescon-btn-sm">
                    <i class="fas fa-arrows-rotate mr-2"></i>
                    Cambia condominio
                </button>
            </div>
        </div>
    @endif

    <div class="flex flex-col gap-6 lg:flex-row lg:items-center">
        <div class="flex flex-1 items-center gap-4">
            <div class="avatar-circle bg-blue-600 text-white">
                {{ collect(explode(' ', $subject['name']))->map(fn($part) => substr($part, 0, 1))->take(2)->implode('') }}
            </div>
            <div>
                <h2 class="text-2xl font-semibold text-slate-900 mb-1">{{ $subject['name'] }}</h2>
                <div class="flex flex-wrap items-center gap-2 text-sm">
                    <span class="pill pill-muted">Codice {{ $subject['code'] }}</span>
                    @foreach($subject['roles'] as $role)
                        <span class="pill pill-primary">{{ $role }}</span>
                    @endforeach
                    <span class="pill pill-success flex items-center gap-2">
                        <i class="fas fa-circle text-xs"></i>{{ $subject['status'] }}
                    </span>
                </div>
                <div class="flex flex-wrap gap-4 text-sm text-slate-500 mt-3">
                    <span class="flex items-center gap-2"><i class="fas fa-phone text-emerald-500"></i>{{ $subject['phone'] }}</span>
                    <span class="flex items-center gap-2"><i class="fas fa-envelope text-blue-500"></i>{{ $subject['email'] }}</span>
                </div>
            </div>
        </div>
        <div class="lg:w-5/12">
            <div class="bg-slate-50 border border-slate-200 rounded-3xl p-4">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <p class="text-xs uppercase tracking-wide text-slate-500 mb-1">Condominio attivo</p>
                        <h3 class="text-lg font-semibold text-slate-900">{{ $condominium['name'] }}</h3>
                        <p class="text-sm text-slate-500">Codice {{ $condominium['code'] }}</p>
                    </div>
                    <div class="text-right">
                        <span class="pill pill-primary">{{ $condominium['units'] }} unità</span>
                        <p class="text-sm text-slate-500 mt-2">{{ $condominium['address'] }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        @foreach($indicators as $indicator)
            <div class="indicator-card indicator-card-{{ $indicator['tone'] ?? 'primary' }}">
                <div class="flex items-center gap-4">
                    <div class="icon-wrapper">
                        <i class="fas {{ $indicator['icon'] ?? 'fa-circle-info' }}"></i>
                    </div>
                    <div>
                        <p class="text-xs uppercase tracking-wide text-slate-500 mb-1">{{ $indicator['label'] }}</p>
                        <h4 class="text-xl font-semibold text-slate-900 mb-0">{{ $indicator['value'] }}</h4>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>

@once
@push('styles')
<style>
    .context-header .avatar-circle {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 1.35rem;
    }

    .indicator-card {
        border-radius: 22px;
        padding: 1.1rem 1.4rem;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        transition: all 0.2s ease;
    }

    .indicator-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 30px rgba(15, 23, 42, 0.05);
    }

    .indicator-card .icon-wrapper {
        width: 44px;
        height: 44px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(37, 99, 235, 0.1);
        color: #2563eb;
        font-size: 1.1rem;
    }

    .indicator-card-warning .icon-wrapper {
        background: rgba(245, 158, 11, 0.15);
        color: #d97706;
    }

    .indicator-card-info .icon-wrapper {
        background: rgba(14, 165, 233, 0.15);
        color: #0ea5e9;
    }

    .indicator-card-success .icon-wrapper {
        background: rgba(16, 185, 129, 0.15);
        color: #10b981;
    }
</style>
@endpush
@endonce