@extends('admin.layouts.netgescon')

@section('page-title', 'Gestione Affitti')

@section('breadcrumb')
    <span>Gestione Affitti</span>
@endsection

@section('content')
@php
    $toneMap = [
        'emerald' => [
            'icon' => 'text-emerald-500',
            'ring' => 'bg-emerald-50 border-emerald-100',
            'chip' => 'bg-emerald-50 text-emerald-700'
        ],
        'amber' => [
            'icon' => 'text-amber-500',
            'ring' => 'bg-amber-50 border-amber-100',
            'chip' => 'bg-amber-50 text-amber-700'
        ],
        'blue' => [
            'icon' => 'text-blue-500',
            'ring' => 'bg-blue-50 border-blue-100',
            'chip' => 'bg-blue-50 text-blue-700'
        ],
        'indigo' => [
            'icon' => 'text-indigo-500',
            'ring' => 'bg-indigo-50 border-indigo-100',
            'chip' => 'bg-indigo-50 text-indigo-700'
        ],
    ];

    $statusPills = [
        'warning' => 'bg-amber-100 text-amber-800',
        'neutral' => 'bg-gray-100 text-gray-700',
    ];

    $priorityPills = [
        'high' => 'bg-red-100 text-red-700',
        'medium' => 'bg-amber-100 text-amber-800',
        'low' => 'bg-emerald-100 text-emerald-700',
    ];

    $timelineTone = [
        'emerald' => 'bg-emerald-100 text-emerald-700',
        'indigo' => 'bg-indigo-100 text-indigo-700',
        'amber' => 'bg-amber-100 text-amber-800',
    ];
@endphp

