@extends('layouts.app')
@section('title', 'Tableau de bord')
@section('heading', 'Tableau de bord')
@section('subheading', 'Vue d\'ensemble de votre activité · '.now()->translatedFormat('l d F Y'))
@section('actions')
    <x-btn :href="route('quotes.create')">➕ Nouveau devis</x-btn>
    <x-btn variant="secondary" :href="route('clients.create')">🏢 Nouveau client</x-btn>
@endsection

@section('content')
    {{-- Indicateurs principaux --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 mb-6">
        <x-stat label="Chiffre d'affaires (an.)" :value="eur($kpis['revenue'])" icon="💶" :href="route('bi.index')" />
        <x-stat label="Marge estimée" :value="eur($kpis['margin'])" icon="📈" />
        <x-stat label="Factures impayées" :value="eur($kpis['invoices_unpaid'])" icon="⏳" :href="route('invoices.index', ['status'=>'retard'])" />
        <x-stat label="Devis en attente" :value="$kpis['quotes_pending']" icon="📄" :href="route('quotes.index', ['status'=>'envoye'])" />
        <x-stat label="Devis signés" :value="$kpis['quotes_signed']" icon="✍️" :href="route('quotes.index', ['status'=>'accepte'])" />
        <x-stat label="Contrats actifs" :value="$kpis['contracts_active']" icon="📋" :href="route('contracts.index')" />
        <x-stat label="Contrats à renouveler" :value="$kpis['contracts_renew']" icon="🔁" :href="route('contracts.index')" />
        <x-stat label="Prospects actifs" :value="$kpis['prospects']" icon="🎯" :href="route('prospects.index', ['status' => 'actif'])" />
        <x-stat label="Nouveaux clients (mois)" :value="$kpis['new_clients']" icon="🌟" :href="route('clients.index')" />
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
        {{-- CA mensuel --}}
        <x-card title="Chiffre d'affaires — 12 mois" class="lg:col-span-2">
            <canvas id="chartRevenue" height="90"></canvas>
        </x-card>
        {{-- Objectif commercial --}}
        <x-card title="Objectif commercial annuel">
            @php $pct = $goal > 0 ? min(100, round($kpis['revenue']/$goal*100)) : 0; @endphp
            <div class="flex flex-col items-center justify-center py-4">
                <div class="relative w-40 h-40">
                    <svg viewBox="0 0 36 36" class="w-40 h-40 -rotate-90">
                        <circle cx="18" cy="18" r="15.9" fill="none" stroke="#e2e8f0" stroke-width="3"/>
                        <circle cx="18" cy="18" r="15.9" fill="none" stroke="#4f46e5" stroke-width="3"
                                stroke-dasharray="{{ $pct }} 100" stroke-linecap="round"/>
                    </svg>
                    <div class="absolute inset-0 flex flex-col items-center justify-center">
                        <span class="text-2xl font-bold">{{ $pct }}%</span>
                        <span class="text-xs text-slate-400">de l'objectif</span>
                    </div>
                </div>
                <p class="mt-4 text-sm text-slate-500">{{ eur($kpis['revenue']) }} / {{ eur($goal) }}</p>
            </div>
        </x-card>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <x-card title="Signature des devis (funnel)">
            <div class="space-y-3">
                @php $max = max(1, max($funnel)); @endphp
                @foreach(['brouillon'=>'Brouillons','envoye'=>'Envoyés','accepte'=>'Acceptés','refuse'=>'Refusés'] as $k=>$lbl)
                    <div>
                        <div class="flex justify-between text-sm mb-1"><span>{{ $lbl }}</span><span class="font-semibold">{{ $funnel[$k] }}</span></div>
                        <div class="h-2 rounded-full bg-slate-100"><div class="h-2 rounded-full {{ $k==='accepte'?'bg-emerald-500':($k==='refuse'?'bg-rose-400':'bg-brand-500') }}" style="width: {{ round($funnel[$k]/$max*100) }}%"></div></div>
                    </div>
                @endforeach
            </div>
        </x-card>
        <x-card title="Répartition des prestations">
            <canvas id="chartBreakdown" height="180"></canvas>
        </x-card>
    </div>

    {{-- Alertes --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <x-card title="💸 Factures en retard">
            @forelse($overdueInvoices as $inv)
                <a href="{{ route('invoices.show', $inv) }}" class="flex justify-between py-2 border-b border-slate-50 last:border-0 hover:bg-slate-50 -mx-2 px-2 rounded">
                    <span class="text-sm">{{ $inv->number }} · {{ $inv->client?->company }}</span>
                    <span class="text-xs font-semibold text-rose-500">{{ eur($inv->balance()) }}</span>
                </a>
            @empty <x-empty message="Aucune facture en retard" icon="✅" /> @endforelse
        </x-card>
        <x-card title="🔁 Contrats à renouveler (90j)">
            @forelse($upcomingRenewals as $c)
                <a href="{{ route('contracts.show', $c) }}" class="flex justify-between py-2 border-b border-slate-50 last:border-0 hover:bg-slate-50 -mx-2 px-2 rounded">
                    <span class="text-sm">{{ $c->number }} · {{ $c->client?->company }}</span>
                    <span class="text-xs text-amber-600">{{ $c->end_date?->format('d/m/Y') }}</span>
                </a>
            @empty <x-empty message="Aucun renouvellement proche" icon="👍" /> @endforelse
        </x-card>
    </div>

    @push('scripts')
    <script>
        const months = @json($months->pluck('label'));
        const values = @json($months->pluck('value'));
        new Chart(document.getElementById('chartRevenue'), {
            type: 'line',
            data: { labels: months, datasets: [{ label: 'CA (€)', data: values, borderColor: '#4f46e5', backgroundColor: 'rgba(79,70,229,.1)', fill: true, tension: .35 }] },
            options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true } } }
        });
        const bd = @json($breakdown);
        new Chart(document.getElementById('chartBreakdown'), {
            type: 'doughnut',
            data: { labels: bd.map(x=>x.cat), datasets: [{ data: bd.map(x=>x.total), backgroundColor: ['#4f46e5','#06b6d4','#10b981','#f59e0b','#ef4444','#8b5cf6','#ec4899','#64748b'] }] },
            options: { plugins: { legend: { position: 'bottom' } } }
        });
    </script>
    @endpush
@endsection