{% extends "base.html" %}

{% block title %}Agendar Consulta — Dra. Mariela Moreno Autie{% endblock %}

{% block extra_css %}
<style>
    /* FullCalendar custom rosa/dorado theme */
    .fc .fc-toolbar-title { font-family: 'Poppins', sans-serif; color: #1A1A2E; font-weight: 700; }
    .fc .fc-button-primary {
        background-color: #E8336A !important;
        border-color: #E8336A !important;
        font-family: 'Inter', sans-serif;
        font-size: 0.8125rem;
        border-radius: 20px !important;
        padding: 6px 16px !important;
        transition: all 0.3s ease;
    }
    .fc .fc-button-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
    .fc .fc-button-primary:disabled { opacity: 0.5; }
    .fc .fc-button-primary:not(:disabled).fc-button-active {
        background-color: #D4AF37 !important;
        border-color: #D4AF37 !important;
    }
    .fc .fc-daygrid-day.fc-day-today { background: #FDE8F0 !important; }
    .fc .fc-event { border-radius: 8px !important; padding: 2px 6px !important; font-size: 0.75rem; }
    .fc .fc-daygrid-day-number { color: #1A1A2E; font-weight: 500; }
    .fc .fc-col-header-cell-cushion { color: #E8336A; font-weight: 600; text-transform: uppercase; font-size: 0.75rem; }
    .fc .fc-scrollgrid { border-color: #F3F4F6 !important; }
    .fc th, .fc td { border-color: #F3F4F6 !important; }

    /* Slot selection */
    .slot-btn {
        transition: all 0.2s ease;
        cursor: pointer;
    }
    .slot-btn:hover { background-color: #FDE8F0; border-color: #E8336A; color: #E8336A; }
    .slot-btn.selected { background-color: #E8336A; color: white; border-color: #E8336A; }

    /* Modal overlay */
    .modal-overlay {
        background: rgba(0,0,0,0.4);
        backdrop-filter: blur(4px);
        transition: opacity 0.3s ease;
    }

    /* Estado badges */
    .badge-pendiente { background: #FEF3C7; color: #92400E; }
    .badge-confirmada { background: #D1FAE5; color: #065F46; }
    .badge-completada { background: #E0E7FF; color: #3730A3; }
    .badge-cancelada { background: #FEE2E2; color: #991B1B; }
    .badge-no_asistio { background: #F3F4F6; color: #374151; }

    /* ===== RESPONSIVE MOBILE ===== */
    @media (max-width: 640px) {
        .fc .fc-toolbar { flex-wrap: wrap; gap: 8px; justify-content: center; }
        .fc .fc-toolbar-title { font-size: 1.1rem !important; width: 100%; text-align: center; order: -1; }
        .fc .fc-toolbar-chunk { display: flex; justify-content: center; }
        .fc .fc-button-primary { padding: 4px 10px !important; font-size: 0.7rem; }
        .fc .fc-button-group { gap: 0; }
        .fc .fc-daygrid-day-number { font-size: 0.75rem; padding: 2px 4px; }
        .fc .fc-col-header-cell-cushion { font-size: 0.65rem; }
        .fc .fc-event { font-size: 0.65rem; padding: 1px 3px !important; }
    }
</style>
{% endblock %}

{% block content %}
<div class="min-h-[calc(100vh-72px)] bg-gris-bg">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

        <!-- Header -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-8">
            <div>
                <h1 class="font-poppins font-bold text-dark text-2xl sm:text-3xl">Calendário de Consultas</h1>
                <p class="text-gray-400 text-sm mt-1">Agende a sua consulta com a Dra. Mariela</p>
            </div>
            {% if request.user.rol == 'paciente' %}
            <button onclick="abrirModalReserva()" class="btn-dorado flex items-center gap-2 px-6 py-3 bg-dorado text-white font-semibold rounded-[25px] shadow-md text-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                Nova Consulta
            </button>
            {% endif %}
            {% if request.user.es_doctora %}
            <a href="{% url 'appointments:horarios' %}" class="flex items-center gap-2 px-6 py-3 border-[1.5px] border-rosa text-rosa font-semibold rounded-[25px] text-sm hover:bg-rosa hover:text-white transition-all duration-300">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                Gerir Horários
            </a>
            {% endif %}
        </div>

        <!-- Leyenda de colores -->
        <div class="flex flex-wrap items-center gap-4 mb-6">
            <div class="flex items-center gap-2"><span class="w-3 h-3 rounded-full bg-[#F59E0B]"></span><span class="text-xs text-gray-500">Pendente</span></div>
            <div class="flex items-center gap-2"><span class="w-3 h-3 rounded-full bg-[#10B981]"></span><span class="text-xs text-gray-500">Confirmada</span></div>
            <div class="flex items-center gap-2"><span class="w-3 h-3 rounded-full bg-[#6366F1]"></span><span class="text-xs text-gray-500">Concluída</span></div>
            <div class="flex items-center gap-2"><span class="w-3 h-3 rounded-full bg-[#EF4444]"></span><span class="text-xs text-gray-500">Cancelada</span></div>
        </div>

        <!-- FullCalendar -->
        <div class="bg-white rounded-xl p-4 sm:p-6 border border-gray-100 shadow-sm">
            <div id="fullcalendar"></div>
        </div>
    </div>
</div>

<!-- ============================================================ -->
<!-- MODAL: Reservar Nueva Cita -->
<!-- ============================================================ -->
<div id="modal-reservar" class="fixed inset-0 z-[2000] hidden overflow-y-auto">
    <div class="modal-overlay absolute inset-0" onclick="cerrarModalReserva()"></div>
    <div class="relative z-10 flex items-start sm:items-center justify-center min-h-screen p-4 py-8">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg mx-auto overflow-hidden my-auto">
            <!-- Header modal -->
            <div class="bg-gradient-to-r from-rosa to-pink-400 px-6 py-4">
                <div class="flex items-center justify-between">
                    <h2 class="font-poppins font-bold text-white text-lg">Agendar Nova Consulta</h2>
                    <button onclick="cerrarModalReserva()" class="text-white/80 hover:text-white transition-colors">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>
            </div>

            <!-- Body modal -->
            <div class="px-6 py-5 space-y-5">
                <!-- Paso 1: Servicio -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Serviço</label>
                    <select id="modal-servicio" class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-rosa/20 focus:border-rosa outline-none transition-all duration-300">
                        <option value="">Selecione um serviço</option>
                        {% for servicio in servicios %}
                        <option value="{{ servicio.id }}" data-duracion="{{ servicio.duracion_minutos }}">{{ servicio.nombre }} ({{ servicio.duracion_minutos }} min)</option>
                        {% endfor %}
                    </select>
                </div>

                <!-- Paso 1.5: Especialidad (se carga dinámicamente según servicio) -->
                <div id="especialidad-container" class="hidden">
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Especialidade</label>
                    <select id="modal-especialidad" class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-rosa/20 focus:border-rosa outline-none transition-all duration-300">
                        <option value="">Selecione uma especialidade</option>
                    </select>
                </div>

                <!-- Paso 2: Fecha -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Data</label>
                    <input type="date" id="modal-fecha" class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-rosa/20 focus:border-rosa outline-none transition-all duration-300">
                </div>

                <!-- Paso 3: Hora (slots) -->
                <div id="slots-container" class="hidden">
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Horário disponível</label>
                    <div id="slots-grid" class="grid grid-cols-3 sm:grid-cols-4 gap-2">
                        <!-- Slots se cargan dinámicamente -->
                    </div>
                    <div id="slots-empty" class="hidden text-center py-4">
                        <p class="text-gray-400 text-sm">Não há horários disponíveis para esta data.</p>
                    </div>
                    <div id="slots-loading" class="hidden text-center py-4">
                        <svg class="w-6 h-6 animate-spin mx-auto text-rosa" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                    </div>
                </div>

                <!-- Paso 4: Notas -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Notas (opcional)</label>
                    <textarea id="modal-notas" rows="2" placeholder="Descreva brevemente a sua consulta..." class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-rosa/20 focus:border-rosa outline-none transition-all duration-300 resize-none"></textarea>
                </div>
            </div>

            <!-- Footer modal -->
            <div class="px-6 py-4 bg-gray-50 flex items-center justify-end gap-3">
                <button onclick="cerrarModalReserva()" class="px-5 py-2.5 text-gray-500 text-sm font-medium rounded-[25px] hover:text-rosa transition-colors">Cancelar</button>
                <button onclick="confirmarReserva()" id="btn-confirmar-reserva" disabled class="btn-dorado px-6 py-2.5 bg-dorado text-white text-sm font-semibold rounded-[25px] shadow-md disabled:opacity-50 disabled:cursor-not-allowed">
                    Confirmar Consulta
                </button>
            </div>
        </div>
    </div>
</div>

<!-- ============================================================ -->
<!-- MODAL: Motivo de rechazo -->
<!-- ============================================================ -->
<div id="modal-rechazo" class="fixed inset-0 z-[2500] hidden">
    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" onclick="cerrarModalRechazo()"></div>
    <div class="relative z-10 flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md mx-auto overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center">
                    <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                </div>
                <div>
                    <h3 class="font-poppins font-semibold text-dark text-base">Rejeitar Consulta</h3>
                    <p class="text-gray-400 text-xs">Indique o motivo da rejeição</p>
                </div>
            </div>
            <div class="px-6 py-5">
                <label for="rechazo-motivo" class="block text-sm font-medium text-gray-700 mb-2">Motivo da rejeição</label>
                <textarea id="rechazo-motivo" rows="3" placeholder="Ex: Horário não disponível, reagendar para outra data..." class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-red-200 focus:border-red-400 outline-none transition-all duration-300 resize-none text-sm"></textarea>
                <p class="text-gray-400 text-[11px] mt-1.5">Este motivo será visível para o paciente</p>
            </div>
            <div class="px-6 py-4 bg-gray-50 flex items-center justify-end gap-3">
                <button onclick="cerrarModalRechazo()" class="px-5 py-2.5 text-gray-500 text-sm font-medium rounded-[25px] hover:text-rosa transition-colors">Cancelar</button>
                <button onclick="confirmarRechazo()" id="btn-confirmar-rechazo" class="px-6 py-2.5 bg-red-500 text-white text-sm font-semibold rounded-[25px] shadow-md hover:bg-red-600 transition-colors">Rejeitar Consulta</button>
            </div>
        </div>
    </div>
</div>

<!-- ============================================================ -->
<!-- OVERLAY: Loading al reservar -->
<!-- ============================================================ -->
<div id="loading-reserva" class="fixed inset-0 z-[3000] hidden">
    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
    <div class="relative z-10 flex flex-col items-center justify-center min-h-screen">
        <div class="bg-white rounded-2xl shadow-2xl p-8 flex flex-col items-center gap-5 max-w-xs w-full mx-4">
            <!-- Spinner circular animado -->
            <div class="relative w-20 h-20">
                <svg class="w-20 h-20 animate-spin" viewBox="0 0 80 80" fill="none">
                    <circle cx="40" cy="40" r="34" stroke="#FDE8F0" stroke-width="6"></circle>
                    <circle cx="40" cy="40" r="34" stroke="#E8336A" stroke-width="6" stroke-linecap="round" stroke-dasharray="160" stroke-dashoffset="60"></circle>
                </svg>
                <div class="absolute inset-0 flex items-center justify-center">
                    <svg class="w-8 h-8 text-rosa" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                </div>
            </div>
            <div class="text-center">
                <p class="font-poppins font-semibold text-dark text-base" id="loading-titulo">Reservando a sua consulta</p>
                <p class="text-gray-400 text-sm mt-1" id="loading-subtitulo">Confirmando disponibilidade...</p>
            </div>
            <!-- Barra de progreso -->
            <div class="w-full bg-gray-100 rounded-full h-2 overflow-hidden">
                <div id="loading-barra" class="h-full bg-gradient-to-r from-rosa to-dorado rounded-full transition-all duration-500 ease-out" style="width:0%"></div>
            </div>
        </div>
    </div>
</div>

<!-- ============================================================ -->
<!-- MODAL: Detalle de Cita -->
<!-- ============================================================ -->
<div id="modal-detalle" class="fixed inset-0 z-[2000] hidden overflow-y-auto">
    <div class="modal-overlay absolute inset-0" onclick="cerrarModalDetalle()"></div>
    <div class="relative z-10 flex items-start sm:items-center justify-center min-h-screen p-2 sm:p-4 py-4 sm:py-8">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md sm:max-w-lg mx-auto overflow-hidden my-auto">
            <div class="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-100">
                <div class="flex items-center justify-between">
                    <h2 class="font-poppins font-bold text-dark text-base sm:text-lg" id="detalle-titulo">Detalhe da Consulta</h2>
                    <button onclick="cerrarModalDetalle()" class="text-gray-400 hover:text-rosa transition-colors">
                        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>
            </div>
            <div class="px-4 sm:px-6 py-4 sm:py-5 text-sm sm:text-base" id="detalle-body">
                <!-- Se llena dinámicamente -->
            </div>
            <div class="px-4 sm:px-6 py-3 sm:py-4 bg-gray-50 flex flex-wrap items-center justify-end gap-2 sm:gap-3" id="detalle-acciones">
                <!-- Acciones dinámicas -->
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% load static %}
{% block extra_js %}
<!-- FullCalendar v6 (local) -->
<script src="{% static 'js/fullcalendar.min.js' %}"></script>
<script>
(function() {
    'use strict';

    const CSRF = '{{ csrf_token }}';
    const USER_ROL = '{{ request.user.rol }}';
    const URLS = {
        eventos: '{% url "appointments:api_eventos" %}',
        slots: '{% url "appointments:api_slots" %}',
        reservar: '{% url "appointments:reservar" %}',
        detalle: '/citas/api/cita/',
        confirmar: '/citas/confirmar/',
        completar: '/citas/completar/',
        noAsistio: '/citas/no-asistio/',
        cancelar: '/citas/cancelar/',
        cancelarDoctora: '/citas/cancelar-doctora/',
    };

    let selectedSlot = null;
    let calendar = null;

    // ============================================================
    // FETCH HELPER — manejo robusto de errores
    // ============================================================
    async function fetchJSON(url, options) {
        const r = await fetch(url, Object.assign({ credentials: 'same-origin' }, options));

        // Si el navegador siguió un redirect (sesión expirada → login)
        if (r.redirected) {
            window.location.href = '/cuenta/login/?next=/citas/';
            return null;
        }

        // Verificar que la respuesta sea JSON antes de parsear
        const ct = r.headers.get('content-type') || '';
        if (!ct.includes('application/json')) {
            throw new Error('A sua sessão expirou ou houve um erro do servidor. Recarregue a página (Ctrl+F5).');
        }

        const data = await r.json();

        if (!r.ok) {
            throw new Error(data.error || 'Erro do servidor (código ' + r.status + ').');
        }

        return data;
    }

    // ============================================================
    // FULLCALENDAR INIT
    // ============================================================
    document.addEventListener('DOMContentLoaded', function() {
        const el = document.getElementById('fullcalendar');
        if (!el) return;

        if (typeof FullCalendar === 'undefined') {
            el.innerHTML = '<p class="text-red-500 text-center py-8">Não foi possível carregar a biblioteca do calendário (CDN). Verifique a sua ligação à internet e recarregue com Ctrl+F5.</p>';
            return;
        }

        try {
            const isMobile = window.innerWidth < 640;
            calendar = new FullCalendar.Calendar(el, {
                locale: 'pt-br',
                initialView: isMobile ? 'listWeek' : 'dayGridMonth',
                headerToolbar: isMobile ? {
                    left: 'prev,next',
                    center: 'title',
                    right: 'dayGridMonth,listWeek'
                } : {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                },
                buttonText: {
                    today: 'Hoje',
                    month: 'Mês',
                    week: 'Semana',
                    day: 'Dia',
                    list: 'Lista'
                },
                height: 'auto',
                navLinks: true,
                editable: false,
                selectable: USER_ROL === 'paciente',
                selectMirror: true,
                nowIndicator: true,
                events: function(fetchInfo, successCallback, failureCallback) {
                    fetchJSON(URLS.eventos + '?start=' + fetchInfo.startStr + '&end=' + fetchInfo.endStr)
                    .then(data => {
                        if (data) successCallback(data);
                        else successCallback([]);
                    })
                    .catch(err => {
                        console.error('Error cargando eventos:', err);
                        successCallback([]);
                    });
                },
                eventClick: function(info) {
                    const id = info.event.id;
                    if (id.startsWith('bloqueo-')) return;
                    abrirModalDetalle(id);
                },
                dateClick: function(info) {
                    if (USER_ROL === 'paciente') {
                        document.getElementById('modal-fecha').value = info.dateStr;
                        abrirModalReserva();
                        cargarSlots();
                    }
                },
            });
            calendar.render();
        } catch (e) {
            console.error('Error inicializando FullCalendar:', e);
            el.innerHTML = '<p class="text-red-500 text-center py-8">Erro ao carregar o calendário: ' + e.message + '</p>';
        }
    });

    // ============================================================
    // MODAL RESERVAR
    // ============================================================
    window.abrirModalReserva = function() {
        document.getElementById('modal-reservar').classList.remove('hidden');
        const fechaInput = document.getElementById('modal-fecha');
        if (!fechaInput.value) {
            const tomorrow = new Date();
            tomorrow.setDate(tomorrow.getDate() + 1);
            fechaInput.value = tomorrow.toISOString().split('T')[0];
        }
        fechaInput.min = new Date().toISOString().split('T')[0];
    };

    window.cerrarModalReserva = function() {
        document.getElementById('modal-reservar').classList.add('hidden');
        resetFormReserva();
    };

    function resetFormReserva() {
        document.getElementById('modal-servicio').value = '';
        document.getElementById('modal-fecha').value = '';
        document.getElementById('modal-notas').value = '';
        document.getElementById('modal-especialidad').value = '';
        document.getElementById('especialidad-container').classList.add('hidden');
        document.getElementById('slots-container').classList.add('hidden');
        document.getElementById('btn-confirmar-reserva').disabled = true;
        selectedSlot = null;
    }

    // Cargar especialidades cuando cambia servicio (solo para Consulta Ginecologica)
    document.getElementById('modal-servicio')?.addEventListener('change', function() {
        cargarSlots();
        const opt = this.options[this.selectedIndex];
        const nombre = opt ? opt.textContent.trim() : '';
        if (nombre.toLowerCase().startsWith('consulta ginecologica')) {
            cargarEspecialidades(this.value);
        } else {
            document.getElementById('especialidad-container').classList.add('hidden');
            document.getElementById('modal-especialidad').value = '';
        }
    });

    function cargarEspecialidades(servicioId) {
        const container = document.getElementById('especialidad-container');
        const sel = document.getElementById('modal-especialidad');
        sel.innerHTML = '<option value="">Selecione uma especialidade</option>';
        if (!servicioId) { container.classList.add('hidden'); return; }

        fetch('{% url "appointments:api_especialidades" %}?servicio_id=' + servicioId, { credentials: 'same-origin' })
        .then(r => r.json())
        .then(data => {
            if (data.especialidades && data.especialidades.length > 0) {
                data.especialidades.forEach(e => {
                    const opt = document.createElement('option');
                    opt.value = e.nombre;
                    opt.textContent = e.nombre;
                    sel.appendChild(opt);
                });
                container.classList.remove('hidden');
            } else {
                container.classList.add('hidden');
            }
        })
        .catch(() => container.classList.add('hidden'));
    }
    document.getElementById('modal-fecha')?.addEventListener('change', cargarSlots);

    function cargarSlots() {
        const servicio = document.getElementById('modal-servicio').value;
        const fecha = document.getElementById('modal-fecha').value;

        if (!servicio || !fecha) return;

        const container = document.getElementById('slots-container');
        const grid = document.getElementById('slots-grid');
        const empty = document.getElementById('slots-empty');
        const loading = document.getElementById('slots-loading');

        container.classList.remove('hidden');
        grid.classList.add('hidden');
        empty.classList.add('hidden');
        loading.classList.remove('hidden');
        selectedSlot = null;
        document.getElementById('btn-confirmar-reserva').disabled = true;

        fetchJSON(URLS.slots + '?fecha=' + fecha + '&servicio=' + servicio)
        .then(data => {
            loading.classList.add('hidden');
            if (!data) return;
            if (data.slots && data.slots.length > 0) {
                grid.innerHTML = '';
                data.slots.forEach(slot => {
                    const btn = document.createElement('button');
                    btn.type = 'button';
                    btn.className = 'slot-btn px-3 py-2 text-sm border border-gray-200 rounded-lg text-gray-700 font-medium';
                    btn.textContent = slot.hora;
                    btn.dataset.hora = slot.hora;
                    btn.onclick = function() {
                        document.querySelectorAll('.slot-btn').forEach(b => b.classList.remove('selected'));
                        btn.classList.add('selected');
                        selectedSlot = slot.hora;
                        document.getElementById('btn-confirmar-reserva').disabled = false;
                    };
                    grid.appendChild(btn);
                });
                grid.classList.remove('hidden');
            } else {
                empty.classList.remove('hidden');
            }
        })
        .catch(err => {
            console.error('Error cargando slots:', err);
            loading.classList.add('hidden');
            empty.classList.remove('hidden');
        });
    }

    // Confirmar reserva
    // --- Loading overlay helpers ---
    var loadingEl = document.getElementById('loading-reserva');
    var loadingBarra = document.getElementById('loading-barra');
    var loadingTitulo = document.getElementById('loading-titulo');
    var loadingSubtitulo = document.getElementById('loading-subtitulo');
    var loadingTimer = null;

    function mostrarLoading() {
        loadingBarra.style.width = '0%';
        loadingTitulo.textContent = 'Reservando a sua consulta';
        loadingSubtitulo.textContent = 'Confirmando disponibilidade...';
        loadingEl.classList.remove('hidden');
        // Progreso simulado: 0→30→55→75
        var pasos = [
            { w: '30%', t: 300, sub: 'Confirmando disponibilidade...' },
            { w: '55%', t: 800, sub: 'Processando reserva...' },
            { w: '75%', t: 1500, sub: 'Enviando confirmação...' }
        ];
        pasos.forEach(function(p) {
            setTimeout(function() {
                if (!loadingEl.classList.contains('hidden')) {
                    loadingBarra.style.width = p.w;
                    loadingSubtitulo.textContent = p.sub;
                }
            }, p.t);
        });
    }

    function cerrarLoading(exito) {
        loadingBarra.style.width = '100%';
        if (exito) {
            loadingTitulo.textContent = 'Consulta reservada!';
            loadingSubtitulo.textContent = 'Tudo pronto';
        } else {
            loadingTitulo.textContent = 'Erro';
            loadingSubtitulo.textContent = 'Não foi possível concluir';
        }
        setTimeout(function() {
            loadingEl.classList.add('hidden');
        }, exito ? 900 : 600);
    }

    window.confirmarReserva = function() {
        const servicio = document.getElementById('modal-servicio').value;
        const fecha = document.getElementById('modal-fecha').value;
        const notas = document.getElementById('modal-notas').value;

        if (!servicio || !fecha || !selectedSlot) return;

        const btn = document.getElementById('btn-confirmar-reserva');
        btn.disabled = true;
        btn.textContent = 'Reservando...';
        mostrarLoading();

        const formData = new FormData();
        formData.append('servicio', servicio);
        formData.append('fecha', fecha);
        formData.append('hora', selectedSlot);
        formData.append('notas', notas);
        const especialidad = document.getElementById('modal-especialidad').value;
        if (especialidad) formData.append('especialidad', especialidad);

        fetchJSON(URLS.reservar, {
            method: 'POST',
            headers: { 'X-CSRFToken': CSRF },
            body: formData
        })
        .then(data => {
            if (!data) { cerrarLoading(false); return; }
            if (data.success) {
                cerrarLoading(true);
                setTimeout(function() {
                    cerrarModalReserva();
                    if (calendar) calendar.refetchEvents();
                    mostrarNotificacion('Consulta reservada com sucesso para ' + data.cita.fecha + ' às ' + data.cita.hora, 'success');
                }, 950);
            } else {
                cerrarLoading(false);
                mostrarNotificacion(data.error || 'Erro ao reservar a consulta.', 'error');
            }
            btn.disabled = false;
            btn.textContent = 'Confirmar Consulta';
        })
        .catch(err => {
            console.error('Error reservando cita:', err);
            cerrarLoading(false);
            mostrarNotificacion(err.message || 'Erro de ligação. Tente novamente.', 'error');
            btn.disabled = false;
            btn.textContent = 'Confirmar Consulta';
        });
    };

    // ============================================================
    // MODAL DETALLE
    // ============================================================
    window.abrirModalDetalle = function(citaId) {
        const modal = document.getElementById('modal-detalle');
        const body = document.getElementById('detalle-body');
        const acciones = document.getElementById('detalle-acciones');

        body.innerHTML = '<div class="text-center py-4"><svg class="w-6 h-6 animate-spin mx-auto text-rosa" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg></div>';
        acciones.innerHTML = '';
        modal.classList.remove('hidden');

        fetchJSON(URLS.detalle + citaId + '/')
        .then(cita => {
            if (!cita) return;
            body.innerHTML = `
                <div class="space-y-4">
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-500">Estado</span>
                        <span class="px-3 py-1 rounded-full text-xs font-semibold badge-${cita.estado}">${cita.estado_display}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-500">Serviço</span>
                        <span class="text-sm font-medium text-dark">${cita.servicio}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-500">Data</span>
                        <span class="text-sm font-medium text-dark">${cita.fecha}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-500">Hora</span>
                        <span class="text-sm font-medium text-dark">${cita.hora}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-500">Duração</span>
                        <span class="text-sm font-medium text-dark">${cita.duracion} min</span>
                    </div>
                    ${(USER_ROL === 'doctora' || USER_ROL === 'admin') ? `
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-500">Paciente</span>
                        <span class="text-sm font-medium text-dark">${cita.paciente}</span>
                    </div>` : ''}
                    ${cita.notas_paciente ? `
                    <div class="border-t border-gray-100 pt-3">
                        <span class="text-sm text-gray-500 block mb-1">Notas do paciente</span>
                        <p class="text-sm text-gray-700">${cita.notas_paciente}</p>
                    </div>` : ''}
                    ${cita.notas_doctora ? `
                    <div class="border-t border-gray-100 pt-3">
                        <span class="text-sm text-gray-500 block mb-1">Notas da doutora</span>
                        <p class="text-sm text-gray-700">${cita.notas_doctora}</p>
                    </div>` : ''}
                    ${cita.estado === 'cancelada' && cita.logs && cita.logs.filter(l => l.estado_nuevo === 'cancelada' && l.motivo).length > 0 ? `
                    <div class="border-t border-gray-100 pt-3">
                        <div class="bg-red-50 border border-red-200 rounded-xl p-3">
                            <div class="flex items-center gap-2 mb-1.5">
                                <svg class="w-4 h-4 text-red-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                                <span class="text-sm font-semibold text-red-700">Motivo do cancelamento</span>
                            </div>
                            <p class="text-sm text-red-600 ml-6">${cita.logs.filter(l => l.estado_nuevo === 'cancelada' && l.motivo).pop().motivo}</p>
                        </div>
                    </div>` : ''}
                    ${cita.logs && cita.logs.length > 0 ? `
                    <div class="border-t border-gray-100 pt-3">
                        <span class="text-sm text-gray-500 block mb-2">Histórico</span>
                        <div class="space-y-1">
                            ${cita.logs.map(log => `
                                <div class="text-xs">
                                    <div class="flex items-center justify-between">
                                        <span class="text-gray-400">${log.fecha}</span>
                                        <span class="text-gray-600">${log.estado_anterior || 'Novo'} → ${log.estado_nuevo}</span>
                                    </div>
                                    ${log.motivo ? `<p class="text-gray-500 mt-0.5 ml-1 italic">${log.motivo}</p>` : ''}
                                </div>
                            `).join('')}
                        </div>
                    </div>` : ''}
                </div>
            `;

            // Acciones segun rol y estado
            let btns = '';
            if (USER_ROL === 'paciente' && cita.puede_cancelar) {
                btns += `<button onclick="accionCita('${cita.id}', 'cancelar')" class="px-5 py-2 text-sm font-medium text-red-600 border border-red-200 rounded-[25px] hover:bg-red-50 transition-colors">Cancelar Consulta</button>`;
            }
            if (USER_ROL === 'doctora' || USER_ROL === 'admin') {
                if (cita.estado === 'pendiente') {
                    btns += `<button onclick="accionCita('${cita.id}', 'confirmar')" class="px-5 py-2 text-sm font-semibold text-white bg-green-500 rounded-[25px] hover:bg-green-600 transition-colors">Confirmar</button>`;
                    btns += `<button onclick="abrirModalRechazo('${cita.id}')" class="px-5 py-2 text-sm font-medium text-red-600 border border-red-200 rounded-[25px] hover:bg-red-50 transition-colors">Rejeitar</button>`;
                }
                if (cita.estado === 'confirmada') {
                    btns += `<button onclick="accionCita('${cita.id}', 'completar')" class="px-5 py-2 text-sm font-semibold text-white bg-indigo-500 rounded-[25px] hover:bg-indigo-600 transition-colors">Concluir</button>`;
                    btns += `<button onclick="accionCita('${cita.id}', 'no-asistio')" class="px-5 py-2 text-sm font-medium text-gray-600 border border-gray-200 rounded-[25px] hover:bg-gray-50 transition-colors">Não Compareceu</button>`;
                    btns += `<button onclick="accionCita('${cita.id}', 'cancelar-doctora')" class="px-5 py-2 text-sm font-medium text-red-600 border border-red-200 rounded-[25px] hover:bg-red-50 transition-colors">Cancelar</button>`;
                }
            }
            btns += `<button onclick="cerrarModalDetalle()" class="px-5 py-2 text-sm text-gray-500 rounded-[25px] hover:text-rosa transition-colors">Fechar</button>`;
            acciones.innerHTML = btns;
        })
        .catch(err => {
            console.error('Error cargando detalle cita:', err);
            body.innerHTML = '<p class="text-red-500 text-sm text-center py-4">Erro ao carregar os dados da consulta.</p>';
        });
    };

    window.cerrarModalDetalle = function() {
        document.getElementById('modal-detalle').classList.add('hidden');
    };

    // ============================================================
    // MODAL RECHAZO
    // ============================================================
    var rechazoCitaId = null;

    window.abrirModalRechazo = function(citaId) {
        rechazoCitaId = citaId;
        document.getElementById('rechazo-motivo').value = '';
        document.getElementById('modal-rechazo').classList.remove('hidden');
    };

    window.cerrarModalRechazo = function() {
        document.getElementById('modal-rechazo').classList.add('hidden');
        rechazoCitaId = null;
    };

    window.confirmarRechazo = function() {
        var motivo = document.getElementById('rechazo-motivo').value.trim();
        if (!motivo) {
            document.getElementById('rechazo-motivo').classList.add('border-red-400');
            document.getElementById('rechazo-motivo').focus();
            return;
        }
        document.getElementById('rechazo-motivo').classList.remove('border-red-400');
        var citaId = rechazoCitaId;
        cerrarModalRechazo();
        accionCita(citaId, 'cancelar-doctora', motivo);
    };

    // ============================================================
    // ACCIONES SOBRE CITAS
    // ============================================================
    var accionLabels = {
        'confirmar':       { titulo: 'Confirmando consulta',    pasos: ['Verificando disponibilidade...', 'Confirmando consulta...', 'Enviando notificação...'], exito: 'Consulta confirmada!' },
        'completar':       { titulo: 'Concluindo consulta',    pasos: ['Registando consulta...', 'Atualizando histórico...', 'Finalizando...'], exito: 'Consulta concluída!' },
        'no-asistio':      { titulo: 'Registando ausência', pasos: ['Verificando consulta...', 'Marcando como não compareceu...', 'Atualizando registo...'], exito: 'Ausência registada' },
        'cancelar':        { titulo: 'Cancelando consulta',     pasos: ['Processando cancelamento...', 'Liberando horário...', 'Enviando notificação...'], exito: 'Consulta cancelada' },
        'cancelar-doctora':{ titulo: 'Rejeitando consulta',     pasos: ['Processando rejeição...', 'Liberando horário...', 'Notificando o paciente...'], exito: 'Consulta rejeitada' },
    };

    window.accionCita = function(citaId, accion, motivo) {
        const urlMap = {
            'confirmar': URLS.confirmar,
            'completar': URLS.completar,
            'no-asistio': URLS.noAsistio,
            'cancelar': URLS.cancelar,
            'cancelar-doctora': URLS.cancelarDoctora,
        };

        const url = urlMap[accion] + citaId + '/';
        var labels = accionLabels[accion] || { titulo: 'Processando...', pasos: ['Processando...','Processando...','Processando...'], exito: 'Pronto!' };

        // Mostrar loading con textos personalizados
        loadingBarra.style.width = '0%';
        loadingTitulo.textContent = labels.titulo;
        loadingSubtitulo.textContent = labels.pasos[0];
        loadingEl.classList.remove('hidden');
        setTimeout(function(){ if(!loadingEl.classList.contains('hidden')){ loadingBarra.style.width='30%'; loadingSubtitulo.textContent=labels.pasos[0]; } }, 200);
        setTimeout(function(){ if(!loadingEl.classList.contains('hidden')){ loadingBarra.style.width='55%'; loadingSubtitulo.textContent=labels.pasos[1]; } }, 700);
        setTimeout(function(){ if(!loadingEl.classList.contains('hidden')){ loadingBarra.style.width='75%'; loadingSubtitulo.textContent=labels.pasos[2]; } }, 1300);

        var fetchOpts = {
            method: 'POST',
            headers: { 'X-CSRFToken': CSRF }
        };
        if (motivo) {
            var fd = new FormData();
            fd.append('motivo', motivo);
            fd.append('csrfmiddlewaretoken', CSRF);
            fetchOpts.body = fd;
        }

        fetchJSON(url, fetchOpts)
        .then(data => {
            if (!data) { cerrarLoading(false); return; }
            if (data.success) {
                loadingBarra.style.width = '100%';
                loadingTitulo.textContent = labels.exito;
                loadingSubtitulo.textContent = 'Tudo pronto';
                setTimeout(function() {
                    loadingEl.classList.add('hidden');
                    cerrarModalDetalle();
                    if (calendar) calendar.refetchEvents();
                    mostrarNotificacion(data.message, 'success');
                }, 900);
                // Actualizar badge de citas pendientes en navbar
                if (accion === 'confirmar' || accion === 'cancelar-doctora') {
                    const badge = document.getElementById('badge-citas-pendientes');
                    if (badge) {
                        let count = parseInt(badge.textContent) || 0;
                        count = Math.max(0, count - 1);
                        if (count > 0) {
                            badge.textContent = count;
                        } else {
                            badge.remove();
                        }
                    }
                }
            } else {
                cerrarLoading(false);
                mostrarNotificacion(data.error || 'Erro ao realizar a ação.', 'error');
            }
        })
        .catch(err => {
            console.error('Error accion cita:', err);
            cerrarLoading(false);
            mostrarNotificacion(err.message || 'Erro de ligação.', 'error');
        });
    };

    // ============================================================
    // NOTIFICACIONES TOAST
    // ============================================================
    function mostrarNotificacion(mensaje, tipo) {
        const colors = {
            success: 'bg-green-50 text-green-700 border-green-200',
            error: 'bg-red-50 text-red-700 border-red-200',
        };

        const toast = document.createElement('div');
        toast.className = `fixed top-20 right-4 z-[3000] flex items-center gap-3 px-5 py-3 rounded-xl border shadow-lg text-sm font-medium transition-all duration-500 ${colors[tipo] || colors.success}`;
        toast.innerHTML = `
            <span>${mensaje}</span>
            <button onclick="this.parentElement.remove()" class="ml-2 opacity-60 hover:opacity-100">&times;</button>
        `;
        document.body.appendChild(toast);

        setTimeout(() => {
            toast.style.opacity = '0';
            setTimeout(() => toast.remove(), 500);
        }, 4000);
    }

})();
</script>
{% endblock %}