@extends('layouts.admin')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard administration')
@section('page-subtitle', 'Vue d’ensemble de la plateforme AgentMatch')

@section('content')
    <div class="grid gap-6 sm:grid-cols-2 xl:grid-cols-3">
        <a href="{{ route('admin.agents.index') }}"
           class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-200 hover:shadow-md">
            <div class="mb-4 inline-flex rounded-xl bg-violet-50 p-3 text-violet-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
            </div>
            <p class="text-3xl font-bold text-slate-900">{{ number_format($stats['agents_count']) }}</p>
            <p class="mt-1 text-sm font-medium text-slate-700">Agents inscrits (actifs)</p>
            <p class="mt-3 text-sm text-indigo-600 group-hover:underline">Gérer les agents →</p>
        </a>

        <a href="{{ route('admin.properties.index') }}"
           class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-200 hover:shadow-md">
            <div class="mb-4 inline-flex rounded-xl bg-emerald-50 p-3 text-emerald-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-6h6v6"/>
                </svg>
            </div>
            <p class="text-3xl font-bold text-slate-900">{{ number_format($stats['properties_count']) }}</p>
            <p class="mt-1 text-sm font-medium text-slate-700">Biens publiés (propositions)</p>
            <p class="mt-3 text-sm text-indigo-600 group-hover:underline">Voir les annonces →</p>
        </a>

        <a href="{{ route('admin.properties.index') }}#demandes"
           class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-200 hover:shadow-md">
            <div class="mb-4 inline-flex rounded-xl bg-sky-50 p-3 text-sky-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6M7 21h10a2 2 0 002-2V7l-5-4H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                </svg>
            </div>
            <p class="text-3xl font-bold text-slate-900">{{ number_format($stats['requests_count']) }}</p>
            <p class="mt-1 text-sm font-medium text-slate-700">Demandes clients</p>
            <p class="mt-3 text-sm text-indigo-600 group-hover:underline">Voir les demandes →</p>
        </a>

        <a href="{{ route('admin.countries.index') }}"
           class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-200 hover:shadow-md">
            <div class="mb-4 inline-flex rounded-xl bg-blue-50 p-3 text-blue-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9 9 0 100-18 9 9 0 000 18z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.6 9h16.8M3.6 15h16.8M12 3c-2.2 2.4-3.3 5.1-3.3 9s1.1 6.6 3.3 9c2.2-2.4 3.3-5.1 3.3-9s-1.1-6.6-3.3-9z"/>
                </svg>
            </div>
            <p class="text-3xl font-bold text-slate-900">{{ number_format($stats['countries_count']) }}</p>
            <p class="mt-1 text-sm font-medium text-slate-700">Pays · {{ number_format($stats['cities_count']) }} villes · {{ number_format($stats['zones_count']) }} zones</p>
            <p class="mt-3 text-sm text-indigo-600 group-hover:underline">Gérer la géographie →</p>
        </a>
    </div>

    <section class="mt-8 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
        <h3 class="text-lg font-semibold text-slate-900">Raccourcis d’administration</h3>
        <div class="mt-4 divide-y divide-slate-100">
            <a href="{{ route('admin.agents.index') }}" class="flex items-center justify-between py-4 transition hover:text-indigo-700">
                <span class="font-medium">Gestion des agents immobiliers</span>
                <span class="text-sm text-slate-500">CRUD agents →</span>
            </a>
            <a href="{{ route('admin.properties.index') }}" class="flex items-center justify-between py-4 transition hover:text-indigo-700">
                <span class="font-medium">Liste des biens &amp; demandes</span>
                <span class="text-sm text-slate-500">Annonces →</span>
            </a>
            <a href="{{ route('admin.countries.index') }}" class="flex items-center justify-between py-4 transition hover:text-indigo-700">
                <span class="font-medium">Pays, villes &amp; quartiers</span>
                <span class="text-sm text-slate-500">Géographie →</span>
            </a>
        </div>
    </section>
@endsection