{% extends "base_dashboard.html" %}
{% load static %}

{% block title %}Dashboard | Citalis{% endblock %}

{% block content %}
<div class="flex flex-col lg:flex-row justify-between items-start lg:items-end gap-8 mb-16 reveal page-header">
    <div>
        <span class="text-primary text-[10px] uppercase font-black tracking-[0.4em] mb-4 block">Resumen Operativo</span>
        <h1 class="text-5xl lg:text-6xl leading-tight">Hola, {{ user.first_name }}.</h1>
    </div>
    <div class="flex gap-4">
        <a href="{% url 'appointment_type_list' %}"
            class="px-8 py-5 border border-accent/20 rounded-sm font-black text-xs uppercase tracking-[0.2em] hover:bg-surface transition-all">Ver
            Servicios</a>
        <a href="{% url 'business_landing' %}" target="_blank"
            class="bg-primary text-white px-8 py-5 rounded-sm font-black text-xs uppercase tracking-[0.2em] hover:bg-primary-dark transition-all shadow-lift flex items-center gap-3">
            <i data-lucide="external-link" class="w-4 h-4"></i>
            Vista Pública
        </a>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
    <!-- Gráfico de Actividad (Multi-linea suavizada) -->
    <div class="lg:col-span-2 card-premium p-10 reveal stagger-1 hidden md:block">
        <div class="flex justify-between items-center mb-10">
            <div>
                <h3 class="text-xs font-black uppercase tracking-[0.4em] text-body-text/30 mb-2">Tendencias del Mes</h3>
                <p class="text-2xl font-black uppercase tracking-tightest">Actividad de Citas</p>
            </div>
            <div class="flex gap-4">
                <div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-primary"></span><span
                        class="text-[9px] font-bold uppercase text-body-text/40">Confirmada</span></div>
                <div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-amber-400"></span><span
                        class="text-[9px] font-bold uppercase text-body-text/40">Pendiente</span></div>
                <div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-red-400"></span><span
                        class="text-[9px] font-bold uppercase text-body-text/40">Cancelada</span></div>
            </div>
        </div>
        <div class="h-[300px] w-full">
            <canvas id="activityChart"></canvas>
        </div>
    </div>

    <!-- Quick Stats / Actions -->
    <div class="card-premium p-10 reveal stagger-2">
        <h3 class="text-xs font-black uppercase tracking-[0.4em] text-body-text/30 mb-8">Accesos Rápidos</h3>
        <div class="grid grid-cols-1 gap-4">
            <a href="{% url 'weekly_availability_list' %}"
                class="group p-6 bg-surface/30 border border-accent/5 rounded-sm hover:border-primary/30 transition-all">
                <div class="flex items-center gap-4">
                    <div
                        class="w-10 h-10 rounded-full bg-white flex items-center justify-center text-primary shadow-sm group-hover:scale-110 transition-transform">
                        <i data-lucide="clock" class="w-5 h-5"></i>
                    </div>
                    <div>
                        <p class="text-[10px] font-black uppercase tracking-widest text-primary mb-1">Horarios</p>
                        <p class="text-xs font-bold text-body-text/60">Gestionar disponibilidad</p>
                    </div>
                </div>
            </a>
            <a href="{% url 'blocked_day_list' %}"
                class="group p-6 bg-surface/30 border border-accent/5 rounded-sm hover:border-primary/30 transition-all">
                <div class="flex items-center gap-4">
                    <div
                        class="w-10 h-10 rounded-full bg-white flex items-center justify-center text-primary shadow-sm group-hover:scale-110 transition-transform">
                        <i data-lucide="tree-palm" class="w-5 h-5"></i>
                    </div>
                    <div>
                        <p class="text-[10px] font-black uppercase tracking-widest text-primary mb-1">Vacaciones</p>
                        <p class="text-xs font-bold text-body-text/60">Bloquear días cerrados</p>
                    </div>
                </div>
            </a>
            <div class="p-6 bg-primary/5 border border-primary/10 rounded-sm">
                <p class="text-[10px] font-black uppercase tracking-widest text-primary/40 mb-3">Tu link de reserva</p>
                <div class="flex items-center justify-between gap-4">
                    <code class="text-[10px] font-bold text-primary truncate">{{ request.get_host }}</code>
                    <button onclick="copyLink()" class="p-2 hover:bg-white rounded-sm transition-colors text-primary">
                        <i data-lucide="copy" class="w-4 h-4"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Próximas Citas -->
    <div class="lg:col-span-3 card-premium overflow-hidden reveal stagger-3 upcoming-appointments">
        <div class="p-5 lg:p-10 border-b border-accent/5 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 bg-surface/10">
            <div>
                <h3 class="text-xs font-black uppercase tracking-[0.4em] text-body-text/30 mb-1">Agenda Inmediata</h3>
                <p class="text-xl font-black uppercase tracking-tightest">Próximas Citas</p>
            </div>
            <a href="{% url 'appointments_list' %}"
                class="text-[10px] font-black uppercase tracking-widest text-primary hover:underline">Ver todas las
                citas &rarr;</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead>
                    <tr class="bg-surface/30">
                        <th class="px-4 lg:px-10 py-3 lg:py-5 text-[9px] font-black uppercase tracking-widest text-body-text/40 desktop-only">Fecha / Hora</th>
                        <th class="px-4 lg:px-10 py-3 lg:py-5 text-[9px] font-black uppercase tracking-widest text-body-text/40 desktop-only">Cliente</th>
                        <th class="px-4 lg:px-10 py-3 lg:py-5 text-[9px] font-black uppercase tracking-widest text-body-text/40 desktop-only">Servicio</th>
                        <th class="px-4 lg:px-10 py-3 lg:py-5 text-[9px] font-black uppercase tracking-widest text-body-text/40 desktop-only">Profesional</th>
                        <th class="px-4 lg:px-10 py-3 lg:py-5 text-[9px] font-black uppercase tracking-widest text-body-text/40 text-center desktop-only">Estado</th>
                        <th class="px-4 lg:px-10 py-3 lg:py-5 text-[9px] font-black uppercase tracking-widest text-body-text/40 text-right desktop-only">Acción</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-accent/5">
                    {% for appt in appointments|slice:":5" %}
                    <tr class="hover:bg-surface/20 transition-colors">
                        <td class="px-4 lg:px-10 py-4 lg:py-6" data-label="Fecha/Hora">
                            <span class="text-xs font-black text-on-surface uppercase">{{ appt.date|date:"d M" }}</span>
                            <span class="text-[10px] font-bold text-primary/40 ml-2">{{ appt.start_time|time:"H:i" }}</span>
                        </td>
                        <td class="px-4 lg:px-10 py-4 lg:py-6" data-label="Cliente">
                            <p class="text-sm font-black text-on-surface uppercase tracking-tight">{{ appt.full_name }}</p>
                            <p class="text-[10px] text-body-text/40">{{ appt.email }}</p>
                        </td>
                        <td class="px-4 lg:px-10 py-4 lg:py-6" data-label="Servicio">
                            <span class="text-[10px] font-bold text-body-text/60 uppercase tracking-widest">{{ appt.appointment_type.name }}</span>
                        </td>
                        <td class="px-4 lg:px-10 py-4 lg:py-6" data-label="Profesional">
                            <span class="text-[10px] font-bold text-body-text/40 uppercase tracking-widest italic">{{ appt.resource.name|default:"General" }}</span>
                        </td>
                        <td class="px-4 lg:px-10 py-4 lg:py-6 text-center" data-label="Estado">
                            {% if appt.status == 'confirmed' %}
                            <span class="px-3 py-1 bg-green-50 text-green-700 text-[9px] font-black uppercase tracking-widest rounded-sm border border-green-100">Confirmada</span>
                            {% elif appt.status == 'cancelled' %}
                            <span class="px-3 py-1 bg-red-50 text-red-700 text-[9px] font-black uppercase tracking-widest rounded-sm border border-red-100">Cancelada</span>
                            {% elif appt.status == 'pending' %}
                            <span class="px-3 py-1 bg-amber-50 text-amber-700 text-[9px] font-black uppercase tracking-widest rounded-sm border border-amber-100">Pendiente</span>
                            {% else %}
                            <span class="px-3 py-1 bg-gray-50 text-gray-500 text-[9px] font-black uppercase tracking-widest rounded-sm border border-gray-200">{{ appt.get_status_display }}</span>
                            {% endif %}
                        </td>
                        <td class="px-4 lg:px-10 py-4 lg:py-6 text-right" data-label="Acción">
                            <a href="{% url 'appointments_list' %}" class="p-2 inline-block hover:bg-primary/10 rounded-sm text-primary transition-colors">
                                <i data-lucide="eye" class="w-4 h-4"></i>
                            </a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="px-10 py-20 text-center bg-white">
                            <i data-lucide="calendar" class="w-8 h-8 mx-auto mb-4 text-accent/20"></i>
                            <p class="text-[10px] font-black uppercase tracking-widest text-body-text/30">No tienes
                                citas próximas.</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        fetch('/api/dashboard/activity-month/')
            .then(r => r.json())
            .then(data => {
                const ctx = document.getElementById('activityChart').getContext('2d');

                // Configuración de los datasets
                const datasetOptions = (label, color, dataPoints) => ({
                    label: label,
                    data: dataPoints,
                    borderColor: color,
                    backgroundColor: 'transparent',
                    borderWidth: 3,
                    tension: 0.4, // Suavizado de la línea
                    pointRadius: 0,
                    pointHoverRadius: 6,
                    pointHoverBackgroundColor: color,
                    pointHoverBorderColor: '#fff',
                    pointHoverBorderWidth: 3,
                });

                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: data.labels,
                        datasets: [
                            datasetOptions('Confirmada', '#1693a5', data.datasets.confirmed),
                            datasetOptions('Pendiente', '#fbbf24', data.datasets.pending),
                            datasetOptions('Cancelada', '#f87171', data.datasets.cancelled),
                            datasetOptions('No asistió', '#9ca3af', data.datasets.no_show)
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        interaction: {
                            intersect: false,
                            mode: 'index',
                        },
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                backgroundColor: '#fff',
                                titleColor: '#1a1e1f',
                                bodyColor: '#4a5153',
                                borderColor: 'rgba(0,0,0,0.05)',
                                borderWidth: 1,
                                padding: 12,
                                bodySpacing: 6,
                                titleFont: { size: 12, weight: '900' },
                                callbacks: {
                                    title: (ctx) => `Día ${ctx[0].label}`
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: { color: 'rgba(0,0,0,0.03)', drawBorder: false },
                                ticks: { font: { size: 10, weight: '700' }, color: '#a0a0a0', stepSize: 1 }
                            },
                            x: {
                                grid: { display: false },
                                ticks: { font: { size: 9, weight: '700' }, color: '#a0a0a0', maxRotation: 0 }
                            }
                        }
                    }
                });
            });
    });

    function copyLink() {
        const link = window.location.origin + "/";
        navigator.clipboard.writeText(link).then(() => {
            alert('Enlace copiado al portapapeles');
        });
    }
</script>
{% endblock %}