@extends('layouts.app')

@section('breadcrumb', 'Dashboard ejecutivo')

@section('content')
    <x-page-header
        title="Dashboard ejecutivo"
        description="Visión global de documentación, gastos y conciliación bancaria."
    />

    <div class="stat-grid">
        <div class="stat-card stat-card--accent">
            <div class="stat-card__label">Documentos totales</div>
            <div class="stat-card__value">{{ number_format($kpis['documentos_totales']) }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-card__label">Pendientes revisión</div>
            <div class="stat-card__value">{{ number_format($kpis['pendientes_revision']) }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-card__label">Facturas pagadas</div>
            <div class="stat-card__value">{{ number_format($kpis['facturas_pagadas']) }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-card__label">Gasto mes actual</div>
            <div class="stat-card__value">{{ number_format($kpis['gasto_mes_actual'], 0, ',', '.') }} €</div>
        </div>
        <div class="stat-card">
            <div class="stat-card__label">Importe acumulado</div>
            <div class="stat-card__value">{{ number_format($kpis['importe_total'], 0, ',', '.') }} €</div>
        </div>
        <div class="stat-card">
            <div class="stat-card__label">Movimientos banco</div>
            <div class="stat-card__value">{{ number_format($kpis['movimientos_banco']) }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-card__label">Conciliaciones OK</div>
            <div class="stat-card__value">{{ number_format($kpis['conciliaciones_ok']) }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-card__label">Conciliaciones pendientes</div>
            <div class="stat-card__value">{{ number_format($kpis['conciliaciones_pendientes']) }}</div>
        </div>
    </div>

    <section class="row g-4 mb-4">
        <div class="col-12 col-xl-8">
            <div class="chart-grid">
                <div class="surface chart-card">
                    <div class="surface__header">
                        <h2 class="surface__title">Gasto mensual</h2>
                    </div>
                    <div class="surface__body">
                        <div class="chart-wrap">
                            <canvas id="chart-spend" aria-label="Gasto mensual"></canvas>
                        </div>
                    </div>
                </div>
                <div class="surface chart-card">
                    <div class="surface__header">
                        <h2 class="surface__title">Documentos subidos</h2>
                    </div>
                    <div class="surface__body">
                        <div class="chart-wrap">
                            <canvas id="chart-uploads" aria-label="Documentos subidos por mes"></canvas>
                        </div>
                    </div>
                </div>
                <div class="surface chart-card">
                    <div class="surface__header">
                        <h2 class="surface__title">Gasto por categoría</h2>
                    </div>
                    <div class="surface__body">
                        <div class="chart-wrap chart-wrap--donut">
                            <canvas id="chart-category" aria-label="Gasto por categoría"></canvas>
                        </div>
                    </div>
                </div>
                <div class="surface chart-card">
                    <div class="surface__header">
                        <h2 class="surface__title">Estado del pipeline</h2>
                    </div>
                    <div class="surface__body">
                        <div class="chart-wrap">
                            <canvas id="chart-status" aria-label="Estado de documentos"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-4">
            <div class="surface mb-4">
                <div class="surface__header">
                    <h2 class="surface__title">Conciliación</h2>
                </div>
                <div class="surface__body">
                    <div class="chart-wrap chart-wrap--donut">
                        <canvas id="chart-reconciliation" aria-label="Estado de conciliaciones"></canvas>
                    </div>
                </div>
            </div>

            <div class="surface">
                <div class="surface__header">
                    <h2 class="surface__title">Actividad reciente</h2>
                </div>
                <div class="surface__body">
                    @forelse($recent_activity as $item)
                        <div class="list-item d-flex justify-content-between align-items-start gap-2">
                            <div>
                                <div class="list-item__title">Documento #{{ $item['id'] }}</div>
                                <div class="list-item__meta">{{ $item['created_at'] }}</div>
                            </div>
                            <div class="text-end">
                                <x-status-badge :status="$item['status']" />
                                @if($item['total'])
                                    <div class="amount small mt-1">{{ number_format($item['total'], 2, ',', '.') }} €</div>
                                @endif
                            </div>
                        </div>
                    @empty
                        <p class="text-secondary mb-0">Sin actividad reciente.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
<script>
    const chartData = @json($charts);
    const charts = {};

    function cssVar(name) {
        return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
    }

    function chartColors() {
        return {
            accent: cssVar('--accent') || '#10b981',
            accentMuted: cssVar('--accent-muted') || 'rgba(16, 185, 129, 0.15)',
            text: cssVar('--text-secondary') || '#a1a1aa',
            grid: cssVar('--border-subtle') || 'rgba(255,255,255,0.07)',
            palette: ['#10b981', '#38bdf8', '#fbbf24', '#f87171', '#a78bfa', '#fb923c', '#2dd4bf', '#e879f9'],
        };
    }

    function baseOptions(type = 'line') {
        const c = chartColors();
        return {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: type === 'doughnut',
                    labels: { color: c.text, boxWidth: 12, padding: 14, font: { size: 11 } },
                },
                tooltip: {
                    backgroundColor: cssVar('--bg-elevated'),
                    titleColor: cssVar('--text-primary'),
                    bodyColor: c.text,
                    borderColor: cssVar('--border-subtle'),
                    borderWidth: 1,
                    padding: 10,
                },
            },
            scales: type === 'doughnut' ? {} : {
                x: {
                    ticks: { color: c.text, font: { size: 11 } },
                    grid: { color: c.grid },
                },
                y: {
                    ticks: { color: c.text, font: { size: 11 } },
                    grid: { color: c.grid },
                    beginAtZero: true,
                },
            },
        };
    }

    function destroyCharts() {
        Object.values(charts).forEach((chart) => chart.destroy());
        Object.keys(charts).forEach((key) => delete charts[key]);
    }

    function initCharts() {
        destroyCharts();
        const c = chartColors();

        charts.spend = new Chart(document.getElementById('chart-spend'), {
            type: 'line',
            data: {
                labels: chartData.spend_by_month.labels,
                datasets: [{
                    label: 'Gasto (€)',
                    data: chartData.spend_by_month.values,
                    borderColor: c.accent,
                    backgroundColor: c.accentMuted,
                    fill: true,
                    tension: 0.35,
                    pointRadius: 3,
                    pointHoverRadius: 5,
                }],
            },
            options: baseOptions('line'),
        });

        charts.uploads = new Chart(document.getElementById('chart-uploads'), {
            type: 'bar',
            data: {
                labels: chartData.uploads_by_month.labels,
                datasets: [{
                    label: 'Documentos',
                    data: chartData.uploads_by_month.values,
                    backgroundColor: c.accent,
                    borderRadius: 4,
                }],
            },
            options: baseOptions('bar'),
        });

        charts.category = new Chart(document.getElementById('chart-category'), {
            type: 'doughnut',
            data: {
                labels: chartData.by_category.labels,
                datasets: [{
                    data: chartData.by_category.values,
                    backgroundColor: c.palette,
                    borderWidth: 0,
                }],
            },
            options: { ...baseOptions('doughnut'), cutout: '62%' },
        });

        charts.status = new Chart(document.getElementById('chart-status'), {
            type: 'bar',
            data: {
                labels: chartData.by_status.labels,
                datasets: [{
                    label: 'Documentos',
                    data: chartData.by_status.values,
                    backgroundColor: c.palette,
                    borderRadius: 4,
                }],
            },
            options: {
                ...baseOptions('bar'),
                indexAxis: 'y',
            },
        });

        charts.reconciliation = new Chart(document.getElementById('chart-reconciliation'), {
            type: 'doughnut',
            data: {
                labels: chartData.reconciliation.labels,
                datasets: [{
                    data: chartData.reconciliation.values,
                    backgroundColor: c.palette,
                    borderWidth: 0,
                }],
            },
            options: { ...baseOptions('doughnut'), cutout: '58%' },
        });
    }

    initCharts();
    window.addEventListener('themechange', initCharts);
</script>
@endpush