@extends('layouts.dashboard')

@section('title', 'Tableau de bord')

@push('styles')
<style>
    .page-header { margin-bottom: 2rem; }
    .page-title { font-size: 1.75rem; font-weight: 600; color: #1f2937; margin-bottom: 0.5rem; }
    .page-subtitle { color: #6b7280; font-size: 1rem; }
    .main-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 1.5rem;
        transition: all 0.2s ease;
        margin-bottom: 1.5rem;
    }
    .section-title { font-size: 1.25rem; font-weight: 600; color: #1f2937; margin-bottom: 1.5rem; }
    .stats-row {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
        align-items: stretch;
    }
    .stats-row > [class^="col-"],
    .stats-row > [class*=" col-"] {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        max-width: none;
        min-width: 0;
    }
    .stats-card {
        text-decoration: none;
        color: inherit;
        display: block;
        background: #f8fafc;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 1.25rem;
        transition: all 0.2s ease;
        height: 100%;
        width: 100%;
    }
    @media (max-width: 1200px) {
        .stats-row {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (max-width: 768px) {
        .stats-row {
            grid-template-columns: 1fr;
        }
    }
    .stats-card:hover {
        background: linear-gradient(135deg, #e8f5ea 0%, #d4f0dd 100%);
        border-color: #6fb87d;
        box-shadow: 0 4px 12px rgba(111, 184, 125, 0.1);
    }
    .stats-card h3 { font-size: 0.875rem; font-weight: 600; color: #1f2937; margin-bottom: 0.5rem; }
    .stats-value { font-size: 1.75rem; font-weight: 700; color: #6fb87d; margin-bottom: 0.25rem; }
    .stats-label { color: #6b7280; font-size: 0.8125rem; }
    .stats-duo {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 1.5rem;
    }
    .stats-duo-item {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    .chart-container {
        position: relative;
        height: 400px;
        margin-bottom: 0;
        background: white;
        padding: 1.5rem;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
    }
</style>
@endpush

@section('content')
<div class="container-fluid px-4 py-4" style="padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem;">
    <!-- En-tête (même affichage que Comptabilité) -->
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="mb-2" style="color: #6fb87d; font-size: 2rem; font-weight: 600;">Tableau de bord</h1>
            <p class="text-muted" style="font-size: 1.1rem;">Vue d'ensemble des indicateurs</p>
        </div>
    </div>

    <!-- Indicateurs (même style que Comptabilité) -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="main-card">
                <h2 class="section-title mb-4">Indicateurs</h2>
                <div class="row g-3 stats-row">
                    <div class="col-md-3">
                        <a href="{{ url('/portefeuille') }}" class="stats-card">
                            <h3>Portefeuille</h3>
                            <div class="stats-duo">
                                <div class="stats-duo-item">
                                    <div class="stats-value">{{ isset($nombreClients) ? $nombreClients : 0 }}</div>
                                    <div class="stats-label">Clients</div>
                                </div>
                                <div class="stats-duo-item">
                                    <div class="stats-value">{{ isset($nombreContratsPortefeuille) ? $nombreContratsPortefeuille : 0 }}</div>
                                    <div class="stats-label">Contrats</div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ url('/portefeuille?filterStatus=incomplet') }}" class="stats-card">
                            <h3>Dossiers incomplets</h3>
                            <div class="stats-value">{{ isset($nombreDossiersIncomplets) ? $nombreDossiersIncomplets : 0 }}</div>
                            <div class="stats-label">Dossiers à compléter</div>
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ url('/reclamations') }}" class="stats-card">
                            <h3>Réclamations</h3>
                            <div class="stats-value">{{ isset($nombreReclamations) ? $nombreReclamations : 0 }}</div>
                            <div class="stats-label">Réclamations</div>
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ url('/prospects') }}" class="stats-card">
                            <h3>Devis 30 jours</h3>
                            <div class="stats-value">{{ isset($nombreDevis30Jours) ? $nombreDevis30Jours : 0 }}</div>
                            <div class="stats-label">Devis reçus</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Graphique (identique à Comptabilité : titre + sélecteur d'année + chart-container) -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="main-card">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h2 class="section-title mb-0">Statistiques 12 derniers mois</h2>
                    <div class="d-flex align-items-center gap-3">
                        <button type="button" class="btn btn-sm" id="prevYearBtn" style="background: #f8fafc; border: 1px solid #e5e7eb; color: #1f2937; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"></polyline></svg>
                        </button>
                        <span id="currentYearDisplay" style="font-weight: 600; color: #1f2937; min-width: 80px; text-align: center;">2025</span>
                        <button type="button" class="btn btn-sm" id="nextYearBtn" style="background: #f8fafc; border: 1px solid #e5e7eb; color: #1f2937; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
                        </button>
                    </div>
                </div>
                <div class="chart-container">
                    <canvas id="portefeuilleChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Graphique contrats par assureur -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="main-card">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h2 class="section-title mb-0">Nombre de contrats par assureur</h2>
                </div>
                <div class="chart-container">
                    <canvas id="contratsParAssureurChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script nonce="{{ $cspNonce }}">
let dashboardChart = null;
let contratsAssureurChart = null;
let currentYear = new Date().getFullYear();
const contratsAssureurLabels = @json($contratsParAssureurLabels ?? []);
const contratsAssureurData = @json($contratsParAssureurData ?? []);

function updateYearDisplay() {
    var el = document.getElementById('currentYearDisplay');
    if (el) el.textContent = currentYear;
    var nextBtn = document.getElementById('nextYearBtn');
    if (nextBtn) {
        var maxYear = new Date().getFullYear();
        if (currentYear >= maxYear) {
            nextBtn.style.opacity = '0.5';
            nextBtn.style.cursor = 'not-allowed';
        } else {
            nextBtn.style.opacity = '1';
            nextBtn.style.cursor = 'pointer';
        }
    }
}

function loadChartData() {
    var token = document.querySelector('meta[name="csrf-token"]');
    var headers = { 'Accept': 'application/json' };
    if (token) headers['X-CSRF-TOKEN'] = token.getAttribute('content');
    fetch('/api/admin/dashboard-chart?year=' + currentYear, { method: 'GET', headers: headers })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.labels) renderChart(data);
        })
        .catch(function(err) { console.error(err); });
}

function renderChart(data) {
    var ctx = document.getElementById('portefeuilleChart');
    if (!ctx) return;
    ctx = ctx.getContext('2d');
    if (dashboardChart) dashboardChart.destroy();
    dashboardChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: data.labels,
            datasets: [
                {
                    label: 'Nombre de clients',
                    data: data.portefeuilleEvolution || [],
                    borderColor: '#6FB87D',
                    backgroundColor: 'rgba(111, 184, 125, 0.1)',
                    borderWidth: 3,
                    fill: true,
                    tension: 0.4,
                    pointRadius: 5,
                    pointHoverRadius: 7,
                    pointBackgroundColor: '#6FB87D',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2
                },
                {
                    label: 'Demandes de devis',
                    data: data.devisEvolution || [],
                    borderColor: '#f97316',
                    backgroundColor: 'rgba(249, 115, 22, 0.1)',
                    borderWidth: 3,
                    fill: true,
                    tension: 0.4,
                    pointRadius: 5,
                    pointHoverRadius: 7,
                    pointBackgroundColor: '#f97316',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2
                },
                {
                    label: 'Clients (année N-1)',
                    data: data.portefeuilleEvolutionN1 || [],
                    borderColor: '#6FB87D',
                    borderWidth: 3,
                    fill: false,
                    tension: 0.4,
                    pointRadius: 5,
                    pointHoverRadius: 7,
                    pointBackgroundColor: '#6FB87D',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    borderDash: [5, 5]
                },
                {
                    label: 'Devis (année N-1)',
                    data: data.devisEvolutionN1 || [],
                    borderColor: '#f97316',
                    borderWidth: 3,
                    fill: false,
                    tension: 0.4,
                    pointRadius: 5,
                    pointHoverRadius: 7,
                    pointBackgroundColor: '#f97316',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    borderDash: [5, 5]
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: true,
                    position: 'top',
                    labels: {
                        usePointStyle: true,
                        padding: 20,
                        font: { size: 14, weight: '500' }
                    }
                },
                tooltip: {
                    mode: 'point',
                    intersect: true,
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    titleFont: { size: 14, weight: '600' },
                    bodyFont: { size: 13 }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { font: { size: 12 } },
                    grid: { color: 'rgba(0, 0, 0, 0.05)' }
                },
                x: {
                    ticks: { font: { size: 12 } },
                    grid: { display: false }
                }
            },
            interaction: { mode: 'nearest', axis: 'x', intersect: false }
        }
    });
}

