@extends('layouts.dashboard.inface', ['section' => 'home'])

@section('content')
    @php
        $dashboard = $dashboard ?? null;
        $metrics = $dashboard?->metrics ?? [];
        $topProspects = $dashboard?->topProspects ?? [];
        $salesByDevelopment = $dashboard?->salesByDevelopment ?? [];
        $expenseDistribution = $dashboard?->expenseDistribution ?? [];
        $todayAgenda = $dashboard?->todayAgenda ?? [];
        $inventoryAlert = $dashboard?->inventoryAlert ?? null;

        $metricBadgeClasses = [
            'positive' => 'bg-emerald-50 text-emerald-600 dark:bg-emerald-900/20 dark:text-emerald-400',
            'negative' => 'bg-red-50 text-red-600 dark:bg-red-900/20 dark:text-red-400',
            'info' => 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400',
            'neutral' => 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400',
        ];

        $prospectBadgeClasses = [
            'hot' => 'bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-300',
            'warm' => 'bg-orange-50 text-orange-700 dark:bg-orange-900/20 dark:text-orange-300',
            'cold' => 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300',
        ];

        $agendaToneClasses = [
            'positive' => 'bg-emerald-50 text-emerald-600 dark:bg-emerald-900/20 dark:text-emerald-300',
            'danger' => 'bg-red-50 text-red-600 dark:bg-red-900/20 dark:text-red-300',
            'neutral' => 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300',
            'info' => 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-300',
        ];

        $expenseSegments = [];
        $expenseCursor = 0;
        foreach ($expenseDistribution as $expenseRow) {
            $end = min(100, $expenseCursor + (float) ($expenseRow['percentage'] ?? 0));
            $expenseSegments[] = ($expenseRow['color'] ?? '#1D4ED8') . ' ' . $expenseCursor . '% ' . $end . '%';
            $expenseCursor = $end;
        }
        $expenseChartStyle = $expenseSegments !== []
            ? 'background: conic-gradient(' . implode(', ', $expenseSegments) . ');'
            : 'background: conic-gradient(#e5e7eb 0 100%);';
    @endphp

    <div class="flex-1 overflow-y-auto p-4 lg:p-6 no-scrollbar">
        <div class="mx-auto max-w-[1600px] space-y-6">
            <div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
                <div>
                    <h2 class="text-xl font-bold tracking-tight lg:text-2xl">Panel de Control</h2>
                    <p class="mt-0.5 text-xs text-slate-500">Métricas críticas y gestión en tiempo real.</p>
                </div>
                <div class="flex gap-2">
                    <a href="{{ route('realEstate.reportes') }}"
                        class="flex flex-1 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-white px-3 py-2 text-xs font-medium transition-colors hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 sm:flex-none">
                        <span class="material-symbols-outlined text-sm">analytics</span>
                        <span class="hidden xs:inline">Reportes</span>
                    </a>
                    <a href="{{ route('realEstate.sale.create') }}"
                        class="flex flex-1 items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-2 text-xs font-medium text-white shadow-sm transition-all hover:bg-blue-700 sm:flex-none">
                        <span class="material-symbols-outlined text-sm">add</span> Acción Rápida
                    </a>
                </div>
            </div>

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                @forelse ($metrics as $metric)
                    <div class="dashboard-card flex flex-col justify-between p-4">
                        <div class="mb-2 flex items-start justify-between gap-3">
                            <span class="text-[10px] font-bold uppercase tracking-wider text-gray-500">
                                {{ $metric['label'] }}
                            </span>
                            <span
                                class="rounded px-1.5 py-0.5 text-[10px] font-bold {{ $metricBadgeClasses[$metric['badge_tone'] ?? 'neutral'] ?? $metricBadgeClasses['neutral'] }}">
                                {{ $metric['badge'] }}
                            </span>
                        </div>
                        <div class="flex items-baseline gap-2">
                            <span class="text-2xl font-bold">{{ $metric['value'] }}</span>
                            <span class="text-[10px] uppercase text-gray-400">{{ $metric['unit'] }}</span>
                        </div>
                        <div class="mt-4 h-1.5 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
                            <div class="h-full {{ $metric['progress_class'] ?? 'bg-primary' }}"
                                style="width: {{ max(0, min(100, (int) ($metric['progress'] ?? 0))) }}%"></div>
                        </div>
                    </div>
                @empty
                    <div class="dashboard-card col-span-full p-6 text-sm text-slate-500 dark:text-slate-400">
                        Aún no hay métricas disponibles para este panel.
                    </div>
                @endforelse
            </div>

            <div class="flex flex-col gap-6 lg:grid lg:grid-cols-3">
                <div class="order-2 space-y-6 lg:order-1 lg:col-span-2">
                    <div class="dashboard-card flex flex-col">
                        <div class="flex items-center justify-between gap-4 border-b border-gray-100 p-4 dark:border-gray-800">
                            <h3 class="flex items-center gap-2 truncate text-sm font-bold">
                                <span class="material-symbols-outlined text-base text-primary">group</span>
                                Prospectos
                            </h3>
                            <a href="{{ route('realEstate.leads') }}"
                                class="whitespace-nowrap text-[10px] font-semibold text-primary">
                                Ver todos
                            </a>
                        </div>
                        <div class="overflow-x-auto no-scrollbar">
                            <table class="min-w-[500px] w-full text-left text-xs">
                                <thead>
                                    <tr
                                        class="border-b border-gray-100 bg-gray-50 text-[9px] uppercase tracking-wider text-gray-500 dark:border-gray-800 dark:bg-gray-800/50">
                                        <th class="px-4 py-3 font-semibold">Prospecto</th>
                                        <th class="px-4 py-3 font-semibold">Desarrollo</th>
                                        <th class="px-4 py-3 font-semibold">Calificación</th>
                                        <th class="px-4 py-3 text-right font-semibold">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                    @forelse ($topProspects as $prospect)
                                        <tr>
                                            <td class="px-4 py-4">
                                                <div class="min-w-0">
                                                    <div class="truncate font-semibold">{{ $prospect['name'] }}</div>
                                                    <div class="text-[9px] text-gray-400">{{ $prospect['last_contact'] }}</div>
                                                </div>
                                            </td>
                                            <td class="px-4 py-4 text-gray-600 dark:text-gray-300">
                                                {{ $prospect['development'] }}
                                            </td>
                                            <td class="px-4 py-4">
                                                <span
                                                    class="rounded px-2 py-1 text-[10px] font-bold {{ $prospectBadgeClasses[$prospect['score_tone'] ?? 'cold'] ?? $prospectBadgeClasses['cold'] }}">
                                                    {{ $prospect['score_label'] }}
                                                </span>
                                            </td>
                                            <td class="px-4 py-4 text-right">
                                                <div class="flex justify-end gap-1">
                                                    <a href="{{ route('realEstate.lead.show', $prospect['id']) }}"
                                                        class="flex size-8 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700">
                                                        <span class="material-symbols-outlined text-lg">visibility</span>
                                                    </a>
                                                    <a href="{{ route('realEstate.calendar') }}"
                                                        class="flex size-8 items-center justify-center rounded-full transition-colors hover:bg-primary/10 hover:text-primary">
                                                        <span class="material-symbols-outlined text-lg">calendar_add_on</span>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td class="px-4 py-8 text-center text-sm text-slate-500 dark:text-slate-400"
                                                colspan="4">
                                                No hay prospectos con seguimiento para mostrar.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                        <div class="dashboard-card p-4">
                            <h4 class="mb-4 flex items-center justify-between text-xs font-bold">
                                Ventas por Desarrollo
                                <span class="text-[10px] font-normal italic text-gray-400">Mes actual</span>
                            </h4>
                            <div class="space-y-4">
                                @forelse ($salesByDevelopment as $development)
                                    <div class="space-y-1.5">
                                        <div class="flex justify-between text-[10px] font-medium uppercase">
                                            <span>{{ $development['name'] }}</span>
                                            <span class="font-bold">{{ $development['amount'] }}</span>
                                        </div>
                                        <div class="h-2 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
                                            <div class="h-full rounded-full {{ $development['bar_class'] }}"
                                                style="width: {{ max(0, min(100, (int) ($development['progress'] ?? 0))) }}%">
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <p class="text-sm text-slate-500 dark:text-slate-400">
                                        No hay ventas registradas este mes.
                                    </p>
                                @endforelse
                            </div>
                        </div>

                        <div class="dashboard-card p-4">
                            <h4 class="mb-4 flex items-center justify-between text-xs font-bold">
                                Distribución de Gastos
                                <span class="material-symbols-outlined text-sm text-gray-400">pie_chart</span>
                            </h4>
                            @if ($expenseDistribution !== [])
                                <div class="flex items-center gap-6 py-2">
                                    <div class="relative flex size-24 shrink-0 items-center justify-center rounded-full"
                                        style="{{ $expenseChartStyle }}">
                                        <div
                                            class="flex size-14 items-center justify-center rounded-full bg-white text-xs font-bold dark:bg-[#1e232e]">
                                            {{ number_format((float) ($expenseDistribution[0]['percentage'] ?? 0), 1) }}%
                                        </div>
                                    </div>
                                    <div class="flex-1 space-y-2">
                                        @foreach ($expenseDistribution as $expense)
                                            <div class="flex items-center justify-between gap-2 text-[10px] font-medium">
                                                <div class="flex items-center gap-2">
                                                    <span class="size-2 rounded-full"
                                                        style="background-color: {{ $expense['color'] }}"></span>
                                                    <span>{{ $expense['name'] }}</span>
                                                </div>
                                                <span>{{ $expense['amount'] }}</span>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @else
                                <p class="text-sm text-slate-500 dark:text-slate-400">
                                    No hay gastos registrados en el mes actual.
                                </p>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="order-1 space-y-6 lg:order-2">
                    <div class="dashboard-card overflow-hidden">
                        <div
                            class="flex items-center justify-between border-b border-gray-100 bg-gray-50/50 p-4 dark:border-gray-800 dark:bg-gray-800/30">
                            <h3 class="flex items-center gap-2 text-sm font-bold">
                                <span class="material-symbols-outlined text-base text-primary">today</span>
                                Agenda de Hoy
                            </h3>
                            <a href="{{ route('realEstate.calendar') }}"
                                class="flex size-7 items-center justify-center rounded-md bg-primary text-white shadow-sm hover:bg-blue-700">
                                <span class="material-symbols-outlined text-base">open_in_new</span>
                            </a>
                        </div>
                        <div class="divide-y divide-gray-100 dark:divide-gray-800">
                            @forelse ($todayAgenda as $appointment)
                                <div
                                    class="group cursor-pointer p-4 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50">
                                    <div class="flex items-start gap-3">
                                        <div
                                            class="min-w-[48px] rounded-md px-2 py-1.5 text-center {{ $agendaToneClasses[$appointment['status_tone'] ?? 'neutral'] ?? $agendaToneClasses['neutral'] }}">
                                            <div class="text-[11px] font-bold">{{ $appointment['time'] }}</div>
                                            <div class="text-[8px] font-bold uppercase opacity-80">
                                                {{ $appointment['meridiem'] }}</div>
                                        </div>
                                        <div class="min-w-0 flex-1">
                                            <p class="truncate text-xs font-semibold">{{ $appointment['title'] }}</p>
                                            <p class="text-[10px] text-gray-500">{{ $appointment['subtitle'] }}</p>
                                        </div>
                                        <span
                                            class="material-symbols-outlined mt-1 text-lg text-gray-300 group-hover:text-primary">chevron_right</span>
                                    </div>
                                </div>
                            @empty
                                <div class="p-6 text-sm text-slate-500 dark:text-slate-400">
                                    No hay citas programadas para hoy.
                                </div>
                            @endforelse
                        </div>
                        <div
                            class="border-t border-gray-100 bg-gray-50/50 p-3 text-center dark:border-gray-800 dark:bg-gray-800/30">
                            <a href="{{ route('realEstate.calendar') }}"
                                class="text-[10px] font-bold uppercase tracking-wide text-primary hover:underline">
                                Ver agenda completa
                            </a>
                        </div>
                    </div>

                    <div
                        class="relative overflow-hidden rounded-xl border p-4 {{ ($inventoryAlert['tone'] ?? null) === 'warning'
                            ? 'border-orange-200 bg-orange-50 dark:border-orange-900/30 dark:bg-orange-900/10'
                            : 'border-emerald-200 bg-emerald-50 dark:border-emerald-900/30 dark:bg-emerald-900/10' }}">
                        <div class="absolute right-0 top-0 p-2 opacity-10">
                            <span
                                class="material-symbols-outlined text-6xl {{ ($inventoryAlert['tone'] ?? null) === 'warning' ? 'text-orange-600' : 'text-emerald-600' }}">
                                inventory_2
                            </span>
                        </div>
                        <div class="relative z-10">
                            <div class="mb-2 flex items-center gap-2">
                                <span
                                    class="material-symbols-outlined text-lg {{ ($inventoryAlert['tone'] ?? null) === 'warning' ? 'text-orange-600' : 'text-emerald-600' }}">
                                    {{ ($inventoryAlert['tone'] ?? null) === 'warning' ? 'warning' : 'inventory' }}
                                </span>
                                <span
                                    class="text-[10px] font-bold uppercase tracking-widest {{ ($inventoryAlert['tone'] ?? null) === 'warning'
                                        ? 'text-orange-800 dark:text-orange-400'
                                        : 'text-emerald-800 dark:text-emerald-400' }}">
                                    {{ $inventoryAlert['title'] ?? 'Inventario' }}
                                </span>
                            </div>
                            <p
                                class="text-xs leading-snug {{ ($inventoryAlert['tone'] ?? null) === 'warning'
                                    ? 'text-orange-700 dark:text-orange-300'
                                    : 'text-emerald-700 dark:text-emerald-300' }}">
                                {{ $inventoryAlert['message'] ?? 'No hay alertas de inventario disponibles.' }}
                            </p>
                            @if (($inventoryAlert['development_id'] ?? null) !== null)
                                <a href="{{ route('realEstate.development.show', $inventoryAlert['development_id']) }}"
                                    class="{{ ($inventoryAlert['tone'] ?? null) === 'warning'
                                        ? 'bg-orange-600 hover:bg-orange-700'
                                        : 'bg-emerald-600 hover:bg-emerald-700' }} mt-4 block w-full rounded-lg py-2 text-center text-[10px] font-bold uppercase tracking-wider text-white shadow-sm transition-colors">
                                    Gestionar Inventario
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection