@extends('layouts.app')

@push('styles')
<style>
    .dashboard-page {
        background: #f4f7fb;
        min-height: 100vh;
    }

    .dashboard-page .dashboard-header {
        margin-bottom: 1.2rem;
        padding: 1.6rem;
        border-radius: 22px;
        background: linear-gradient(135deg, #0d6efd, #3d8bfd);
        color: #fff;
        box-shadow: 0 12px 30px rgba(13, 110, 253, .18);
    }

    .dashboard-page .dashboard-header small {
        color: rgba(255,255,255,.88) !important;
        font-size: .95rem;
    }

    .dashboard-page .stat-card,
    .dashboard-page .chart-card,
    .dashboard-page .quick-card,
    .dashboard-page .metric-box {
        border: 0;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,.08);
        background: #fff;
    }

    .dashboard-page .stat-card {
        transition: all .25s ease;
        overflow: hidden;
        position: relative;
    }

    .dashboard-page .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 35px rgba(0,0,0,.11);
    }

    .dashboard-page .stat-card .card-body {
        padding: 1.2rem;
    }

    .dashboard-page .stat-label {
        color: #6c757d;
        font-size: .92rem;
        margin-bottom: .35rem;
        font-weight: 500;
    }

    .dashboard-page .stat-value {
        font-size: 2rem;
        font-weight: 800;
        line-height: 1.1;
        color: #1f2937;
    }

    .dashboard-page .metric-box {
        padding: 1.2rem 1.25rem;
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        height: 100%;
    }

    .dashboard-page .metric-help {
        color: #6c757d;
        font-size: .85rem;
    }

    .dashboard-page .section-title {
        font-weight: 700;
        color: #1f2937;
    }

    .dashboard-page .section-subtitle {
        font-size: .85rem;
        color: #6c757d;
    }

    .dashboard-page .chart-card .card-body,
    .dashboard-page .quick-card .card-body {
        padding: 1.2rem;
    }

    .dashboard-page .mini-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #eef4ff;
        color: #0d6efd;
        border-radius: 999px;
        padding: .35rem .75rem;
        font-size: .78rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .dashboard-page .quick-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        border-radius: 14px;
        font-weight: 600;
    }

    @media (max-width: 768px) {
        .dashboard-page .dashboard-header {
            padding: 1.2rem;
        }

        .dashboard-page .stat-value {
            font-size: 1.7rem;
        }
    }
</style>
@endpush

@section('content')
<div class="container-fluid dashboard-page py-3">

    <div class="dashboard-header">
        <h3 class="mb-1 fw-bold">Dashboard</h3>
        <small>
            {{ $empresa?->nombre ?? 'Sin empresa asignada' }} • Panel empresa_admin
        </small>
    </div>

    <div class="row g-3">
        <div class="col-md-4 col-xl-2">
            <div class="card stat-card h-100">
                <div class="card-body">
                    <div class="stat-label">Usuarios empresa</div>
                    <div class="stat-value">{{ number_format($usuariosEmpresa ?? 0, 0, ',', '.') }}</div>
                </div>
            </div>
        </div>

        <div class="col-md-4 col-xl-2">
            <div class="card stat-card h-100">
                <div class="card-body">
                    <div class="stat-label">Campañas mes</div>
                    <div class="stat-value">{{ number_format($campanasMes ?? 0, 0, ',', '.') }}</div>
                </div>
            </div>
        </div>

        <div class="col-md-4 col-xl-2">
            <div class="card stat-card h-100">
                <div class="card-body">
                    <div class="stat-label">Envíos mes</div>
                    <div class="stat-value">{{ number_format($enviosMes ?? 0, 0, ',', '.') }}</div>
                </div>
            </div>
        </div>

        <div class="col-md-4 col-xl-2">
            <div class="card stat-card h-100">
                <div class="card-body">
                    <div class="stat-label">Entregados</div>
                    <div class="stat-value">{{ number_format($entregadosMes ?? 0, 0, ',', '.') }}</div>
                </div>
            </div>
        </div>

        <div class="col-md-4 col-xl-2">
            <div class="card stat-card h-100">
                <div class="card-body">
                    <div class="stat-label">Fallidos</div>
                    <div class="stat-value">{{ number_format($fallidosMes ?? 0, 0, ',', '.') }}</div>
                </div>
            </div>
        </div>

        <div class="col-md-4 col-xl-2">
            <div class="card stat-card h-100">
                <div class="card-body">
                    <div class="stat-label">Clics</div>
                    <div class="stat-value">{{ number_format($clicsMes ?? 0, 0, ',', '.') }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mt-1">
        <div class="col-md-6">
            <div class="metric-box">
                <div class="stat-label">Tasa de entrega</div>
                <div class="stat-value">{{ number_format($tasaEntregaMes ?? 0, 2, ',', '.') }}%</div>
                <div class="metric-help">Entregados / envíos del mes</div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="metric-box">
                <div class="stat-label">CTR</div>
                <div class="stat-value">{{ number_format($ctrMes ?? 0, 2, ',', '.') }}%</div>
                <div class="metric-help">Clics / entregados del mes</div>
            </div>
        </div>
    </div>

    <div class="row g-3 mt-1">
        <div class="col-lg-8">
            <div class="card chart-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                        <div>
                            <h6 class="section-title mb-1">Campañas vs Envíos</h6>
                            <div class="section-subtitle">Comportamiento diario de los últimos 30 días</div>
                        </div>
                        <span class="mini-badge">Serie diaria</span>
                    </div>
                    <div style="height: 320px;">
                        <canvas id="chartCampanasEnvios"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card chart-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                        <div>
                            <h6 class="section-title mb-1">Top campañas</h6>
                            <div class="section-subtitle">Campañas con más envíos</div>
                        </div>
                        <span class="mini-badge">Top 8</span>
                    </div>
                    <div style="height: 320px;">
                        <canvas id="chartTopCampanas"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mt-1">
        <div class="col-lg-4">
            <div class="card chart-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                        <div>
                            <h6 class="section-title mb-1">Estados de envíos</h6>
                            <div class="section-subtitle">Distribución mensual</div>
                        </div>
                        <span class="mini-badge">Doughnut</span>
                    </div>
                    <div style="height: 300px;">
                        <canvas id="chartEstadosEnvios"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card chart-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                        <div>
                            <h6 class="section-title mb-1">Entregados vs Fallidos</h6>
                            <div class="section-subtitle">Comparación del mes</div>
                        </div>
                        <span class="mini-badge">Barras</span>
                    </div>
                    <div style="height: 300px;">
                        <canvas id="chartRendimientoEnvios"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card chart-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                        <div>
                            <h6 class="section-title mb-1">Embudo de conversión</h6>
                            <div class="section-subtitle">Envíos, entregados y clics</div>
                        </div>
                        <span class="mini-badge">Conversión</span>
                    </div>
                    <div style="height: 300px;">
                        <canvas id="chartConversion"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mt-1">
        <div class="col-lg-8">
            <div class="card chart-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                        <div>
                            <h6 class="section-title mb-1">Actividad semanal</h6>
                            <div class="section-subtitle">Últimos 7 días</div>
                        </div>
                        <span class="mini-badge">Semanal</span>
                    </div>
                    <div style="height: 300px;">
                        <canvas id="chartSemanal"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card quick-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <h6 class="section-title mb-1">Accesos rápidos</h6>
                            <div class="section-subtitle">Atajos a módulos</div>
                        </div>
                    </div>

                    <div class="d-grid gap-2">
                        <a href="{{ route('empresa.campanas.index') }}" class="btn btn-outline-primary quick-link">Campañas</a>
                        <a href="{{ route('empresa.contactos.index') }}" class="btn btn-outline-primary quick-link">Contactos</a>
                        <a href="{{ route('empresa.tags.index') }}" class="btn btn-outline-primary quick-link">Segmentos</a>
                        <a href="{{ route('empresa.plantillas.index') }}" class="btn btn-outline-primary quick-link">Plantillas</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const labels = {!! json_encode($chartLabels ?? []) !!};
    const campanas = {!! json_encode($chartCampanas ?? []) !!};
    const envios = {!! json_encode($chartEnvios ?? []) !!};
    const topLabels = {!! json_encode($topCampanasLabels ?? []) !!};
    const topEnvios = {!! json_encode($topCampanasEnvios ?? []) !!};
    const estadoLabels = {!! json_encode($estadoLabels ?? []) !!};
    const estadoValores = {!! json_encode($estadoValores ?? []) !!};

    const semanalLabels = {!! json_encode($semanalLabels ?? []) !!};
    const semanalCampanas = {!! json_encode($semanalCampanas ?? []) !!};
    const semanalEnvios = {!! json_encode($semanalEnvios ?? []) !!};

    const entregadosMes = {{ (int) ($entregadosMes ?? 0) }};
    const fallidosMes   = {{ (int) ($fallidosMes ?? 0) }};
    const clicsMes      = {{ (int) ($clicsMes ?? 0) }};
    const enviosMes     = {{ (int) ($enviosMes ?? 0) }};

    const commonOptions = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                labels: {
                    usePointStyle: true,
                    boxWidth: 8
                }
            }
        }
    };

    const gridColor = 'rgba(148, 163, 184, 0.15)';
    const tickColor = '#64748b';

    const ctx1 = document.getElementById('chartCampanasEnvios');
    if (ctx1) {
        new Chart(ctx1, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Campañas',
                        data: campanas,
                        tension: 0.35,
                        borderWidth: 3,
                        pointRadius: 3,
                        pointHoverRadius: 5,
                        fill: false
                    },
                    {
                        label: 'Envíos',
                        data: envios,
                        tension: 0.35,
                        borderWidth: 3,
                        pointRadius: 3,
                        pointHoverRadius: 5,
                        fill: false
                    }
                ]
            },
            options: {
                ...commonOptions,
                interaction: { mode: 'index', intersect: false },
                scales: {
                    x: {
                        grid: { display: false },
                        ticks: { color: tickColor }
                    },
                    y: {
                        beginAtZero: true,
                        grid: { color: gridColor },
                        ticks: { color: tickColor }
                    }
                }
            }
        });
    }

    const ctx2 = document.getElementById('chartTopCampanas');
    if (ctx2) {
        new Chart(ctx2, {
            type: 'bar',
            data: {
                labels: topLabels,
                datasets: [{
                    label: 'Envíos',
                    data: topEnvios,
                    borderWidth: 1,
                    borderRadius: 8,
                    borderSkipped: false
                }]
            },
            options: {
                ...commonOptions,
                indexAxis: 'y',
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: {
                        grid: { display: false },
                        ticks: { color: tickColor }
                    },
                    x: {
                        beginAtZero: true,
                        grid: { color: gridColor },
                        ticks: { color: tickColor }
                    }
                }
            }
        });
    }

    const ctx3 = document.getElementById('chartEstadosEnvios');
    if (ctx3) {
        new Chart(ctx3, {
            type: 'doughnut',
            data: {
                labels: estadoLabels,
                datasets: [{
                    data: estadoValores,
                    borderWidth: 2,
                    hoverOffset: 8
                }]
            },
            options: {
                ...commonOptions,
                cutout: '65%',
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            usePointStyle: true,
                            boxWidth: 8,
                            padding: 16
                        }
                    }
                }
            }
        });
    }

    const ctx4 = document.getElementById('chartRendimientoEnvios');
    if (ctx4) {
        new Chart(ctx4, {
            type: 'bar',
            data: {
                labels: ['Entregados', 'Fallidos'],
                datasets: [{
                    label: 'Cantidad',
                    data: [entregadosMes, fallidosMes],
                    borderWidth: 1,
                    borderRadius: 10,
                    borderSkipped: false
                }]
            },
            options: {
                ...commonOptions,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    x: {
                        grid: { display: false },
                        ticks: { color: tickColor }
                    },
                    y: {
                        beginAtZero: true,
                        grid: { color: gridColor },
                        ticks: { color: tickColor }
                    }
                }
            }
        });
    }

    const ctx5 = document.getElementById('chartConversion');
    if (ctx5) {
        new Chart(ctx5, {
            type: 'bar',
            data: {
                labels: ['Envíos', 'Entregados', 'Clics'],
                datasets: [{
                    label: 'Cantidad',
                    data: [enviosMes, entregadosMes, clicsMes],
                    borderWidth: 1,
                    borderRadius: 10,
                    borderSkipped: false
                }]
            },
            options: {
                ...commonOptions,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    x: {
                        grid: { display: false },
                        ticks: { color: tickColor }
                    },
                    y: {
                        beginAtZero: true,
                        grid: { color: gridColor },
                        ticks: { color: tickColor }
                    }
                }
            }
        });
    }

    const ctx6 = document.getElementById('chartSemanal');
    if (ctx6) {
        new Chart(ctx6, {
            type: 'line',
            data: {
                labels: semanalLabels,
                datasets: [
                    {
                        label: 'Campañas',
                        data: semanalCampanas,
                        tension: 0.35,
                        borderWidth: 3,
                        pointRadius: 3,
                        pointHoverRadius: 5,
                        fill: false
                    },
                    {
                        label: 'Envíos',
                        data: semanalEnvios,
                        tension: 0.35,
                        borderWidth: 3,
                        pointRadius: 3,
                        pointHoverRadius: 5,
                        fill: false
                    }
                ]
            },
            options: {
                ...commonOptions,
                interaction: { mode: 'index', intersect: false },
                scales: {
                    x: {
                        grid: { display: false },
                        ticks: { color: tickColor }
                    },
                    y: {
                        beginAtZero: true,
                        grid: { color: gridColor },
                        ticks: { color: tickColor }
                    }
                }
            }
        });
    }
</script>
@endpush