@php
    $contracted = $dashboard['contracted'];
    $badgeClasses = [
        'emerald' => 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300',
        'rose' => 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300',
        'amber' => 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
        'blue' => 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
        'slate' => 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300',
    ];
@endphp

<div class="mx-auto max-w-[1600px] space-y-8 p-8">
    <div class="grid grid-cols-1 gap-8 lg:grid-cols-4">
        <div class="space-y-8 lg:col-span-3">
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-5">
                <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                    <p class="text-[11px] font-bold uppercase tracking-wider text-slate-400">Valor Contratado</p>
                    <p class="mt-2 text-xl font-black text-slate-900 dark:text-white">{{ $contracted['contracted_value_formatted'] }}</p>
                </div>
                <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                    <p class="text-[11px] font-bold uppercase tracking-wider text-slate-400">Total por cobrar</p>
                    <p class="mt-2 text-xl font-black text-slate-900 dark:text-white">{{ $contracted['total_receivable_formatted'] }}</p>
                </div>
                <div class="rounded-2xl border border-rose-200 bg-white p-5 shadow-sm dark:border-rose-900/40 dark:bg-slate-900">
                    <p class="text-[11px] font-bold uppercase tracking-wider text-rose-500">Total para regularizar</p>
                    <p class="mt-2 text-xl font-black text-rose-600 dark:text-rose-300">{{ $contracted['regularization_amount_formatted'] }}</p>
                </div>
                <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                    <p class="text-[11px] font-bold uppercase tracking-wider text-slate-400">Ingresos del mes</p>
                    <p class="mt-2 text-xl font-black text-slate-900 dark:text-white">{{ $contracted['current_month_revenue_formatted'] }}</p>
                </div>
                <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                    <p class="text-[11px] font-bold uppercase tracking-wider text-slate-400">% Clientes al corriente</p>
                    <p class="mt-2 text-xl font-black text-emerald-600 dark:text-emerald-300">{{ $contracted['current_clients_percent_label'] }}</p>
                </div>
            </div>

            <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
                <div class="flex flex-col gap-3 border-b border-slate-200 p-6 dark:border-slate-800 lg:flex-row lg:items-center lg:justify-between">
                    <div>
                        <h4 class="flex items-center gap-2 text-base font-bold text-slate-900 dark:text-white">
                            <span class="material-symbols-outlined text-primary">assignment</span>
                            Ventas Recientes
                        </h4>
                        <p class="mt-1 text-xs text-slate-500">Contrato reciente y saldo vivo por venta.</p>
                    </div>
                    <span class="rounded-full bg-slate-100 px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-slate-500 dark:bg-slate-800 dark:text-slate-300">
                        Valor del mes: {{ $contracted['current_month_contracted_value_formatted'] }}
                    </span>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full border-collapse text-left text-sm">
                        <thead>
                            <tr class="bg-slate-50 text-[10px] font-bold uppercase tracking-wider text-slate-500 dark:bg-slate-800/50">
                                <th class="px-6 py-4">Cliente</th>
                                <th class="px-6 py-4">Lote</th>
                                <th class="px-6 py-4">Plan</th>
                                <th class="px-6 py-4">Precio Pactado</th>
                                <th class="px-6 py-4">Saldo</th>
                                <th class="px-6 py-4">Fecha</th>
                                <th class="px-6 py-4 text-right">Estatus</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                            @forelse ($contracted['recent_sales'] as $row)
                                <tr class="transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/40">
                                    <td class="px-6 py-4">
                                        <div class="font-semibold text-slate-900 dark:text-white">{{ $row['buyer_name'] }}</div>
                                        <div class="text-xs text-slate-500">{{ $row['folio'] }}</div>
                                    </td>
                                    <td class="px-6 py-4 font-medium text-slate-700 dark:text-slate-200">{{ $row['lot_label'] }}</td>
                                    <td class="px-6 py-4 text-slate-600 dark:text-slate-300">{{ $row['plan_label'] }}</td>
                                    <td class="px-6 py-4 font-semibold text-slate-900 dark:text-white">{{ $row['total_price_formatted'] }}</td>
                                    <td class="px-6 py-4 {{ $row['status_tone'] === 'rose' ? 'font-semibold text-rose-600 dark:text-rose-300' : 'text-slate-600 dark:text-slate-300' }}">{{ $row['remaining_formatted'] }}</td>
                                    <td class="px-6 py-4 text-slate-500">{{ $row['sale_date_label'] }}</td>
                                    <td class="px-6 py-4 text-right">
                                        <a href="{{ route('realEstate.sale.details', ['id' => $row['sale_id']]) }}"
                                            class="inline-flex items-center gap-2 rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider {{ $badgeClasses[$row['status_tone']] ?? $badgeClasses['slate'] }}">
                                            {{ $row['status_label'] }}
                                            <span class="material-symbols-outlined text-sm">arrow_forward</span>
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="px-6 py-10 text-center text-sm text-slate-500">No hay ventas registradas para este fraccionamiento.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="border-t border-slate-200 px-6 py-4 text-xs text-slate-500 dark:border-slate-800">
                    Mostrando {{ $contracted['recent_sales_total'] }} ventas recientes.
                </div>
            </div>
        </div>

        <div class="space-y-6">
            <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                <div class="mb-6 flex items-center justify-between">
                    <h4 class="text-sm font-bold text-slate-900 dark:text-white">Salud Comercial</h4>
                    <span class="material-symbols-outlined text-emerald-500">check_circle</span>
                </div>
                <div class="space-y-5">
                    <div>
                        <div class="mb-2 flex justify-between text-xs">
                            <span class="text-slate-500">Días última venta</span>
                            <span class="font-bold text-emerald-600">{{ $contracted['days_since_last_sale_label'] }}</span>
                        </div>
                        <div class="h-1.5 overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
                            <div class="h-full bg-emerald-500" style="width: 55%;"></div>
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="rounded-xl bg-slate-50 p-3 dark:bg-slate-800/60">
                            <p class="text-[10px] font-bold uppercase tracking-wider text-slate-500">Ventas 90d</p>
                            <p class="mt-1 text-lg font-black text-slate-900 dark:text-white">{{ $contracted['sales_last_90_days'] }}</p>
                        </div>
                        <div class="rounded-xl bg-slate-50 p-3 dark:bg-slate-800/60">
                            <p class="text-[10px] font-bold uppercase tracking-wider text-slate-500">Velocidad</p>
                            <p class="mt-1 text-lg font-black text-slate-900 dark:text-white">{{ $contracted['sales_velocity_label'] }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="rounded-2xl border border-primary/20 bg-primary/5 p-6 shadow-sm dark:bg-primary/10">
                <div class="mb-4 flex items-center gap-2 text-primary">
                    <span class="material-symbols-outlined text-lg">lightbulb</span>
                    <h4 class="text-sm font-bold">Lectura rápida</h4>
                </div>
                <p class="text-sm leading-relaxed text-slate-700 dark:text-slate-200">{{ $contracted['smart_suggestion'] }}</p>
            </div>

            <div class="rounded-2xl border border-amber-200 bg-amber-50 p-4 text-amber-800 shadow-sm dark:border-amber-900/30 dark:bg-amber-900/10 dark:text-amber-300">
                <div class="flex items-start gap-3">
                    <span class="material-symbols-outlined text-lg">notification_important</span>
                    <div>
                        <p class="text-xs font-bold uppercase tracking-wider">Cobranza pendiente</p>
                        <p class="mt-1 text-sm">{{ $contracted['collections_alert'] }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>