<div class="space-y-8 netgescon-fade-in">
    <!-- Hero & Actions -->
    <div class="netgescon-card bg-gradient-to-br from-slate-900 via-slate-800 to-blue-900 text-white relative overflow-hidden">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
            <div>
                <p class="uppercase tracking-widest text-white/60 text-xs mb-1">Console Operativa</p>
                <h1 class="text-3xl font-semibold flex items-center gap-3">
                    <i class="fas fa-house-user text-white/80"></i>
                    Gestione Affitti
                </h1>
                <p class="text-white/70 mt-2 max-w-2xl">
                    Monitoraggio centralizzato dei contratti, unità in scadenza e lavoro del team. I dati reali saranno collegati alla Rubrica Unica e ai moduli contabili nelle fasi successive.
                </p>
            </div>
            <div class="flex flex-wrap gap-3">
                <button class="netgescon-btn netgescon-btn-outline-primary bg-white/10 border-white/30 text-white hover:bg-white/20">
                    <i class="fas fa-filter"></i>
                    Filtri avanzati
                </button>
                <a href="{{ route('admin.affitti.create') }}" class="netgescon-btn netgescon-btn-primary bg-white text-slate-900 border-white">
                    <i class="fas fa-plus"></i>
                    Nuovo contratto
                </a>
            </div>
        </div>
        <div class="absolute -right-16 -bottom-16 w-64 h-64 bg-white/5 rounded-full blur-3xl"></div>
    </div>

    <!-- Metriche principali -->
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6">
        @foreach($metrics as $metric)
            @php($tone = $toneMap[$metric['tone']] ?? $toneMap['blue'])
            <div class="netgescon-card border {{ $tone['ring'] }}">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-500 font-medium">{{ $metric['label'] }}</p>
                        <p class="text-3xl font-bold text-gray-900 mt-1">{{ $metric['value'] }}</p>
                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold mt-3 {{ $tone['chip'] }}">
                            <i class="fas fa-arrow-up-right mr-1 text-xs"></i>
                            {{ $metric['chip'] }}
                        </span>
                    </div>
                    <div class="p-3 rounded-full bg-white shadow-inner">
                        <i class="fas {{ $metric['icon'] }} text-xl {{ $tone['icon'] }}"></i>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <!-- Contratti in scadenza -->
        <div class="netgescon-card xl:col-span-2">
            <div class="netgescon-card-header flex items-center justify-between">
                <div>
                    <h3 class="netgescon-card-title">Contratti in scadenza (30 giorni)</h3>
                    <p class="text-sm text-gray-500">Priorità automatica basata su data e importo canone</p>
                </div>
                <button class="netgescon-btn netgescon-btn-outline-secondary netgescon-btn-sm">
                    <i class="fas fa-download"></i>
                    Esporta elenco
                </button>
            </div>
            <div class="netgescon-card-body overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Unità</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Stabile</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Conduttore</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Canone</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Scadenza</th>
                            <th class="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Stato</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-100">
                        @forelse($expiringContracts as $contract)
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-4 py-3">
                                    <div class="font-semibold text-gray-900">{{ $contract['unit'] }}</div>
                                    <div class="text-xs text-gray-500">Codice interno</div>
                                </td>
                                <td class="px-4 py-3 text-gray-700">{{ $contract['stabile'] }}</td>
                                <td class="px-4 py-3">
                                    <div class="text-gray-900 font-medium">{{ $contract['tenant'] }}</div>
                                    <p class="text-xs text-gray-500">Profilo verificato</p>
                                </td>
                                <td class="px-4 py-3 font-semibold text-gray-900">{{ $contract['rent'] }}</td>
                                <td class="px-4 py-3 text-gray-600">{{ $contract['due_in'] }}</td>
                                <td class="px-4 py-3 text-right">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold {{ $statusPills[$contract['status']] ?? 'bg-gray-100 text-gray-700' }}">
                                        <i class="fas fa-hourglass-half mr-1"></i>
                                        Segui
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-4 py-8 text-center text-gray-500">
                                    <i class="fas fa-check-circle text-3xl mb-3 text-emerald-500"></i>
                                    <p>Nessun contratto in scadenza nel periodo selezionato.</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Taskboard operativo -->
        <div class="netgescon-card">
            <div class="netgescon-card-header">
                <h3 class="netgescon-card-title">Team & Task</h3>
                <p class="text-sm text-gray-500">Promemoria rapidi collegati ai ticket manutentivi</p>
            </div>
            <div class="netgescon-card-body space-y-4">
                @forelse($tasks as $task)
                    <div class="p-4 rounded-2xl border border-gray-100 bg-gray-50">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="font-semibold text-gray-900 flex items-center gap-2">
                                    <i class="fas fa-clipboard-check text-blue-500"></i>
                                    {{ $task['title'] }}
                                </p>
                                <p class="text-sm text-gray-600 mt-1">{{ $task['description'] }}</p>
                                <p class="text-xs text-gray-500 mt-2">
                                    <i class="fas fa-user-circle mr-1"></i>
                                    Responsabile: <span class="font-medium">{{ $task['owner'] }}</span>
                                </p>
                            </div>
                            <span class="px-3 py-1 rounded-full text-xs font-semibold {{ $priorityPills[$task['priority']] ?? 'bg-gray-100 text-gray-700' }}">
                                {{ ucfirst($task['priority']) }}
                            </span>
                        </div>
                        <div class="mt-3 flex items-center justify-between text-sm text-gray-500">
                            <span>
                                <i class="fas fa-clock mr-1"></i>
                                {{ $task['due_date'] }}
                            </span>
                            <a href="#" class="text-blue-600 text-sm font-medium hover:underline">
                                Apri dettaglio
                                <i class="fas fa-arrow-right ml-1 text-xs"></i>
                            </a>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-8 text-gray-500">
                        <i class="fas fa-clipboard-list text-4xl mb-3"></i>
                        <p>Nessun task assegnato al team affitti.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Stabili focus -->
        <div class="netgescon-card lg:col-span-2">
            <div class="netgescon-card-header flex items-center justify-between">
                <h3 class="netgescon-card-title">Stabili sotto osservazione</h3>
                <button class="netgescon-btn netgescon-btn-outline-secondary netgescon-btn-sm">
                    <i class="fas fa-map-marker-alt"></i>
                    Vista mappa
                </button>
            </div>
            <div class="netgescon-card-body">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    @forelse($stabiliFocus as $stabile)
                        <div class="p-4 rounded-2xl border border-gray-100 bg-gradient-to-br from-white to-gray-50">
                            <div class="flex items-start justify-between">
                                <div>
                                    <p class="font-semibold text-gray-900">{{ $stabile['name'] }}</p>
                                    <p class="text-xs text-gray-500 mb-2">{{ $stabile['units'] }} unità totali</p>
                                </div>
                                <span class="netgescon-badge netgescon-badge-info">{{ $stabile['trend'] }}</span>
                            </div>
                            <dl class="mt-3 space-y-1 text-sm text-gray-600">
                                <div class="flex justify-between">
                                    <dt>Occupate</dt>
                                    <dd class="font-semibold text-gray-900">{{ $stabile['occupied'] }}</dd>
                                </div>
                                <div class="flex justify-between">
                                    <dt>Libere</dt>
                                    <dd class="font-semibold text-gray-900">{{ $stabile['free'] }}</dd>
                                </div>
                                <div class="flex justify-between">
                                    <dt>Alert</dt>
                                    <dd class="font-semibold text-amber-600">{{ $stabile['warnings'] }}</dd>
                                </div>
                            </dl>
                            <div class="mt-4 flex items-center justify-between text-xs text-blue-600">
                                <a href="#" class="font-semibold hover:underline">Apri scheda</a>
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </div>
                    @empty
                        <div class="col-span-3 text-center py-10 text-gray-500">
                            <i class="fas fa-building text-4xl mb-3"></i>
                            <p>Nessuno stabile monitorato al momento.</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- Timeline attività -->
        <div class="netgescon-card">
            <div class="netgescon-card-header">
                <h3 class="netgescon-card-title">Attività recenti</h3>
                <p class="text-sm text-gray-500">Ultime operazioni registrate dalla console</p>
            </div>
            <div class="netgescon-card-body">
                <div class="space-y-6">
                    @forelse($timeline as $event)
                        <div class="relative pl-6">
                            <span class="absolute left-0 top-1.5 w-3 h-3 rounded-full bg-blue-500"></span>
                            <div class="flex items-center justify-between">
                                <p class="font-semibold text-gray-900">{{ $event['title'] }}</p>
                                <span class="text-xs text-gray-400">{{ $event['time'] }}</span>
                            </div>
                            <p class="text-sm text-gray-600">{{ $event['details'] }}</p>
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold mt-2 {{ $timelineTone[$event['tone']] ?? 'bg-gray-100 text-gray-700' }}">
                                {{ $event['badge'] }}
                            </span>
                        </div>
                    @empty
                        <div class="text-center py-8 text-gray-500">
                            <i class="fas fa-stream text-4xl mb-3"></i>
                            <p>Nessuna attività registrata nelle ultime 24 ore.</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <!-- CTA placeholder per integrazioni future -->
    <div class="netgescon-card border-dashed border-2 border-blue-200 bg-blue-50">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <p class="text-xs uppercase tracking-[0.2em] text-blue-500">Prossimo step</p>
                <h3 class="text-xl font-semibold text-gray-900 mt-1">Aggancio ai Fornitori & Rubrica Unica</h3>
                <p class="text-sm text-gray-600 mt-1">Collegheremo i dati reali dei fornitori e dei ticket tecnici per ottenere una vista 360° su ogni stabile.</p>
            </div>
            <div class="flex gap-3">
                <button class="netgescon-btn netgescon-btn-outline-primary">
                    <i class="fas fa-lightbulb"></i>
                    Roadmap
                </button>
                <button class="netgescon-btn netgescon-btn-primary">
                    <i class="fas fa-link"></i>
                    Pianifica integrazione
                </button>
            </div>
        </div>
    </div>
</div>
@endsection