function renderContratsParAssureurChart() {
    var canvas = document.getElementById('contratsParAssureurChart');
    if (!canvas) return;

    var ctx = canvas.getContext('2d');
    if (contratsAssureurChart) contratsAssureurChart.destroy();

    contratsAssureurChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: contratsAssureurLabels,
            datasets: [{
                label: 'Nombre de contrats actifs',
                data: contratsAssureurData,
                backgroundColor: [
                    'rgba(111, 184, 125, 0.85)',
                    'rgba(34, 197, 94, 0.85)',
                    'rgba(16, 185, 129, 0.85)',
                    'rgba(5, 150, 105, 0.85)',
                    'rgba(31, 41, 55, 0.75)'
                ],
                borderColor: [
                    '#6FB87D',
                    '#22C55E',
                    '#10B981',
                    '#059669',
                    '#1F2937'
                ],
                borderWidth: 2,
                borderRadius: 8,
                borderSkipped: false
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    titleFont: { size: 14, weight: '600' },
                    bodyFont: { size: 13 }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { precision: 0, font: { size: 12 } },
                    grid: { color: 'rgba(0, 0, 0, 0.05)' }
                },
                x: {
                    ticks: { font: { size: 12 } },
                    grid: { display: false }
                }
            }
        }
    });
}

document.addEventListener('DOMContentLoaded', function() {
    updateYearDisplay();
    var prevBtn = document.getElementById('prevYearBtn');
    var nextBtn = document.getElementById('nextYearBtn');
    if (prevBtn) prevBtn.addEventListener('click', function() {
        currentYear--;
        updateYearDisplay();
        loadChartData();
    });
    if (nextBtn) nextBtn.addEventListener('click', function() {
        if (currentYear < new Date().getFullYear()) {
            currentYear++;
            updateYearDisplay();
            loadChartData();
        }
    });
    renderContratsParAssureurChart();
    loadChartData();
});
</script>
@endpush