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

{% block title %}Gestión de Citas | Citalis{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css">
<style>
    /* DataTables responsive custom styles */
    table.dataTable {
        border-collapse: collapse !important;
    }
    
    table.dataTable thead th {
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
        padding: 16px 24px !important;
        font-family: var(--font-heading);
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: #a0a0a0;
        white-space: nowrap;
    }
    
    table.dataTable tbody td {
        padding: 16px 24px !important;
        border-bottom: 1px solid rgba(0,0,0,0.03) !important;
        font-family: var(--font-body);
        font-size: 13px;
        vertical-align: middle;
    }

    table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
    table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
        background-color: #1693a5;
        border: none;
        top: 50%;
        transform: translateY(-50%);
    }

    .dataTables_paginate .paginate_button.current {
        background: #1693a5 !important;
        color: white !important;
        border-radius: 4px !important;
        border: none !important;
    }

    .dataTables_paginate .paginate_button:hover {
        background: #f0f0d8 !important;
        border: none !important;
    }

    /* Hide columns on mobile */
    @media (max-width: 768px) {
        table.dataTable thead th:nth-child(3),
        table.dataTable thead th:nth-child(4) {
            display: none;
        }
        
        table.dataTable tbody td:nth-child(3),
        table.dataTable tbody td:nth-child(4) {
            display: none;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="flex flex-col lg:flex-row justify-between items-start lg:items-end gap-8 mb-16 reveal">
    <div>
        <span class="text-primary text-[10px] uppercase font-black tracking-[0.4em] mb-4 block">Centro Operativo</span>
        <h1 class="text-4xl lg:text-5xl leading-tight">Gestión de Citas.</h1>
    </div>
    <div class="flex gap-4">
        <a href="{% url 'appointments_export' %}" class="px-8 py-5 border border-accent/20 rounded-sm font-black text-xs uppercase tracking-[0.2em] hover:bg-surface transition-all flex items-center gap-3">
            <i data-lucide="download" class="w-4 h-4"></i>
            Exportar CSV
        </a>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-10 gap-10 mb-16">
    <!-- Gráfico de Actividad (60-70%) -->
    <div class="lg:col-span-7 card-premium p-10 reveal 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">Monitor de Actividad</h3>
                <p class="text-xl font-black uppercase tracking-tightest">Tendencias del Mes</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-[8px] 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-red-400"></span><span class="text-[8px] font-bold uppercase text-body-text/40">Cancelada</span></div>
            </div>
        </div>
        <div class="h-[280px] w-full">
            <canvas id="appointmentsChart"></canvas>
        </div>
    </div>

    <!-- Filtros (30%) -->
    <div class="lg:col-span-3 card-premium p-10 reveal stagger-1">
        <h3 class="text-xs font-black uppercase tracking-[0.4em] text-body-text/30 mb-8">Filtros Avanzados</h3>
        <div class="space-y-6">
            <div>
                <label class="text-[9px] font-black uppercase tracking-widest text-body-text/40 mb-2 block">Búsqueda rápida</label>
                <div class="relative">
                    <i data-lucide="search" class="w-4 h-4 absolute left-4 top-1/2 -translate-y-1/2 text-body-text/20"></i>
                    <input type="text" id="filter_search" placeholder="Nombre, email o tel..." class="w-full pl-12 pr-4 py-4 bg-surface border border-accent/5 rounded-sm focus:border-primary outline-none transition-all text-xs font-bold">
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="text-[9px] font-black uppercase tracking-widest text-body-text/40 mb-2 block">Desde</label>
                    <input type="date" id="filter_date_from" class="w-full px-4 py-4 bg-surface border border-accent/5 rounded-sm focus:border-primary outline-none transition-all text-xs font-bold">
                </div>
                <div>
                    <label class="text-[9px] font-black uppercase tracking-widest text-body-text/40 mb-2 block">Hasta</label>
                    <input type="date" id="filter_date_to" class="w-full px-4 py-4 bg-surface border border-accent/5 rounded-sm focus:border-primary outline-none transition-all text-xs font-bold">
                </div>
            </div>
            <div>
                <label class="text-[9px] font-black uppercase tracking-widest text-body-text/40 mb-2 block">Servicio</label>
                <select id="filter_service" class="w-full px-4 py-4 bg-surface border border-accent/5 rounded-sm focus:border-primary outline-none transition-all text-xs font-bold">
                    <option value="">Todos los servicios</option>
                    {% for t in appt_types %}
                    <option value="{{ t.id }}">{{ t.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="text-[9px] font-black uppercase tracking-widest text-body-text/40 mb-2 block">Estado</label>
                <select id="filter_status" class="w-full px-4 py-4 bg-surface border border-accent/5 rounded-sm focus:border-primary outline-none transition-all text-xs font-bold">
                    <option value="">Todos los estados</option>
                    {% for code, label in statuses %}
                    <option value="{{ code }}">{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    </div>
</div>

<!-- Tabla Principal -->
<div class="card-premium overflow-hidden reveal stagger-2 px-10 pt-10 pb-16">
    <div class="mb-10 flex justify-between items-center">
        <h3 class="text-xs font-black uppercase tracking-[0.4em] text-body-text/30">Listado Maestro de Citas</h3>
    </div>
    <div class="overflow-x-auto">
        <table id="appointmentsTable" class="w-full appointments-table">
            <thead>
                <tr>
                    <th>Fecha / Hora</th>
                    <th>Cliente</th>
                    <th>Servicio / Profesional</th>
                    <th>Estado</th>
                    <th class="text-right">Acciones</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<!-- Drawer de Detalle (Igual que antes) -->
<div id="appointmentDrawer" class="fixed inset-0 z-[100] invisible overflow-hidden">
    <div id="drawerOverlay" class="absolute inset-0 bg-black/20 backdrop-blur-sm opacity-0 transition-opacity duration-300 pointer-events-none" onclick="closeDrawer()"></div>
    <div id="drawerPanel" class="absolute right-0 top-0 h-full w-full max-w-lg bg-white shadow-2xl translate-x-full transition-transform duration-300 flex flex-col">
        <div class="p-10 border-b border-accent/10 flex justify-between items-center bg-surface/30">
            <h2 class="text-xl font-black uppercase tracking-tighter">Detalle de la Cita</h2>
            <button onclick="closeDrawer()" class="p-2 hover:bg-accent/10 rounded-full transition-colors"><i data-lucide="x" class="w-6 h-6"></i></button>
        </div>
        <div id="drawerContent" class="flex-1 overflow-y-auto p-10 space-y-12"></div>
        <div id="drawerActions" class="p-10 border-t border-accent/10 flex gap-4 bg-white/50 backdrop-blur-md"></div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    let table;
    let activityChart;

    $(document).ready(function() {
        // Inicializar Tabla
        table = $('#appointmentsTable').DataTable({
            dom: '<"table-wrapper"t>p',
            ajax: {
                url: '{% url "appointments_api" %}',
                data: function(d) {
                    d.date_from = $('#filter_date_from').val();
                    d.date_to = $('#filter_date_to').val();
                    d.service_id = $('#filter_service').val();
                    d.status = $('#filter_status').val();
                    d.search = $('#filter_search').val();
                }
            },
            columns: [
                { 
                    data: null,
                    render: function(data) {
                        return `<div class="flex flex-col">
                            <span class="font-black text-on-surface uppercase">${data.date}</span>
                            <span class="text-[10px] text-primary font-bold uppercase tracking-widest">${data.time}</span>
                        </div>`;
                    }
                },
                { 
                    data: null,
                    render: function(data) {
                        return `<div class="flex flex-col">
                            <span class="font-black uppercase tracking-tight">${data.client}</span>
                            <span class="text-[10px] text-body-text/40">${data.email} · ${data.phone}</span>
                        </div>`;
                    }
                },
                { 
                    data: null,
                    render: function(data) {
                        return `<div class="flex flex-col">
                            <span class="font-black text-body-text/60 uppercase text-[9px] tracking-widest">${data.service}</span>
                            <span class="text-[8px] text-body-text/30 italic uppercase tracking-[0.2em] font-black">${data.professional}</span>
                        </div>`;
                    }
                },
                { 
                    data: 'status',
                    className: 'text-center',
                    render: function(data, type, row) {
                        const colors = {
                            'confirmed': 'bg-green-50 text-green-700 border-green-100',
                            'pending': 'bg-amber-50 text-amber-700 border-amber-100',
                            'cancelled': 'bg-red-50 text-red-700 border-red-100',
                            'no_show': 'bg-gray-100 text-gray-700 border-gray-200'
                        };
                        const colorClass = colors[data] || 'bg-gray-50 text-gray-400';
                        return `<span class="px-3 py-1 ${colorClass} text-[9px] font-black uppercase tracking-widest rounded-sm border">${row.status_display}</span>`;
                    }
                },
                {
                    data: null,
                    className: 'text-right',
                    render: function(data) {
                        return `<button onclick="openAppointmentDetail(${JSON.stringify(data).replace(/"/g, '&quot;')})" class="p-2 hover:bg-primary/10 rounded-sm text-primary transition-all">
                            <i data-lucide="eye" class="w-4 h-4"></i>
                        </button>`;
                    }
                }
            ],
            language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json' },
            order: [[0, 'desc']],
            createdRow: function(row, data, dataIndex) {
                $(row).find('td:eq(0)').attr('data-label', 'Fecha / Hora');
                $(row).find('td:eq(1)').attr('data-label', 'Cliente');
                $(row).find('td:eq(2)').attr('data-label', 'Servicio');
                $(row).find('td:eq(3)').attr('data-label', 'Estado');
                $(row).find('td:eq(4)').attr('data-label', 'Acción');
                
                // Hacer toda la fila clickable en móvil
                $(row).addClass('cursor-pointer');
                $(row).on('click', function(e) {
                    if (!$(e.target).closest('button').length) {
                        openAppointmentDetail(data);
                    }
                });
            },
            drawCallback: function() { lucide.createIcons(); }
        });

        // Inicializar Gráfico
        initChart();

        // Aplicar filtros
        $('#filter_date_from, #filter_date_to, #filter_service, #filter_status, #filter_search').on('input change', function() {
            table.ajax.reload();
        });
    });

    function initChart() {
        fetch('/api/dashboard/activity-month/')
            .then(r => r.json())
            .then(data => {
                const ctx = document.getElementById('appointmentsChart').getContext('2d');
                const datasetOptions = (label, color, dataPoints) => ({
                    label: label,
                    data: dataPoints,
                    borderColor: color,
                    backgroundColor: 'transparent',
                    borderWidth: 3,
                    tension: 0.4,
                    pointRadius: 0,
                    pointHoverRadius: 6,
                    pointHoverBackgroundColor: color,
                    pointHoverBorderColor: '#fff',
                    pointHoverBorderWidth: 3,
                });

                activityChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: data.labels,
                        datasets: [
                            datasetOptions('Confirmada', '#1693a5', data.datasets.confirmed),
                            datasetOptions('Cancelada', '#f87171', data.datasets.cancelled),
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: { legend: { display: false } },
                        scales: {
                            y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.03)' }, ticks: { font: { size: 9, weight: '700' }, color: '#a0a0a0', stepSize: 1 } },
                            x: { grid: { display: false }, ticks: { font: { size: 8, weight: '700' }, color: '#a0a0a0', maxRotation: 0 } }
                        }
                    }
                });
            });
    }

    // Funciones del Drawer (Igual que antes)
    function openAppointmentDetail(appt) {
        const content = `
            <div class="space-y-10">
                <div class="flex items-center gap-6 p-8 bg-surface/30 rounded-2xl border border-accent/5">
                    <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                        <i data-lucide="user" class="w-8 h-8"></i>
                    </div>
                    <div>
                        <h3 class="text-2xl font-black uppercase tracking-tightest leading-none">${appt.client}</h3>
                        <p class="text-xs font-bold text-body-text/30 uppercase tracking-widest mt-2">${appt.email}</p>
                        <p class="text-xs font-bold text-primary uppercase tracking-widest mt-1">${appt.phone}</p>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-10">
                    <div><p class="text-[9px] font-black uppercase tracking-[0.2em] text-body-text/30 mb-2">Servicio</p><p class="text-sm font-black uppercase tracking-tight">${appt.service}</p></div>
                    <div><p class="text-[9px] font-black uppercase tracking-[0.2em] text-body-text/30 mb-2">Profesional</p><p class="text-sm font-black uppercase tracking-tight text-primary">${appt.professional}</p></div>
                    <div><p class="text-[9px] font-black uppercase tracking-[0.2em] text-body-text/30 mb-2">Fecha</p><p class="text-sm font-black uppercase tracking-tight">${appt.date}</p></div>
                    <div><p class="text-[9px] font-black uppercase tracking-[0.2em] text-body-text/30 mb-2">Hora</p><p class="text-sm font-black uppercase tracking-tight">${appt.time}</p></div>
                </div>

                <div class="pt-6 border-t border-accent/10">
                    <label class="text-[9px] font-black uppercase tracking-[0.2em] text-body-text/30 mb-6 block">Gestión de Estado</label>
                    <div class="grid grid-cols-2 gap-4">
                        <button onclick="updateStatus(${appt.id}, 'confirmed')" class="flex items-center justify-center gap-3 px-4 py-5 border rounded-sm text-[10px] font-black uppercase tracking-widest transition-all ${appt.status === 'confirmed' ? 'bg-green-50 border-green-200 text-green-700' : 'bg-surface hover:bg-green-50/50'}">Confirmada</button>
                        <button onclick="updateStatus(${appt.id}, 'no_show')" class="flex items-center justify-center gap-3 px-4 py-5 border rounded-sm text-[10px] font-black uppercase tracking-widest transition-all ${appt.status === 'no_show' ? 'bg-gray-100 border-gray-300 text-gray-700' : 'bg-surface'}">No asistió</button>
                        <button onclick="updateStatus(${appt.id}, 'cancelled')" class="flex items-center justify-center gap-3 px-4 py-5 border rounded-sm text-[10px] font-black uppercase tracking-widest transition-all ${appt.status === 'cancelled' ? 'bg-red-50 border-red-200 text-red-700' : 'bg-surface hover:bg-red-50/50'}">Cancelada</button>
                        <button onclick="updateStatus(${appt.id}, 'pending')" class="flex items-center justify-center gap-3 px-4 py-5 border rounded-sm text-[10px] font-black uppercase tracking-widest transition-all ${appt.status === 'pending' ? 'bg-amber-50 border-amber-200 text-amber-700' : 'bg-surface hover:bg-amber-50/50'}">Pendiente</button>
                    </div>
                </div>
            </div>
        `;
        const actions = `<button onclick="closeDrawer()" class="flex-1 px-8 py-5 border border-accent/20 rounded-sm font-black text-xs uppercase tracking-[0.2em] hover:bg-surface transition-all">Cerrar</button>`;

        document.getElementById('drawerContent').innerHTML = content;
        document.getElementById('drawerActions').innerHTML = actions;
        document.getElementById('appointmentDrawer').classList.remove('invisible');
        setTimeout(() => {
            document.getElementById('drawerOverlay').classList.add('opacity-100');
            document.getElementById('drawerPanel').classList.remove('translate-x-full');
            lucide.createIcons();
        }, 10);
    }

    function closeDrawer() {
        document.getElementById('drawerOverlay').classList.remove('opacity-100');
        document.getElementById('drawerPanel').classList.add('translate-x-full');
        setTimeout(() => { document.getElementById('appointmentDrawer').classList.add('invisible'); }, 300);
    }

    function updateStatus(id, newStatus) {
        const formData = new FormData(); formData.append('status', newStatus);
        fetch(`/api/appointments/update-status/${id}/`, {
            method: 'POST', body: formData, headers: { 'X-CSRFToken': '{{ csrf_token }}' }
        }).then(r => r.json()).then(data => {
            if (data.success) { table.ajax.reload(null, false); closeDrawer(); }
        });
    }
</script>
{% endblock %}