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

{% block title %}Profesionales{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto">
    <div class="flex flex-col lg:flex-row justify-between items-start lg:items-end gap-6 mb-10 lg:mb-12 reveal page-header">
        <div>
            <span class="text-primary text-[10px] uppercase font-bold tracking-[0.4em] mb-4 block">Gestión de Equipo</span>
            <h1 class="text-4xl lg:text-6xl leading-tight">Profesionales.</h1>
        </div>
        <button onclick="openDrawer()"
            class="bg-primary text-white px-8 lg:px-10 py-4 lg:py-5 rounded-sm font-bold text-xs uppercase tracking-[0.2em] hover:bg-primary-dark transition-all shadow-lift flex items-center gap-3 w-full lg:w-auto justify-center">
            <i data-lucide="plus" class="w-4 h-4"></i>
            Agregar profesional
        </button>
    </div>

    <!-- Analytics Section -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-12 mb-10 lg:mb-16 reveal stagger-1">
        <div class="lg:col-span-2 card-premium !p-6 lg:!p-10 hidden md:block">
            <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 mb-6 lg:mb-10">
                <h3 class="text-xs uppercase tracking-[0.4em] font-bold text-body-text/30">Citas este mes por profesional</h3>
                <span class="text-[10px] font-bold text-primary uppercase tracking-widest bg-primary/5 px-3 py-1 rounded-full">En tiempo real</span>
            </div>
            <div class="h-48 lg:h-64 chart-container">
                <canvas id="resourceChart"></canvas>
            </div>
        </div>
        
        <div class="space-y-6">
            <div class="card-premium !p-6 lg:!p-8 bg-primary shadow-lift group relative overflow-hidden">
                <div class="absolute -right-8 -bottom-8 w-32 h-32 bg-white/10 rounded-full group-hover:scale-110 transition-transform duration-700"></div>
                <label class="text-white/40">Total Equipo</label>
                <p class="text-4xl lg:text-5xl font-extrabold text-white mt-4">{{ resources.count }}</p>
                <p class="text-[10px] font-bold text-white/40 uppercase tracking-widest mt-6">Profesionales registrados</p>
            </div>
            <div class="card-premium !p-6 lg:!p-8">
                <label>Miembros Activos</label>
                <p class="text-4xl lg:text-5xl font-extrabold text-primary mt-4">{{ active_count }}</p>
                <div class="flex items-center gap-2 mt-6">
                    <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
                    <span class="text-[10px] font-bold text-body-text/30 uppercase tracking-widest">Disponibles para reserva</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Table Section -->
    <div class="reveal stagger-2">
        <div class="bg-white border border-accent/20 rounded-sm overflow-hidden shadow-premium">
            <table class="w-full text-left resources-table">
                <thead>
                    <tr class="border-b border-accent/10 bg-surface/30">
                        <th class="px-4 lg:px-8 py-4 lg:py-6 text-[10px] font-bold uppercase tracking-[0.2em] text-body-text/50 desktop-only">Profesional</th>
                        <th class="px-4 lg:px-8 py-4 lg:py-6 text-[10px] font-bold uppercase tracking-[0.2em] text-body-text/50 text-center desktop-only">Estado</th>
                        <th class="px-4 lg:px-8 py-4 lg:py-6 text-[10px] font-bold uppercase tracking-[0.2em] text-body-text/50 text-right">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    {% for res in resources %}
                    <tr class="hover:bg-surface/30 transition-colors border-b border-accent/5 last:border-0">
                        <td class="px-4 lg:px-8 py-4 lg:py-6" data-label="Profesional">
                            <div class="flex items-center gap-3">
                                {% if res.photo %}
                                <div class="w-10 lg:w-12 h-10 lg:h-12 rounded-full border-2 border-primary/20 overflow-hidden shrink-0">
                                    <img src="{{ res.photo.url }}" class="w-full h-full object-cover" alt="{{ res.name }}">
                                </div>
                                {% else %}
                                <div class="w-10 lg:w-12 h-10 lg:h-12 rounded-full bg-primary/10 border-2 border-primary/20 flex items-center justify-center text-primary font-black text-xs shrink-0">
                                    {{ res.initials }}
                                </div>
                                {% endif %}
                                <div>
                                    <span class="text-sm font-bold uppercase tracking-tight text-on-surface">{{ res.name }}</span>
                                    <span class="text-[10px] text-body-text/40 block lg:hidden">{{ res.email|default:"Sin email" }}</span>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 lg:px-8 py-4 lg:py-6 text-center" data-label="Estado">
                            {% if res.is_active %}
                            <span class="px-3 py-1 bg-green-50 text-green-700 text-[9px] font-bold uppercase tracking-widest rounded-sm border border-green-100">Activo</span>
                            {% else %}
                            <span class="px-3 py-1 bg-gray-50 text-gray-400 text-[9px] font-bold uppercase tracking-widest rounded-sm">Inactivo</span>
                            {% endif %}
                        </td>
                        <td class="px-4 lg:px-8 py-4 lg:py-6 text-right">
                            <div class="flex justify-end gap-2 lg:gap-3">
                                <button onclick="editResource({{ res.id }})" 
                                        class="p-2 hover:bg-primary/10 rounded-sm transition-colors text-primary" title="Editar">
                                    <i data-lucide="edit-3" class="w-4 h-4"></i>
                                </button>
                                <button onclick="deleteResource({{ res.id }})" 
                                        class="p-2 hover:bg-red-50 rounded-sm transition-colors text-red-500" title="Eliminar">
                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="4" class="px-8 py-20 text-center bg-white">
                            <i data-lucide="users" class="w-12 h-12 mx-auto mb-4 text-accent/30"></i>
                            <p class="text-sm font-bold uppercase tracking-widest text-body-text/30">No has agregado profesionales aún.</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Drawer -->
<div id="drawer" class="fixed inset-0 z-[100] invisible transition-all duration-500">
    <div id="drawerBackdrop" onclick="closeDrawer()" class="absolute inset-0 bg-on-surface/40 backdrop-blur-sm opacity-0 transition-opacity duration-500"></div>
    <div id="drawerPanel" class="absolute right-0 top-0 h-full w-full sm:max-w-md bg-surface shadow-2xl translate-x-full transition-transform duration-500 flex flex-col">
        <div class="p-5 lg:p-10 border-b border-accent/10 flex justify-between items-center bg-surface-dark/30 drawer-header">
            <h2 id="drawerTitle" class="text-lg lg:text-xl font-bold uppercase tracking-tighter">Nuevo Profesional</h2>
            <button onclick="closeDrawer()" class="text-body-text/40 hover:text-on-surface transition-colors">
                <i data-lucide="x" class="w-6 h-6"></i>
            </button>
        </div>

        <div class="flex-1 overflow-y-auto p-5 lg:p-10 drawer-content">
            <form id="resourceForm" class="space-y-6 lg:space-y-8" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="hidden" name="res_id" id="res_id">
                
                <!-- Photo Upload -->
                <div class="flex flex-col items-center gap-6 p-8 bg-white rounded-sm border border-accent/20">
                    <div id="imagePreview" class="w-32 h-32 rounded-full bg-surface border-2 border-dashed border-accent/40 flex items-center justify-center overflow-hidden">
                        <i data-lucide="user" class="w-12 h-12 text-accent/40"></i>
                    </div>
                    <label class="cursor-pointer bg-primary/10 text-primary px-6 py-2 rounded-sm text-[10px] font-black uppercase tracking-widest hover:bg-primary/20 transition-all">
                        <span>Seleccionar Foto</span>
                        <input type="file" name="photo" id="id_photo" class="hidden" accept="image/*" onchange="previewImage(this)">
                    </label>
                </div>

                <div>
                    <label for="id_name">Nombre Completo</label>
                    <input type="text" name="name" id="id_name_input" required class="w-full px-4 py-3 bg-white border border-accent/30 rounded-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-medium text-sm">
                </div>

                <div>
                    <label for="id_email_input">Email (Opcional)</label>
                    <input type="email" name="email" id="id_email_input" class="w-full px-4 py-3 bg-white border border-accent/30 rounded-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-medium text-sm">
                    <p class="text-[10px] text-body-text/40 mt-2 italic">Se usará para notificaciones de citas.</p>
                </div>

                <div class="flex items-center gap-3 py-4 p-5 bg-white rounded-sm border border-accent/20">
                    <input type="checkbox" name="is_active" id="id_is_active" checked class="w-5 h-5 accent-primary">
                    <div>
                        <p class="text-xs font-bold uppercase tracking-tighter">Profesional Activo</p>
                        <p class="text-[9px] text-body-text/40 font-bold uppercase tracking-widest">Disponible para nuevas citas.</p>
                    </div>
                </div>

                <div class="pt-10">
                    <button type="submit" class="w-full bg-on-surface text-white py-5 rounded-sm font-bold text-xs uppercase tracking-[0.2em] hover:bg-primary transition-all duration-300 shadow-lift">
                        Guardar Profesional
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const ctx = document.getElementById('resourceChart').getContext('2d');
        const stats = {{ resource_stats_json|safe }};
        
        const labels = stats.map(s => s.name);
        const data = stats.map(s => s.count);

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Citas',
                    data: data,
                    backgroundColor: '#1693a5',
                    borderRadius: 4,
                    barThickness: 32,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        backgroundColor: '#fff',
                        titleColor: '#000',
                        bodyColor: '#666',
                        borderColor: '#eee',
                        borderWidth: 1,
                        padding: 12
                    }
                },
                scales: {
                    y: { 
                        beginAtZero: true,
                        ticks: { stepSize: 1, font: { size: 10 } },
                        grid: { color: 'rgba(0,0,0,0.03)' }
                    },
                    x: {
                        grid: { display: false },
                        ticks: { font: { size: 10, weight: 'bold' } }
                    }
                }
            }
        });
    });

    const drawer = document.getElementById('drawer');
    const imagePreview = document.getElementById('imagePreview');

    function previewImage(input) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                imagePreview.innerHTML = `<img src="${e.target.result}" class="w-full h-full object-cover">`;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    function openDrawer(isEdit = false) {
        if (!isEdit) {
            document.getElementById('drawerTitle').innerText = "Nuevo Profesional";
            document.getElementById('resourceForm').reset();
            document.getElementById('res_id').value = "";
            imagePreview.innerHTML = '<i data-lucide="user" class="w-12 h-12 text-accent/40"></i>';
            lucide.createIcons();
        }
        drawer.classList.remove('invisible');
        setTimeout(() => {
            document.getElementById('drawerBackdrop').classList.add('opacity-100');
            document.getElementById('drawerPanel').classList.remove('translate-x-full');
        }, 10);
    }

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

    document.getElementById('resourceForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const res_id = document.getElementById('res_id').value;
        const url = res_id ? `/settings/resources/update/${res_id}/` : '/settings/resources/create/';
        const formData = new FormData(this);

        fetch(url, {
            method: 'POST',
            body: formData,
            headers: { 'X-CSRFToken': '{{ csrf_token }}' }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) { location.reload(); }
        });
    });

    function editResource(id) {
        fetch(`/settings/resources/get/${id}/`)
        .then(response => response.json())
        .then(data => {
            document.getElementById('drawerTitle').innerText = "Editar Profesional";
            document.getElementById('res_id').value = data.id;
            document.getElementById('id_name_input').value = data.name;
            document.getElementById('id_email_input').value = data.email;
            document.getElementById('id_is_active').checked = data.is_active;
            
            if (data.photo_url) {
                imagePreview.innerHTML = `<img src="${data.photo_url}" class="w-full h-full object-cover">`;
            } else {
                imagePreview.innerHTML = '<i data-lucide="user" class="w-12 h-12 text-accent/40"></i>';
                lucide.createIcons();
            }
            
            openDrawer(true);
        });
    }

    function deleteResource(id) {
        if (confirm("¿Estás seguro de eliminar a este profesional?")) {
            fetch(`/settings/resources/delete/${id}/`, {
                method: 'POST',
                headers: { 'X-CSRFToken': '{{ csrf_token }}' }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) { location.reload(); }
            });
        }
    }
</script>
{% endblock %}