@php($summary = $this->pbxSummary)
@php($observed = $this->pbxObservedTokens)

<div class="space-y-4">
    <div class="rounded-lg border border-gray-200 bg-white p-3">
        <div class="mb-2 text-sm font-semibold text-gray-700">Stato integrazione Panasonic / TAPI</div>
        <div class="mb-3 text-xs text-gray-500">Questa sezione tiene insieme configurazione PBX, gruppi di risposta, linee entranti e ultimi eventi CRM letti dai canali telefonici attivi per questo ambiente.</div>

        <div class="grid grid-cols-1 gap-3 md:grid-cols-4">
            <div class="rounded-md border border-slate-200 bg-slate-50 p-3">
                <div class="text-[11px] uppercase tracking-wide text-slate-500">Stato</div>
                <div class="mt-1 text-sm font-semibold text-slate-800">{{ $summary['label'] }}</div>
                <div class="mt-1 text-xs text-slate-500">{{ $summary['assessment'] }}</div>
            </div>
            <div class="rounded-md border border-slate-200 bg-slate-50 p-3">
                <div class="text-[11px] uppercase tracking-wide text-slate-500">Provider</div>
                <div class="mt-1 text-sm font-semibold text-slate-800">{{ $summary['provider'] }}</div>
                <div class="mt-1 text-xs text-slate-500">Canale: {{ $summary['channel'] }} · Bridge: {{ $summary['bridge_mode'] }}</div>
            </div>
            <div class="rounded-md border border-slate-200 bg-slate-50 p-3">
                <div class="text-[11px] uppercase tracking-wide text-slate-500">Eventi CRM</div>
                <div class="mt-1 text-sm font-semibold text-slate-800">{{ $summary['total_messages'] }}</div>
                <div class="mt-1 text-xs text-slate-500">Ultime 24h: {{ $summary['last_24h'] }} · Perse: {{ $summary['missed_calls'] }}</div>
            </div>
            <div class="rounded-md border border-slate-200 bg-slate-50 p-3">
                <div class="text-[11px] uppercase tracking-wide text-slate-500">Ultimo evento</div>
                <div class="mt-1 text-sm font-semibold text-slate-800">{{ $summary['last_event_type'] ?: 'Nessun evento' }}</div>
                <div class="mt-1 text-xs text-slate-500">{{ $summary['last_event_at'] ?: 'Nessun timestamp disponibile' }}</div>
            </div>
        </div>

        <div class="mt-3 text-xs text-gray-600">
            <span class="font-semibold">Interni osservati:</span>
            {{ count($summary['watched_extensions']) > 0 ? implode(', ', $summary['watched_extensions']) : 'nessuno configurato' }}
        </div>
    </div>

    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
        <div class="rounded-lg border border-gray-200 bg-white p-3">
            <div class="mb-2 text-sm font-semibold text-gray-700">Matrice di instradamento</div>
            <div class="overflow-x-auto">
                <table class="min-w-full border-collapse border text-xs">
                    <thead>
                        <tr class="bg-slate-100 text-slate-700">
                            <th class="border px-2 py-1.5 text-left">Tipo</th>
                            <th class="border px-2 py-1.5 text-left">Voce</th>
                            <th class="border px-2 py-1.5 text-left">Interno / numero</th>
                            <th class="border px-2 py-1.5 text-left">Target</th>
                            <th class="border px-2 py-1.5 text-left">Note</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($this->pbxRoutingRows as $row)
                            <tr class="hover:bg-slate-50">
                                <td class="border px-2 py-1.5">{{ $row['type'] }}</td>
                                <td class="border px-2 py-1.5">{{ $row['label'] }}</td>
                                <td class="border px-2 py-1.5">{{ $row['extension'] }}</td>
                                <td class="border px-2 py-1.5">{{ $row['target'] }}</td>
                                <td class="border px-2 py-1.5">{{ $row['note'] }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div class="rounded-lg border border-gray-200 bg-white p-3">
            <div class="mb-2 text-sm font-semibold text-gray-700">Gruppi e linee configurate</div>

            <div class="mb-3">
                <div class="mb-1 text-xs font-semibold text-gray-700">Gruppi di risposta</div>
                <div class="text-xs text-gray-600">
                    @if(count($summary['response_groups']) > 0)
                        @foreach($summary['response_groups'] as $row)
                            <div>{{ $row['extension'] ?? '-' }} · {{ $row['label'] ?? 'Gruppo' }} · fallback {{ $row['target_extension'] ?? '-' }} · modalita {{ $row['mode'] ?? '-' }}</div>
                        @endforeach
                    @else
                        <div>Nessun gruppo aggiuntivo configurato. Restano validi i campi studio 601 e 603.</div>
                    @endif
                </div>
            </div>

            <div>
                <div class="mb-1 text-xs font-semibold text-gray-700">Linee entranti</div>
                <div class="text-xs text-gray-600">
                    @if(count($summary['incoming_lines']) > 0)
                        @foreach($summary['incoming_lines'] as $row)
                            <div>{{ $row['number'] ?? '-' }} · {{ $row['label'] ?? 'Linea' }} · gruppo {{ $row['route_group'] ?? '-' }} · interno {{ $row['target_extension'] ?? '-' }}</div>
                        @endforeach
                    @else
                        <div>Nessuna linea entrante mappata. Usa questa sezione per separare flussi clienti, fornitori e reperibilita.</div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="rounded-lg border border-gray-200 bg-white p-3">
        <div class="mb-2 text-sm font-semibold text-gray-700">Token PBX osservati dal CRM</div>
        <div class="mb-3 text-xs text-gray-500">Il CRM accumula automaticamente gruppi, interni e linee letti dagli eventi telefonici. Usa questi valori per mappare chi gestisce cosa, senza vincolarti a Panasonic.</div>

        <div class="grid gap-4 md:grid-cols-3">
            <div>
                <div class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-600">Interni / extension</div>
                <div class="flex flex-wrap gap-2">
                    @forelse($observed['extensions'] as $token)
                        <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs text-slate-700">{{ $token }}</span>
                    @empty
                        <span class="text-xs text-slate-500">Nessun interno osservato.</span>
                    @endforelse
                </div>
            </div>
            <div>
                <div class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-600">Gruppi</div>
                <div class="flex flex-wrap gap-2">
                    @forelse($observed['groups'] as $token)
                        <span class="rounded-full bg-blue-100 px-2.5 py-1 text-xs text-blue-800">{{ $token }}</span>
                    @empty
                        <span class="text-xs text-slate-500">Nessun gruppo osservato.</span>
                    @endforelse
                </div>
            </div>
            <div>
                <div class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-600">Linee / DID</div>
                <div class="flex flex-wrap gap-2">
                    @forelse($observed['lines'] as $token)
                        <span class="rounded-full bg-emerald-100 px-2.5 py-1 text-xs text-emerald-800">{{ $token }}</span>
                    @empty
                        <span class="text-xs text-slate-500">Nessuna linea osservata.</span>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <div class="rounded-lg border border-gray-200 bg-white p-3">
        <div class="mb-2 text-sm font-semibold text-gray-700">Chi gestisce interni, linee e gruppi</div>
        <div class="mb-3 text-xs text-gray-500">Ogni nominativo puo gestire piu interni, piu linee e piu gruppi. I flag PBX restano modificabili inline con check rapidi.</div>

        <div class="overflow-x-auto">
            <table class="min-w-full border-collapse border text-xs">
                <thead>
                    <tr class="bg-slate-100 text-slate-700">
                        <th class="border px-2 py-1.5 text-left">Collaboratore</th>
                        <th class="border px-2 py-1.5 text-left">Extension gestite</th>
                        <th class="border px-2 py-1.5 text-left">Gruppi gestiti</th>
                        <th class="border px-2 py-1.5 text-left">Linee / DID</th>
                        <th class="border px-2 py-1.5 text-left">Flags</th>
                        <th class="border px-2 py-1.5 text-left">Azioni</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($this->collaboratoriCentralinoRows as $row)
                        <tr class="hover:bg-slate-50">
                            <td class="border px-2 py-1.5">
                                <div class="font-medium">{{ $row['name'] }}</div>
                                <div class="text-[11px] text-slate-500">{{ $row['email'] }}</div>
                            </td>
                            <td class="border px-2 py-1.5">
                                <input type="text" wire:model.defer="collaboratorePbxExtensions.{{ (int) $row['user_id'] }}" class="w-40 rounded-md border-gray-300 text-xs" placeholder="EXT00208, 208" />
                            </td>
                            <td class="border px-2 py-1.5">
                                <input type="text" wire:model.defer="collaboratorePbxGroups.{{ (int) $row['user_id'] }}" class="w-36 rounded-md border-gray-300 text-xs" placeholder="GRP00601, GRP00603" />
                            </td>
                            <td class="border px-2 py-1.5">
                                <input type="text" wire:model.defer="collaboratorePbxLines.{{ (int) $row['user_id'] }}" class="w-36 rounded-md border-gray-300 text-xs" placeholder="0003, 0008" />
                            </td>
                            <td class="border px-2 py-1.5">
                                <label class="mr-3 inline-flex items-center gap-1 text-[11px]">
                                    <input type="checkbox" wire:model.defer="collaboratorePbxPopupEnabled.{{ (int) $row['user_id'] }}" class="rounded border-gray-300" />
                                    popup
                                </label>
                                <label class="inline-flex items-center gap-1 text-[11px]">
                                    <input type="checkbox" wire:model.defer="collaboratorePbxClickToCallEnabled.{{ (int) $row['user_id'] }}" class="rounded border-gray-300" />
                                    click2call
                                </label>
                            </td>
                            <td class="border px-2 py-1.5">
                                <x-filament::button size="xs" color="gray" type="button" wire:click="salvaInternoCollaboratore({{ (int) $row['user_id'] }})">Salva</x-filament::button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="border px-2 py-3 text-center text-gray-500">Nessun collaboratore assegnato agli stabili di questo amministratore.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="rounded-lg border border-gray-200 bg-white p-3">
        <div class="mb-2 text-sm font-semibold text-gray-700">Ultimi eventi letti dal CRM</div>
        <div class="mb-3 text-xs text-gray-500">Se qui compaiono record, almeno uno dei canali telefonici attivi sta gia portando traffico nel CRM. In modalita hybrid puoi vedere sia eventi Panasonic sia righe SMDR.</div>

        <div class="overflow-x-auto">
            <table class="min-w-full border-collapse border text-xs">
                <thead>
                    <tr class="bg-slate-100 text-slate-700">
                        <th class="border px-2 py-1.5 text-left">Quando</th>
                        <th class="border px-2 py-1.5 text-left">Evento</th>
                        <th class="border px-2 py-1.5 text-left">Direzione</th>
                        <th class="border px-2 py-1.5 text-left">Telefono</th>
                        <th class="border px-2 py-1.5 text-left">Interno</th>
                        <th class="border px-2 py-1.5 text-left">Utente</th>
                        <th class="border px-2 py-1.5 text-left">Ruolo</th>
                        <th class="border px-2 py-1.5 text-left">Stato</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($this->pbxRecentMessages as $row)
                        <tr class="hover:bg-slate-50">
                            <td class="border px-2 py-1.5">{{ $row['received_at'] }}</td>
                            <td class="border px-2 py-1.5">{{ $row['event_type'] }}</td>
                            <td class="border px-2 py-1.5">{{ $row['direction'] }}</td>
                            <td class="border px-2 py-1.5">{{ $row['phone_number'] }}</td>
                            <td class="border px-2 py-1.5">{{ $row['target_extension'] }}</td>
                            <td class="border px-2 py-1.5">{{ $row['user'] }}</td>
                            <td class="border px-2 py-1.5">{{ $row['studio_role'] }}{{ $row['studio_mode'] !== '-' ? ' / ' . $row['studio_mode'] : '' }}</td>
                            <td class="border px-2 py-1.5">{{ $row['status'] }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="border px-2 py-3 text-center text-gray-500">Nessun evento telefonico presente nel CRM per questo amministratore.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>