import React, { useState, useEffect } from 'react'; import { Calendar, Clock, MapPin, Users, CheckSquare, Printer, Save, Upload, ChevronLeft, Music, Star, ListMusic, Trash2, Mail, Copy, X, FileText, Plus, Filter, Paperclip, Edit, CheckCircle, FileSpreadsheet } from 'lucide-react'; // --- UTILIDAD PARA FECHAS SEGURAS (CORRECCIÓN DE ZONA HORARIA) --- // Esta función evita que las fechas retrocedan un día al visualizarse en México/Latam const safeDate = (dateString) => { if (!dateString) return new Date(); // Si la fecha ya viene con hora (T...), la respetamos. // Si es solo YYYY-MM-DD, le agregamos T12:00:00 para fijarla al mediodía y evitar el desfase de zona horaria. if (dateString.includes('T')) return new Date(dateString); return new Date(dateString + 'T12:00:00'); }; // --- CONFIGURACIÓN DE DATOS MAESTROS --- const MUSIC_ACADEMIES = [ { name: 'Guitarra Eléctrica', teacher: 'Carlos Alcalá' }, { name: 'Guitarra Clásica', teacher: 'Carlos Alcalá' }, { name: 'Guitarra Clásica', teacher: 'Eduardo Barbosa' }, { name: 'Piano', teacher: 'Paula Rodríguez' }, { name: 'Piano', teacher: 'Natasha Cruz' }, { name: 'Piano', teacher: 'Victor García' }, { name: 'Batería', teacher: 'Jorge Arriaga' }, { name: 'Batería', teacher: 'Fernanda Chavez' }, { name: 'Violín', teacher: 'Roberto Tueme' }, { name: 'Violín', teacher: 'Bibiana Hernandez' }, { name: 'Cello', teacher: 'José Parra' }, { name: 'Canto', teacher: 'Thamar Hernandez' }, { name: 'Canto', teacher: 'Cintli Cruz' } ]; const INSTRUMENT_FAMILIES = { 'Guitarras': ['Guitarra'], 'Pianos': ['Piano'], 'Cuerdas Frotadas': ['Violín', 'Cello'], 'Percusiones': ['Batería'], 'Voces': ['Canto'] }; const DANCE_ACADEMIES = ['Ballet', 'Tap', 'Jazz']; const ENSEMBLE_TYPES = ['Solista', 'Dueto', 'Trío', 'Cuarteto', 'Grupo Pequeño', 'Grupo Completo']; const GRADES = ['Baby Steps', 'Little Steps', 'K1', 'K2', 'K3', '1° Primaria', '2° Primaria', '3° Primaria', '4° Primaria', '5° Primaria', '6° Primaria']; const SECTIONS = ['A', 'B', 'C', 'D']; const CHECKLIST_CATEGORIES = [ 'General & Administrativo', 'Producción Técnica (Audio/Luces/Backline)', 'Contenido Multimedia (Audio/Video)', 'Vestuario & Imagen', 'Cine & Guiones', 'Utilería & Escenografía', 'Logística & Transporte' ]; // --- DATOS INICIALES (FECHAS CORREGIDAS DEFINITIVAS 2026) --- const INITIAL_EVENTS = [ { id: 'evt-001', title: 'SMART Week - Recitales Instrumentales', date: '2026-05-18', // Lunes 18 de Mayo endDate: '2026-05-21', // Hasta Jueves 21 de Mayo type: 'recital', categoryMode: 'music_academy', description: 'Semana de recitales por academia (Guitarra, Piano, Violín, Canto, etc). Lunes a Jueves.', observations: '', checklist: [ { id: 'ck-1', title: 'Avisos a Padres', category: 'General & Administrativo', status: false, details: '', file: null, subItems: [] }, { id: 'ck-2', title: 'Programas de Mano', category: 'General & Administrativo', status: false, details: 'Desglosar por maestro', file: null, subItems: [] }, { id: 'ck-3', title: 'Lista Oficial de Alumnos', category: 'General & Administrativo', status: false, details: 'Actualizar con bajas y altas', file: null, subItems: [] }, { id: 'ck-4', title: 'Afinación de Pianos', category: 'Producción Técnica (Audio/Luces/Backline)', status: false, details: 'Contactar técnico externo', file: null, subItems: [] }, { id: 'ck-5', title: 'Backline (Amplis/Batería)', category: 'Producción Técnica (Audio/Luces/Backline)', status: false, details: 'Revisar cables y parches', file: null, subItems: [] }, { id: 'ck-6', title: 'Guion Técnico (Entradas/Salidas)', category: 'Producción Técnica (Audio/Luces/Backline)', status: false, details: 'Formato de flujo de alumnos', file: null, subItems: [] }, { id: 'ck-7', title: 'Maestro de Ceremonias', category: 'General & Administrativo', status: false, details: 'Definir presentadores', file: null, subItems: [] } ], program: [] }, { id: 'evt-002', title: 'Recital de Baile & Smart Rock (Cierre)', date: '2026-05-22', // Viernes 22 de Mayo type: 'concert', categoryMode: 'dance_academy', description: 'Cierre de Smart Week: Alumnos avanzados de instrumentos (Rock) y Academia de Baile.', observations: '', checklist: [ { id: 'ck-8', title: 'Diseño de Vestuarios', category: 'Vestuario & Imagen', status: false, details: 'Definir paleta de colores', file: null, subItems: [] }, { id: 'ck-9', title: 'Medidas de Alumnos', category: 'Vestuario & Imagen', status: false, details: 'Tabla de tallas', file: null, subItems: [] }, { id: 'ck-10', title: 'Edición de Canciones', category: 'Contenido Multimedia (Audio/Video)', status: false, details: 'Cortes para coreografías', file: null, subItems: [] }, { id: 'ck-11', title: 'Edición de Videos de Fondo', category: 'Contenido Multimedia (Audio/Video)', status: false, details: 'Visuales pantalla LED', file: null, subItems: [] }, { id: 'ck-12', title: 'Renta de Audio e Iluminación', category: 'Producción Técnica (Audio/Luces/Backline)', status: false, details: 'Cotizar proveedor', file: null, subItems: [] }, { id: 'ck-13', title: 'Guion Técnico (Entradas/Salidas)', category: 'Producción Técnica (Audio/Luces/Backline)', status: false, details: 'Vital para cambios rápidos', file: null, subItems: [] }, { id: 'ck-14', title: 'Lista Oficial de Alumnos', category: 'General & Administrativo', status: false, details: '', file: null, subItems: [] }, { id: 'ck-15', title: 'Venta de Boletos', category: 'Logística & Transporte', status: false, details: 'Asignación de asientos', file: null, subItems: [] } ], program: [] }, { id: 'evt-003', title: 'Largometraje en Cines', date: '2026-05-28', // Jueves 28 de Mayo type: 'cinema', categoryMode: 'grade', description: 'Proyección del largometraje escolar en sala de cine.', observations: '', checklist: [ { id: 'ck-16', title: 'Guion Literario', category: 'Cine & Guiones', status: false, details: 'Subir PDF final', file: null, subItems: [] }, { id: 'ck-17', title: 'Plan de Rodaje', category: 'Cine & Guiones', status: false, details: 'Calendario de filmación', file: null, subItems: [] }, { id: 'ck-18', title: 'Lista de Escenas', category: 'Cine & Guiones', status: false, details: 'Breakdown por locación', file: null, subItems: [] }, { id: 'ck-19', title: 'Edición de Video (Película)', category: 'Contenido Multimedia (Audio/Video)', status: false, details: 'Post-producción', file: null, subItems: [] }, { id: 'ck-20', title: 'Venta de Boletos (Cine)', category: 'Logística & Transporte', status: false, details: 'Coordinar con sala de cine', file: null, subItems: [] }, { id: 'ck-21', title: 'Lista Oficial de Alumnos', category: 'General & Administrativo', status: false, details: 'Para créditos', file: null, subItems: [] }, { id: 'ck-22', title: 'Guion Técnico (Protocolo)', category: 'Producción Técnica (Audio/Luces/Backline)', status: false, details: 'Alfombra roja', file: null, subItems: [] } ], program: [] }, { id: 'evt-004', title: 'Festival Parents Blast', date: '2026-06-11', // Jueves 11 de Junio type: 'festival', categoryMode: 'grade', description: 'Festival principal (Baby Steps a Primaria).', observations: '', checklist: [ { id: 'ck-23', title: 'Renta de Teatro', category: 'Producción Técnica (Audio/Luces/Backline)', status: false, details: 'Anticipo y contrato', file: null, subItems: [] }, { id: 'ck-24', title: 'Edición de Canciones (Tracks)', category: 'Contenido Multimedia (Audio/Video)', status: false, details: 'Pistas para grados', file: null, subItems: [] }, { id: 'ck-25', title: 'Edición de Videos (Proyecciones)', category: 'Contenido Multimedia (Audio/Video)', status: false, details: 'Loops de fondo', file: null, subItems: [] }, { id: 'ck-26', title: 'Diseño de Vestuarios', category: 'Vestuario & Imagen', status: false, details: 'Temática por grado', file: null, subItems: [] }, { id: 'ck-27', title: 'Medidas de Alumnos', category: 'Vestuario & Imagen', status: false, details: 'Toma general', file: null, subItems: [] }, { id: 'ck-28', title: 'Guion Técnico (Entradas/Salidas)', category: 'Producción Técnica (Audio/Luces/Backline)', status: false, details: 'Formato maestro', file: null, subItems: [] }, { id: 'ck-29', title: 'Utilería General', category: 'Utilería & Escenografía', status: false, details: 'Props por grado', file: null, subItems: [] }, { id: 'ck-30', title: 'Transporte de Alumnos', category: 'Logística & Transporte', status: false, details: 'Autobuses', file: null, subItems: [] }, { id: 'ck-31', title: 'Venta de Boletos', category: 'Logística & Transporte', status: false, details: 'Taquilla', file: null, subItems: [] }, { id: 'ck-32', title: 'Lista Oficial de Alumnos', category: 'General & Administrativo', status: false, details: 'Listas de cotejo', file: null, subItems: [] } ], program: [] }, { id: 'evt-005', title: 'Graduaciones', date: '2026-06-25', // Jueves 25 de Junio type: 'graduation', categoryMode: 'grade', description: 'Ceremonia de fin de cursos.', observations: '', checklist: [ { id: 'ck-33', title: 'Diplomas y Reconocimientos', category: 'General & Administrativo', status: false, details: 'Revisar ortografía de nombres', file: null, subItems: [] }, { id: 'ck-34', title: 'Lista Oficial de Graduados', category: 'General & Administrativo', status: false, details: '', file: null, subItems: [] }, { id: 'ck-35', title: 'Maestro de Ceremonias', category: 'General & Administrativo', status: false, details: 'Guion solemne', file: null, subItems: [] }, { id: 'ck-36', title: 'Guion Técnico (Protocolo)', category: 'Producción Técnica (Audio/Luces/Backline)', status: false, details: 'Orden de paso', file: null, subItems: [] }, { id: 'ck-37', title: 'Montaje de Escenario', category: 'Utilería & Escenografía', status: false, details: 'Mesa de honor, pódium', file: null, subItems: [] } ], program: [] } ]; // --- COMPONENTES AUXILIARES --- const Card = ({ children, className = "" }) => (

{children}

); const Badge = ({ type }) => { const styles = { recital: 'bg-purple-100 text-purple-700', concert: 'bg-pink-100 text-pink-700', cinema: 'bg-blue-100 text-blue-700', festival: 'bg-amber-100 text-amber-700', graduation: 'bg-emerald-100 text-emerald-700', default: 'bg-slate-100 text-slate-700' }; return ( {type} ); }; // --- MODAL DE PROPUESTA SMART WEEK (ACTUALIZADO 2026 - COMPACTO EDITABLE) --- const SmartWeekProposalModal = ({ onClose }) => { const handlePrint = () => { window.print(); }; return (

{/* Header (Solo pantalla) */}

Propuesta de Horarios (Mayo 2026)

Tip: Haz clic en el texto para editar antes de imprimir

{/* CONTENIDO IMPRIMIBLE - TAMAÑO CARTA */}

{/* ENCABEZADO */}

SMART

North Hill

SMART CENTER - Eventos 2026

Propuesta SMART WEEK

{/* GRID COMPACTO DE HORARIOS (2 COLUMNAS) */}

{/* LUNES 18 */}

Lunes 18 de Mayo - Guitarras

5:00 PM	Guitarra Clásica - Nivel Inicial
6:30 PM	Guitarra Clásica - Nivel Intermedio
8:00 PM	Guitarra Clásica & Eléctrica - Avanzado

{/* MARTES 19 */}

Martes 19 de Mayo - Pianos

5:00 PM	Piano - Inicial (Baby/Little Steps)
6:30 PM	Piano - Intermedio (Primaria Menor)
8:00 PM	Piano - Avanzado (Primaria Mayor)

{/* MIERCOLES 20 */}

Miércoles 20 - Cuerdas

5:00 PM	Violín & Cello - Nivel Inicial
6:30 PM	Violín & Cello - Nivel Intermedio
8:00 PM	Ensamble de Cuerdas Avanzado

{/* JUEVES 21 */}

Jueves 21 - Voces y Ritmo

5:00 PM	Canto & Batería - Nivel Inicial
6:30 PM	Canto & Batería - Nivel Intermedio
8:00 PM	Ensamble Vocal y Percusiones Av.

{/* VIERNES 22 - FULL WIDTH */}

Viernes 22 de Mayo - GRAN CIERRE

6:00 PM	Recital de Academias de Baile (Ballet, Tap, Jazz)
8:00 PM	CONCIERTO SMART ROCK (Ensamble Avanzado)

{/* NOTA EDITABLE COMPACTA */}

NOTA: Esta programación es una propuesta tentativa. Los horarios y conformación de ensambles pueden variar según el avance técnico de los alumnos. Agradecemos su flexibilidad.

North Hill | SMART CENTER | {safeDate(new Date().toISOString()).getFullYear()}

); }; // --- MODAL DE CORREO --- const EmailDraftModal = ({ event, rehearsals, onClose }) => { const eventRehearsals = rehearsals.filter(r => r.relatedEventId === event.id).sort((a,b) => (a.date + a.time).localeCompare(b.date + b.time)); const generateEmailText = () => { const header = `ASUNTO: Información Importante - ${event.title}\n\n`; const greeting = `Estimados Padres de Familia y Alumnos del Colegio SMART,\n\nEsperando que se encuentren muy bien, les hacemos llegar los detalles y la programación de ensayos para nuestro próximo evento: "${event.title}".\n\n`; let schedule = `📅 CALENDARIO DE ENSAYOS:\n`; if (eventRehearsals.length === 0) schedule += `(Aún no hay ensayos programados en el sistema)\n`; else eventRehearsals.forEach(r => { schedule += `🔹 ${r.title}\n Fecha: ${safeDate(r.date).toLocaleDateString('es-MX', { weekday: 'long', day: 'numeric', month: 'long' })}\n Hora: ${r.time}\n Lugar: ${r.location}\n Maestro: ${r.teacher || 'Titular'}\n\n`; }); const notes = event.observations ? `📝 OBSERVACIONES IMPORTANTES:\n${event.observations}\n\n` : ''; const closing = `Agradecemos de antemano su apoyo con la puntualidad y asistencia, elementos clave para el éxito de nuestras presentaciones.\n\nAtentamente,\nCoordinación de Eventos SMART`; return header + greeting + schedule + notes + closing; }; const [text, setText] = useState(generateEmailText()); const [copied, setCopied] = useState(false); const handleCopy = () => { navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 2000); }; return (

Borrador de Aviso

Este texto se ha generado automáticamente con los ensayos programados. Puedes editarlo aquí antes de copiarlo.

setText(e.target.value)} /></div>
                <div className="p-4 border-t bg-slate-50 rounded-b-xl flex justify-end gap-2"><button onClick={onClose} className="px-4 py-2 text-slate-600 hover:bg-slate-200 rounded-lg text-sm font-medium transition-colors">Cancelar</button><button onClick={handleCopy} className={`px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 transition-all ${copied ? 'bg-green-600 text-white' : 'bg-indigo-600 text-white hover:bg-indigo-700'}`}>{copied ? <CheckCircle size={16} /> : <Copy size={16} />}{copied ? '¡Copiado!' : 'Copiar Texto'}</button></div>
            </div>
        </div>
    );
};

// --- MODAL DE DETALLE DE ÍTEM (ChecklistItemModal) ---
const ChecklistItemModal = ({ item, onSave, onClose, onDelete }) => {
    const [formData, setFormData] = useState({ ...item, subItems: item.subItems || [] });
    const [subTaskInput, setSubTaskInput] = useState('');
    const [isCustomInput, setIsCustomInput] = useState(false);
    
    const handleFileChange = (e) => { if (e.target.files[0]) setFormData({ ...formData, file: e.target.files[0].name }); };
    
    const addSubItem = () => { if (!subTaskInput.trim()) return; const newSubItem = { id: Date.now().toString(), label: subTaskInput, completed: false }; setFormData({ ...formData, subItems: [...formData.subItems, newSubItem] }); setSubTaskInput(''); setIsCustomInput(false); };
    
    const toggleSubItem = (id) => { setFormData({ ...formData, subItems: formData.subItems.map(sub => sub.id === id ? { ...sub, completed: !sub.completed } : sub) }); };
    
    const deleteSubItem = (id) => { setFormData({ ...formData, subItems: formData.subItems.filter(sub => sub.id !== id) }); };
    
    const completedSubs = formData.subItems.filter(s => s.completed).length;
    const totalSubs = formData.subItems.length;
    const progress = totalSubs > 0 ? Math.round((completedSubs / totalSubs) * 100) : 0;
    
    return (
        <div className="fixed inset-0 bg-black/50 z-[60] flex items-center justify-center p-4">
            <div className="bg-white w-full max-w-lg rounded-xl shadow-2xl flex flex-col max-h-[90vh]">
                <div className="p-4 border-b flex justify-between items-center bg-slate-50 rounded-t-xl"><h3 className="font-bold text-slate-800">Detalles del Requerimiento</h3><button onClick={onClose} className="text-slate-400 hover:text-slate-600"><X size={20}/></button></div>
                <div className="p-6 overflow-y-auto space-y-5">
                    <div className="grid grid-cols-2 gap-4"><div><label className="block text-xs font-bold uppercase text-slate-500 mb-1">Título</label><input type="text" className="w-full p-2 border rounded text-sm font-bold text-slate-800" value={formData.title} onChange={(e) => setFormData({...formData, title: e.target.value})} /></div><div><label className="block text-xs font-bold uppercase text-slate-500 mb-1">Categoría</label><select className="w-full p-2 border rounded text-sm bg-white" value={formData.category} onChange={(e) => setFormData({...formData, category: e.target.value})}>{CHECKLIST_CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}</select></div></div>
                    <div className="bg-slate-50 p-4 rounded-lg border border-slate-200"><label className="block text-xs font-bold uppercase text-slate-700 mb-2 flex justify-between"><span>Seguimiento / Desglose</span><span className="text-indigo-600">{progress}% Completado</span></label><div className="flex gap-2 mb-3">{isCustomInput ? (<input type="text" className="flex-1 p-2 border rounded text-sm" placeholder="Nombre..." value={subTaskInput} onChange={(e) => setSubTaskInput(e.target.value)} autoFocus />) : (<select className="flex-1 p-2 border rounded text-sm bg-white" value={subTaskInput} onChange={(e) => { if (e.target.value === 'NEW') { setIsCustomInput(true); setSubTaskInput(''); } else { setSubTaskInput(e.target.value); } }}><option value="">Seleccionar Maestro / Área...</option><optgroup label="Academias de Música">{MUSIC_ACADEMIES.map((ac, idx) => (<option key={idx} value={`${ac.name} - ${ac.teacher}`}>{ac.name} - {ac.teacher}</option>))}</optgroup><optgroup label="Academias de Baile">{DANCE_ACADEMIES.map((d, idx) => (<option key={`d-${idx}`} value={`Baile - ${d}`}>{d}</option>))}</optgroup><option value="NEW" className="font-bold text-indigo-600">+ Agregar Nuevo...</option></select>)}{isCustomInput && (<button onClick={() => setIsCustomInput(false)} className="px-2 text-slate-400 hover:text-slate-600"><X size={16}/></button>)}<button onClick={addSubItem} className="bg-indigo-600 text-white px-3 py-2 rounded text-sm hover:bg-indigo-700 disabled:opacity-50" disabled={!subTaskInput}><Plus size={16} /></button></div><div className="space-y-2 max-h-[150px] overflow-y-auto">{formData.subItems.map(sub => (<div key={sub.id} className="flex items-center justify-between bg-white p-2 rounded border border-slate-100"><div className="flex items-center gap-2"><input type="checkbox" checked={sub.completed} onChange={() => toggleSubItem(sub.id)} className="w-4 h-4 text-indigo-600 rounded cursor-pointer"/><span className={`text-sm ${sub.completed ? 'text-slate-400 line-through' : 'text-slate-700'}`}>{sub.label}</span></div><button onClick={() => deleteSubItem(sub.id)} className="text-slate-300 hover:text-red-500"><Trash2 size={14} /></button></div>))}</div></div>
                    <div><label className="block text-xs font-bold uppercase text-slate-500 mb-1">Notas / Detalles</label><textarea className="w-full p-3 border rounded text-sm min-h-[100px]" value={formData.details} onChange={(e) => setFormData({...formData, details: e.target.value})} /></div>
                    <div><label className="block text-xs font-bold uppercase text-slate-500 mb-1">Archivo Adjunto</label><div className="flex items-center gap-2"><label className="flex items-center gap-2 px-3 py-2 border border-dashed border-indigo-300 rounded cursor-pointer bg-indigo-50 hover:bg-indigo-100 text-indigo-700 text-sm"><Paperclip size={16} />{formData.file ? 'Cambiar Archivo' : 'Adjuntar Archivo'}<input type="file" className="hidden" onChange={handleFileChange} /></label>{formData.file && <span className="text-sm text-slate-600 truncate bg-slate-100 px-2 py-1 rounded">{formData.file}</span>}</div></div>
                    <div className="flex items-center gap-2 pt-2 border-t border-slate-100"><input type="checkbox" id="modal-status" checked={formData.status} onChange={(e) => setFormData({...formData, status: e.target.checked})} className="w-5 h-5 text-indigo-600 rounded focus:ring-indigo-500" /><label htmlFor="modal-status" className="text-sm font-bold text-slate-700">Marcar Ítem Principal como COMPLETADO</label></div>
                </div>
                <div className="p-4 border-t bg-slate-50 rounded-b-xl flex justify-between"><button onClick={() => onDelete(formData.id)} className="text-red-500 text-sm hover:underline flex items-center gap-1"><Trash2 size={14}/> Eliminar</button><div className="flex gap-2"><button onClick={onClose} className="px-4 py-2 text-slate-600 hover:bg-slate-200 rounded-lg text-sm font-medium">Cancelar</button><button onClick={() => onSave(formData)} className="px-4 py-2 bg-indigo-600 text-white hover:bg-indigo-700 rounded-lg text-sm font-medium">Guardar Cambios</button></div></div>
            </div>
        </div>
    );
};

// --- COMPONENTE: MODAL DE IMPRESIÓN ---
const PrintModal = ({ mode, events, rehearsals, targetEventId, onClose }) => {
    const targetEvent = mode === 'single' ? events.find(e => e.id === targetEventId) : null;
    
    useEffect(() => { const timer = setTimeout(() => { window.print(); }, 500); return () => clearTimeout(timer); }, []);
    
    return (
        <div className="fixed inset-0 bg-black/50 z-[100] flex items-center justify-center p-4 print:p-0 print:bg-white print:absolute print:inset-0">
            <div className="bg-white w-full max-w-4xl max-h-[90vh] overflow-y-auto rounded-xl shadow-2xl print:shadow-none print:w-full print:max-w-none print:max-h-none print:rounded-none print:overflow-visible">
                <div className="p-4 border-b flex justify-between items-center bg-slate-50 print:hidden sticky top-0 z-10"><h2 className="font-bold text-slate-700">Vista Previa de Impresión</h2><div className="flex gap-2"><button onClick={() => window.print()} className="bg-indigo-600 text-white px-4 py-2 rounded text-sm hover:bg-indigo-700 flex items-center gap-2"><Printer size={16} /> Imprimir</button><button onClick={onClose} className="bg-white border border-slate-300 text-slate-700 px-4 py-2 rounded text-sm hover:bg-slate-50">Cerrar</button></div></div>
                
                {/* REPORTE GENERAL (Resumen de progreso) */}
                {mode === 'general' && (<div className="p-8 print:p-0 font-serif text-slate-900 mx-auto max-w-[21.59cm] min-h-[27.94cm] bg-white"><div className="text-center border-b-4 border-indigo-900 pb-6 mb-8"><h1 className="text-3xl font-bold uppercase tracking-widest text-indigo-900">North Hill</h1><h2 className="text-xl font-bold mt-2 text-slate-700">Reporte Maestro de Producción</h2><p className="text-sm text-slate-500 mt-2">Generado el: {safeDate(new Date().toISOString()).toLocaleString()}</p></div><div className="space-y-8">{events.sort((a,b) => new Date(a.date) - new Date(b.date)).map(evt => { const totalItems = Array.isArray(evt.checklist) ? evt.checklist.length : 0; const completedItems = Array.isArray(evt.checklist) ? evt.checklist.filter(i => i.status).length : 0; const progress = totalItems > 0 ? Math.round((completedItems / totalItems) * 100) : 0; const evtRehearsals = rehearsals.filter(r => r.relatedEventId === evt.id).length; return (<div key={evt.id} className="break-inside-avoid border border-slate-200 rounded-lg p-4 mb-4"><div className="flex justify-between items-start border-b border-slate-100 pb-2 mb-2"><div><h3 className="font-bold text-lg text-indigo-900">{evt.title}</h3><p className="text-sm text-slate-600 flex items-center gap-2"><Calendar size={12} /> {safeDate(evt.date).toLocaleDateString('es-MX', { weekday: 'long', day: 'numeric', month: 'long' })}</p></div><div className="text-right"><div className="text-2xl font-bold text-slate-800">{progress}%</div><div className="text-[10px] uppercase tracking-wider text-slate-500">Progreso</div></div></div><div className="grid grid-cols-2 gap-4 text-sm"><div><strong className="text-slate-700 block mb-1">Pendientes Clave:</strong><ul className="list-disc list-inside text-xs text-slate-600">{Array.isArray(evt.checklist) && evt.checklist.filter(i => !i.status).slice(0, 3).map(item => (<li key={item.id} className="truncate">{item.title}</li>))}{Array.isArray(evt.checklist) && evt.checklist.filter(i => !i.status).length === 0 && (<li className="text-green-600 font-bold">¡Todo listo!</li>)}</ul></div><div><strong className="text-slate-700 block mb-1">Estado:</strong><p className="text-xs text-slate-600">Ensayos: <strong>{evtRehearsals}</strong></p></div></div></div>); })}</div></div>)}
                
                {/* EVENTO INDIVIDUAL */}
                {mode === 'single' && targetEvent && (<div className="p-8 print:p-0 font-serif text-slate-900 mx-auto max-w-[21.59cm] min-h-[27.94cm] bg-white"><div className="text-center border-b-2 border-slate-800 pb-4 mb-6"><h1 className="text-2xl font-bold uppercase tracking-widest">North Hill</h1><h2 className="text-xl font-bold mt-2 text-indigo-900">{targetEvent.title}</h2><p className="text-sm text-slate-600 mt-1">Fecha: {safeDate(targetEvent.date).toLocaleDateString('es-MX', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}</p></div><div className="grid grid-cols-2 gap-8 mb-6"><div><h3 className="font-bold border-b border-slate-300 mb-2 uppercase text-xs tracking-wide">Información</h3><p className="text-sm text-justify leading-relaxed mb-4">{targetEvent.description}</p><h3 className="font-bold border-b border-slate-300 mb-2 uppercase text-xs tracking-wide">Observaciones</h3><div className="text-sm whitespace-pre-line bg-slate-50 p-2 border border-slate-100 print:bg-transparent print:border-none print:p-0">{targetEvent.observations || "Sin observaciones."}</div></div><div><h3 className="font-bold border-b border-slate-300 mb-2 uppercase text-xs tracking-wide">Requerimientos</h3><ul className="text-sm space-y-1 mb-4">{Array.isArray(targetEvent.checklist) && targetEvent.checklist.map((item) => (<li key={item.id} className="flex justify-between items-center border-b border-dotted border-slate-200 pb-1 last:border-0"><span className="capitalize truncate w-2/3">{item.title}</span><span className={`font-mono font-bold text-xs ${item.status ? 'text-black' : 'text-slate-300'}`}>[{item.status ? 'LISTO' : '___'}]</span></li>))}</ul></div></div></div>)}

{/* NUEVO: LISTA MAESTRA COMPLETA (Optimizada para impresión) */}
                {mode === 'master_list' && (
                    <div className="p-8 print:p-0 font-serif text-slate-900 mx-auto max-w-[21.59cm] min-h-[27.94cm] bg-white">
                        <div className="text-center border-b-4 border-indigo-900 pb-4 mb-6">
                            <h1 className="text-3xl font-bold uppercase tracking-widest text-indigo-900">North Hill</h1>
                            <h2 className="text-xl font-bold mt-2 text-slate-700">Lista Maestra de Requerimientos</h2>
                            <p className="text-xs text-slate-500 mt-1 uppercase tracking-wide">SMART CENTER | Producción General 2026</p>
                        </div>
                        
                        {/* Layout de columnas estilo periódico: El contenido fluye automáticamente */}
                        <div className="columns-2 md:columns-3 gap-6 text-sm">
                            {CHECKLIST_CATEGORIES.map(cat => {
                                const categoryItems = [];
                                events.forEach(ev => { 
                                    if(Array.isArray(ev.checklist)) { 
                                        ev.checklist.filter(i => i.category === cat).forEach(item => {
                                            categoryItems.push({ ...item, eventTitle: ev.title }); 
                                        }); 
                                    } 
                                });
                                
                                if (categoryItems.length === 0) return null;

return (
                                    <div key={cat} className="break-inside-avoid mb-6 border border-slate-300 rounded-lg p-3 bg-slate-50">
                                        <h3 className="font-bold text-indigo-900 border-b border-indigo-200 pb-1 mb-2 text-xs uppercase tracking-wide">{cat}</h3>
                                        <ul className="space-y-2">
                                            {categoryItems.map(item => (
                                                <li key={`${item.id}-${item.eventTitle}`} className="flex items-start gap-2">
                                                    <span className={`mt-1 w-3 h-3 border border-slate-400 rounded-sm flex-shrink-0 ${item.status ? 'bg-black' : 'bg-white'}`}></span>
                                                    <div className="leading-tight">
                                                        <span className={`block font-medium ${item.status ? 'line-through text-slate-400' : 'text-slate-800'}`}>{item.title}</span>
                                                        <span className="text-[10px] text-slate-500 italic block">{item.eventTitle}</span>
                                                    </div>
                                                </li>
                                            ))}
                                        </ul>
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
};

// --- VISTA: LISTA MAESTRA (MasterChecklistView) ---
const MasterChecklistView = ({ events, onToggleStatus, onOpenItem, onPrintList }) => {
    const [filterCategory, setFilterCategory] = useState('Todas');
    const [filterStatus, setFilterStatus] = useState('Todos');
    
    let allItems = [];
    events.forEach(ev => { if(Array.isArray(ev.checklist)) { ev.checklist.forEach(item => { allItems.push({ ...item, eventTitle: ev.title, eventDate: ev.date, eventId: ev.id }); }); } });
    
    if (filterCategory !== 'Todas') allItems = allItems.filter(i => i.category === filterCategory);
    if (filterStatus === 'Pendientes') allItems = allItems.filter(i => !i.status); else if (filterStatus === 'Listos') allItems = allItems.filter(i => i.status);
    
    const groupedItems = allItems.reduce((acc, item) => { if (!acc[item.category]) acc[item.category] = []; acc[item.category].push(item); return acc; }, {});
    
    return (
        <div className="space-y-6 animate-in fade-in">
            <div className="flex flex-col md:flex-row justify-between items-center gap-4 bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
                <div>
                    <h2 className="text-xl font-bold text-slate-800 flex items-center gap-2"><CheckSquare className="text-indigo-600" /> Lista Maestra de Requerimientos</h2>
                    <p className="text-sm text-slate-500">Visualiza el progreso de producción.</p>
                </div>
                <div className="flex flex-wrap gap-2 items-center">
                    <button onClick={onPrintList} className="bg-indigo-600 text-white px-3 py-2 rounded text-sm hover:bg-indigo-700 flex items-center gap-2 font-medium">
                        <Printer size={16} /> Imprimir Lista
                    </button>
                    <div className="h-6 w-px bg-slate-300 mx-1"></div>
                    <select className="p-2 border rounded text-sm bg-slate-50" value={filterCategory} onChange={(e) => setFilterCategory(e.target.value)}><option value="Todas">Todas las Categorías</option>{CHECKLIST_CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}</select>
                    <select className="p-2 border rounded text-sm bg-slate-50" value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)}><option value="Todos">Todos los Estados</option><option value="Pendientes">Solo Pendientes</option><option value="Listos">Solo Completados</option></select>
                </div>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">{Object.keys(groupedItems).sort().map(cat => (<div key={cat} className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden flex flex-col"><div className="bg-slate-100 px-4 py-3 border-b border-slate-200 flex justify-between items-center"><h3 className="font-bold text-slate-700 text-sm">{cat}</h3><span className="text-xs bg-slate-200 text-slate-600 px-2 py-0.5 rounded-full font-bold">{groupedItems[cat].length}</span></div><div className="p-2 overflow-y-auto max-h-[400px] flex-1">{groupedItems[cat].map(item => (<div key={item.id} className={`p-3 mb-2 rounded border border-slate-100 transition-colors ${item.status ? 'bg-green-50' : 'bg-white hover:bg-slate-50'}`}><div className="flex items-start gap-3"><input type="checkbox" checked={item.status} onChange={() => onToggleStatus(item.eventId, item.id)} className="mt-1 w-4 h-4 text-indigo-600 rounded cursor-pointer"/><div className="flex-1 cursor-pointer" onClick={() => onOpenItem(item.eventId, item)}><p className={`text-sm font-medium ${item.status ? 'text-slate-400 line-through' : 'text-slate-800'}`}>{item.title}</p><p className="text-[10px] text-indigo-600 font-bold uppercase mt-1">{item.eventTitle}</p></div></div></div>))}</div></div>))}</div>
        </div>
    );
};

// --- EVENT DETAIL VIEW ---
const EventDetailView = ({ 
  event, 
  rehearsals, 
  onBack, 
  onUpdateObservations, 
  onUpdateChecklistItem,
  onAddChecklistItem,
  onDeleteChecklistItem,
  onAddRehearsal, 
  onDeleteRehearsal,
  onAddProgramItem,
  onDeleteProgramItem,
  onPrint,
  onGenerateEmail
}) => {
  const [activeTab, setActiveTab] = useState('checklist');
  const [editingItem, setEditingItem] = useState(null);
  const [programFilter, setProgramFilter] = useState('all');
  const [showProposal, setShowProposal] = useState(false); // Estado para el modal de propuesta

const eventRehearsals = rehearsals.filter(r => r.relatedEventId === event.id);
  const [newRehearsal, setNewRehearsal] = useState({ date: event.date, time: '10:00', groupName: '', subGroup: '', location: 'Salón de Música', teacher: '' });
  const [newProgramItem, setNewProgramItem] = useState({ pieceName: '', performers: '', academy: '' });

useEffect(() => {
    if (event.categoryMode === 'music_academy') {
        const first = MUSIC_ACADEMIES[0];
        setNewRehearsal(prev => ({...prev, groupName: `${first.name} - ${first.teacher}`, teacher: first.teacher, subGroup: '' }));
        setNewProgramItem(prev => ({...prev, academy: `${first.name} - ${first.teacher}`}));
    } else if (event.categoryMode === 'dance_academy') {
        setNewRehearsal(prev => ({...prev, groupName: DANCE_ACADEMIES[0], subGroup: ENSEMBLE_TYPES[0] }));
        setNewProgramItem(prev => ({...prev, academy: DANCE_ACADEMIES[0]}));
    } else {
        setNewRehearsal(prev => ({...prev, groupName: GRADES[0], subGroup: SECTIONS[0] }));
        setNewProgramItem(prev => ({...prev, academy: GRADES[0]}));
    }
  }, [event.categoryMode]);

const handleAddProgramSubmit = (e) => {
      e.preventDefault();
      if(!newProgramItem.pieceName) return;
      onAddProgramItem(event.id, newProgramItem);
      setNewProgramItem({...newProgramItem, pieceName: '', performers: ''});
  };

const createNewChecklistItem = () => {
    const newItem = { id: Date.now().toString(), title: 'Nuevo Requerimiento', category: 'General & Administrativo', status: false, details: '', file: null, subItems: [] };
    onAddChecklistItem(event.id, newItem);
    setEditingItem(newItem);
  };

const filteredProgram = getFilteredProgramItems();
  const uniqueAcademiesInProgram = Array.from(new Set(filteredProgram.map(i => i.academy)));

return (
    <div className="animate-in fade-in slide-in-from-bottom-4 duration-300">
      <button onClick={onBack} className="flex items-center text-slate-500 hover:text-slate-800 mb-4 transition-colors">
        <ChevronLeft size={16} /> Volver al Tablero
      </button>

{/* Header del Evento */}
      <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 mb-6">
        <div className="flex flex-col md:flex-row justify-between items-start gap-4">
            <div>
                <Badge type={event.type} />
                <h1 className="text-3xl font-bold text-slate-900 mt-2">{event.title}</h1>
                <p className="text-slate-500 flex items-center gap-2 mt-1">
                    <Clock size={16} /> 
                    {safeDate(event.date).toLocaleDateString('es-MX', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}
                    {event.endDate && ` al ${safeDate(event.endDate).toLocaleDateString('es-MX', { day: 'numeric', month: 'long' })}`}
                </p>
            </div>
            <div className="flex flex-wrap gap-2">
                {/* BOTÓN PROPUESTA SOLO PARA SMART WEEK */}
                {event.id === 'evt-001' && (
                    <button onClick={() => setShowProposal(true)} className="flex items-center gap-2 bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors text-xs font-bold">
                        <FileSpreadsheet size={16} /> Propuesta Horarios
                    </button>
                )}
                <button onClick={onGenerateEmail} className="flex items-center gap-2 bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 transition-colors text-xs font-bold">
                    <Mail size={16} /> AVISO
                </button>
                <button onClick={onPrint} className="flex items-center gap-2 bg-slate-800 text-white px-4 py-2 rounded-lg hover:bg-slate-700 transition-colors text-xs font-bold">
                    <Printer size={16} /> IMPRIMIR EVENTO
                </button>
            </div>
        </div>
        <div className="mt-4">
             <label className="block text-xs font-bold uppercase text-slate-400 mb-1">Observaciones Generales</label>
             <textarea className="w-full border border-slate-300 rounded-lg p-3 text-sm focus:ring-2 focus:ring-indigo-500 outline-none" rows="2" value={event.observations} onChange={(e) => onUpdateObservations(event.id, e.target.value)} />
        </div>
      </div>

{/* Tabs */}
      <div className="flex gap-4 mb-4 border-b border-slate-200 overflow-x-auto">
          <button onClick={() => setActiveTab('checklist')} className={`pb-2 px-4 font-medium text-sm whitespace-nowrap transition-colors ${activeTab === 'checklist' ? 'text-indigo-600 border-b-2 border-indigo-600' : 'text-slate-500 hover:text-slate-700'}`}>
            <CheckSquare size={14} className="inline mr-2"/>Checklist & Producción
          </button>
          <button onClick={() => setActiveTab('rehearsals')} className={`pb-2 px-4 font-medium text-sm whitespace-nowrap transition-colors ${activeTab === 'rehearsals' ? 'text-indigo-600 border-b-2 border-indigo-600' : 'text-slate-500 hover:text-slate-700'}`}>
            <Music size={14} className="inline mr-2"/>Gestión de Ensayos
          </button>
          <button onClick={() => setActiveTab('program')} className={`pb-2 px-4 font-medium text-sm whitespace-nowrap transition-colors ${activeTab === 'program' ? 'text-indigo-600 border-b-2 border-indigo-600' : 'text-slate-500 hover:text-slate-700'}`}>
            <ListMusic size={14} className="inline mr-2"/>Programa Musical
          </button>
      </div>

<div className="flex flex-col lg:flex-row gap-6">
        
        {/* --- TAB: CHECKLIST MANAGER --- */}
        {activeTab === 'checklist' && (
            <div className="w-full">
                <div className="flex justify-between items-center mb-4">
                    <h3 className="font-bold text-slate-800">Requerimientos por Área</h3>
                    <button onClick={createNewChecklistItem} className="bg-indigo-600 text-white px-3 py-1.5 rounded text-sm flex items-center gap-1 hover:bg-indigo-700">
                        <Plus size={16}/> Agregar Ítem
                    </button>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {CHECKLIST_CATEGORIES.map(cat => {
                        const items = Array.isArray(event.checklist) ? event.checklist.filter(i => i.category === cat) : [];
                        if (items.length === 0) return null; 
                        return (
                            <div key={cat} className="bg-slate-50 rounded-xl border border-slate-200 p-3">
                                <h4 className="font-bold text-slate-700 text-xs uppercase mb-3 border-b border-slate-200 pb-2">{cat}</h4>
                                <div className="space-y-2">
                                    {items.map(item => {
                                        const hasSubs = item.subItems && item.subItems.length > 0;
                                        const progress = hasSubs ? Math.round((item.subItems.filter(s=>s.completed).length / item.subItems.length) * 100) : 0;
                                        
                                        return (
                                            <div key={item.id} className="bg-white p-3 rounded shadow-sm border border-slate-100 hover:border-indigo-200 transition-all cursor-pointer group">
                                                <div className="flex justify-between items-start gap-2">
                                                    <div className="flex-1" onClick={() => setEditingItem(item)}>
                                                        <p className={`text-sm font-semibold ${item.status ? 'text-slate-400 line-through' : 'text-slate-800'}`}>{item.title}</p>
                                                        {item.details && <p className="text-xs text-slate-500 mt-1 line-clamp-1">{item.details}</p>}
                                                        {hasSubs && (
                                                            <div className="mt-2">
                                                                <div className="flex justify-between text-[10px] text-slate-500 mb-1">
                                                                    <span>Progreso</span>
                                                                    <span>{progress}%</span>
                                                                </div>
                                                                <div className="w-full bg-slate-100 h-1 rounded-full">
                                                                    <div className="bg-indigo-500 h-1 rounded-full transition-all" style={{width: `${progress}%`}}></div>
                                                                </div>
                                                            </div>
                                                        )}
                                                    </div>
                                                    <input type="checkbox" checked={item.status} onChange={() => onUpdateChecklistItem(event.id, { ...item, status: !item.status })} className="mt-1 w-4 h-4 text-indigo-600 rounded" />
                                                </div>
                                                <button onClick={() => setEditingItem(item)} className="text-[10px] text-indigo-500 mt-2 font-medium opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1"><Edit size={10}/> Editar / Detalles</button>
                                            </div>
                                        );
                                    })}
                                </div>
                            </div>
                        );
                    })}
                </div>
                {editingItem && (
                    <ChecklistItemModal item={editingItem} onClose={() => setEditingItem(null)} onSave={(updatedItem) => { onUpdateChecklistItem(event.id, updatedItem); setEditingItem(null); }} onDelete={(itemId) => { onDeleteChecklistItem(event.id, itemId); setEditingItem(null); }} />
                )}
            </div>
        )}

{/* --- TAB: REHEARSALS --- */}
        {activeTab === 'rehearsals' && (
            <>
                <div className="w-full lg:w-1/3 space-y-6">
                    <div className="bg-white p-5 rounded-xl shadow-sm border border-slate-200">
                        <h3 className="font-bold text-slate-800 mb-4 flex items-center gap-2"><Music size={18} /> Agendar Ensayo</h3>
                        <form onSubmit={handleAddRehearsalSubmit} className="space-y-3">
                             <div>
                                <label className="block text-xs font-medium text-slate-500 mb-1">
                                    {event.categoryMode === 'music_academy' ? 'Academia' : event.categoryMode === 'dance_academy' ? 'Academia de Baile' : 'Grado'}
                                </label>
                                {event.categoryMode === 'music_academy' ? (
                                    <select className="w-full p-2 border rounded text-sm" value={newRehearsal.groupName} onChange={handleMusicAcademyChange}>
                                        {MUSIC_ACADEMIES.map((ac, idx) => (<option key={idx} value={`${ac.name} - ${ac.teacher}`}>{ac.name} - {ac.teacher}</option>))}
                                    </select>
                                ) : event.categoryMode === 'dance_academy' ? (
                                    <select className="w-full p-2 border rounded text-sm" value={newRehearsal.groupName} onChange={e => setNewRehearsal({...newRehearsal, groupName: e.target.value})}>
                                        {DANCE_ACADEMIES.map(d => <option key={d} value={d}>{d}</option>)}
                                    </select>
                                ) : (
                                    <select className="w-full p-2 border rounded text-sm" value={newRehearsal.groupName} onChange={e => setNewRehearsal({...newRehearsal, groupName: e.target.value})}>
                                        {GRADES.map(g => <option key={g} value={g}>{g}</option>)}
                                    </select>
                                )}
                            </div>
                            {event.categoryMode !== 'music_academy' && (
                                <div>
                                    <label className="block text-xs font-medium text-slate-500 mb-1">
                                        {event.categoryMode === 'dance_academy' ? 'Tipo de Ensamble' : 'Sección'}
                                    </label>
                                    <select className="w-full p-2 border rounded text-sm" value={newRehearsal.subGroup} onChange={e => setNewRehearsal({...newRehearsal, subGroup: e.target.value})}>
                                        {event.categoryMode === 'dance_academy' ? ENSEMBLE_TYPES.map(t => <option key={t} value={t}>{t}</option>) : SECTIONS.map(s => <option key={s} value={s}>{s}</option>)}
                                    </select>
                                </div>
                            )}
                            <div className="grid grid-cols-2 gap-2">
                                <div><label className="block text-xs font-medium text-slate-500 mb-1">Fecha</label><input type="date" className="w-full p-2 border rounded text-sm" value={newRehearsal.date} onChange={e => setNewRehearsal({...newRehearsal, date: e.target.value})} /></div>
                                <div><label className="block text-xs font-medium text-slate-500 mb-1">Hora</label><input type="time" className="w-full p-2 border rounded text-sm" value={newRehearsal.time} onChange={e => setNewRehearsal({...newRehearsal, time: e.target.value})} /></div>
                            </div>
                            <div><label className="block text-xs font-medium text-slate-500 mb-1">Maestro</label><input type="text" className="w-full p-2 border rounded text-sm" value={newRehearsal.teacher} onChange={e => setNewRehearsal({...newRehearsal, teacher: e.target.value})} /></div>
                            <button type="submit" className="w-full bg-indigo-600 text-white py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors">Agendar</button>
                        </form>
                    </div>
                </div>
                <div className="flex-1 bg-slate-50 p-5 rounded-xl border border-slate-200 max-h-[600px] overflow-y-auto">
                    <h3 className="font-bold text-slate-800 mb-3 text-sm uppercase tracking-wide">Ensayos ({eventRehearsals.length})</h3>
                        <div className="space-y-3">
                            {eventRehearsals.sort((a,b) => (a.date + a.time).localeCompare(b.date + b.time)).map(r => (
                                <div key={r.id} className="bg-white p-3 rounded border border-slate-200 relative group flex justify-between items-start">
                                    <div>
                                        <div className="font-bold text-slate-800 text-sm">{r.title}</div>
                                        <div className="text-xs text-slate-500 mt-1 flex flex-wrap gap-2">
                                            <span className="flex items-center gap-1"><Clock size={10} /> {safeDate(r.date).toLocaleDateString()} {r.time}</span>
                                            <span className="flex items-center gap-1"><MapPin size={10} /> {r.location}</span>
                                        </div>
                                    </div>
                                    <button onClick={() => onDeleteRehearsal(r.id)} className="text-slate-300 hover:text-red-500 transition-colors"><Trash2 size={16} /></button>
                                </div>
                            ))}
                        </div>
                </div>
            </>
        )}

{/* --- TAB: PROGRAM --- */}
        {activeTab === 'program' && (
            <>
                 <div className="w-full lg:w-1/3 space-y-6">
                    <div className="bg-white p-5 rounded-xl shadow-sm border border-slate-200">
                        <h3 className="font-bold text-slate-800 mb-4 flex items-center gap-2"><ListMusic size={18} /> Agregar al Programa</h3>
                        <form onSubmit={handleAddProgramSubmit} className="space-y-3">
                            <div>
                                <label className="block text-xs font-medium text-slate-500 mb-1">Contexto / Academia</label>
                                <select className="w-full p-2 border rounded text-sm" value={newProgramItem.academy} onChange={e => setNewProgramItem({...newProgramItem, academy: e.target.value})}>
                                    {event.categoryMode === 'music_academy' 
                                        ? MUSIC_ACADEMIES.map((ac, idx) => <option key={idx} value={`${ac.name} - ${ac.teacher}`}>{ac.name} - {ac.teacher}</option>)
                                        : event.categoryMode === 'dance_academy'
                                            ? DANCE_ACADEMIES.map(d => <option key={d} value={d}>{d}</option>)
                                            : GRADES.map(g => <option key={g} value={g}>{g}</option>)
                                    }
                                </select>
                            </div>
                            <div><label className="block text-xs font-medium text-slate-500 mb-1">Pieza</label><input type="text" className="w-full p-2 border rounded text-sm" value={newProgramItem.pieceName} onChange={e => setNewProgramItem({...newProgramItem, pieceName: e.target.value})} /></div>
                            <div><label className="block text-xs font-medium text-slate-500 mb-1">Intérpretes</label><textarea className="w-full p-2 border rounded text-sm" rows="2" value={newProgramItem.performers} onChange={e => setNewProgramItem({...newProgramItem, performers: e.target.value})} /></div>
                            <button type="submit" className="w-full bg-emerald-600 text-white py-2 rounded-lg text-sm font-medium hover:bg-emerald-700 transition-colors">Agregar</button>
                        </form>
                    </div>
                </div>
                <div className="flex-1 bg-slate-50 p-5 rounded-xl border border-slate-200">
                    <div className="flex justify-between items-center mb-4">
                        <h3 className="font-bold text-slate-800 text-sm uppercase tracking-wide">Programa Musical</h3>
                        
                        <div className="flex items-center gap-2">
                            <Filter size={16} className="text-slate-400" />
                            <select 
                                className="p-2 border rounded text-sm bg-white min-w-[200px]"
                                value={programFilter}
                                onChange={(e) => setProgramFilter(e.target.value)}
                            >
                                <option value="all">Ver Todo (Completo)</option>
                                <optgroup label="--- Por Familia ---">
                                    {Object.keys(INSTRUMENT_FAMILIES).map(f => (
                                        <option key={f} value={f}>{f}</option>
                                    ))}
                                </optgroup>
                                {event.categoryMode === 'music_academy' && (
                                    <optgroup label="--- Por Academia ---">
                                        {MUSIC_ACADEMIES.map((ac, idx) => (
                                            <option key={idx} value={`${ac.name} - ${ac.teacher}`}>{ac.name} - {ac.teacher}</option>
                                        ))}
                                    </optgroup>
                                )}
                            </select>
                        </div>
                    </div>

{!event.program || event.program.length === 0 ? (
                        <p className="text-slate-400 text-sm italic">Aún no hay piezas registradas.</p>
                    ) : (
                        <div className="space-y-4">
                            {uniqueAcademiesInProgram.length === 0 ? (
                                <p className="text-slate-500 text-sm text-center py-4 bg-white rounded border border-dashed border-slate-300">No hay piezas que coincidan con este filtro.</p>
                            ) : (
                                uniqueAcademiesInProgram.map(academyName => (
                                    <div key={academyName} className="bg-white rounded-lg border border-slate-200 overflow-hidden">
                                        <div className="bg-slate-100 px-4 py-2 font-bold text-sm text-slate-700 border-b border-slate-200">{academyName}</div>
                                        <div className="divide-y divide-slate-100">
                                            {filteredProgram.filter(i => i.academy === academyName).map((item) => (
                                                <div key={item.id} className="p-3 flex justify-between items-center hover:bg-slate-50">
                                                    <div><div className="font-bold text-indigo-900 text-sm">{item.pieceName}</div><div className="text-xs text-slate-600">{item.performers}</div></div>
                                                    <button onClick={() => onDeleteProgramItem(event.id, item.id)} className="text-slate-300 hover:text-red-500"><Trash2 size={14} /></button>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                ))
                            )}
                        </div>
                    )}
                </div>
            </>
        )}

</div>

{/* --- MODAL DE PROPUESTA (NUEVO) --- */}
      {showProposal && (
          <SmartWeekProposalModal onClose={() => setShowProposal(false)} />
      )}
    </div>
  );
};

// --- APP PRINCIPAL ---

export default function SmartApp() {
  const [view, setView] = useState('dashboard'); 
  const [events, setEvents] = useState(INITIAL_EVENTS);
  const [rehearsals, setRehearsals] = useState([]);
  const [selectedEventId, setSelectedEventId] = useState(null);
  
  const [showPrintModal, setShowPrintModal] = useState(false);
  const [printMode, setPrintMode] = useState('single');

const [showEmailModal, setShowEmailModal] = useState(false);
  const [masterEditingItem, setMasterEditingItem] = useState(null);

const selectedEvent = events.find(e => e.id === selectedEventId);

useEffect(() => {
    // ACTUALIZACIÓN VERSIÓN 10 (HARD RESET FINAL & TIMEZONE FIX)
    // Cambiamos la key para obligar a que cargue INITIAL_EVENTS limpios
    const savedEvents = localStorage.getItem('smart_events_v10_reset');
    const savedRehearsals = localStorage.getItem('smart_rehearsals_v10_reset');
    
    if (savedEvents) {
        setEvents(JSON.parse(savedEvents));
    } else {
        setEvents(INITIAL_EVENTS);
    }
    
    if (savedRehearsals) {
        setRehearsals(JSON.parse(savedRehearsals));
    }
  }, []);

useEffect(() => {
    localStorage.setItem('smart_events_v10_reset', JSON.stringify(events));
    localStorage.setItem('smart_rehearsals_v10_reset', JSON.stringify(rehearsals));
  }, [events, rehearsals]);

// Manejadores
  const handlePrintSingle = () => { setPrintMode('single'); setShowPrintModal(true); };
  const handlePrintGeneral = () => { setPrintMode('general'); setShowPrintModal(true); };
  const handlePrintMasterList = () => { setPrintMode('master_list'); setShowPrintModal(true); }; // Nuevo manejador

const renderCalendar = () => {
    const allItems = [
      ...events.map(e => ({ ...e, isEvent: true })),
      ...rehearsals.map(r => ({ ...r, isRehearsal: true }))
    ].sort((a, b) => new Date(a.date) - new Date(b.date));

return (
      <div className="space-y-4">
        <div className="bg-white rounded-lg border border-slate-200 overflow-hidden">
             <div className="bg-slate-50 px-6 py-4 border-b border-slate-200">
                 <h2 className="font-bold text-slate-800 text-lg">Calendario Global de Actividades</h2>
                 <p className="text-slate-500 text-sm">Eventos Principales (⭐) y Ensayos Programados</p>
             </div>
          <div className="overflow-x-auto">
            <table className="w-full text-sm text-left">
              <thead className="bg-slate-50 text-slate-500 font-medium border-b border-slate-200">
                <tr>
                  <th className="px-4 py-3">Fecha</th>
                  <th className="px-4 py-3">Hora</th>
                  <th className="px-4 py-3">Actividad</th>
                  <th className="px-4 py-3">Ubicación</th>
                  <th className="px-4 py-3">Maestro / Responsable</th>
                  <th className="px-4 py-3"></th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {allItems.map((item, idx) => (
                  <tr key={idx} className={`hover:bg-slate-50 ${item.isEvent ? 'bg-amber-50/50' : ''}`}>
                    <td className="px-4 py-3 font-medium text-slate-700 whitespace-nowrap">
                      {safeDate(item.date).toLocaleDateString('es-MX', { weekday: 'short', day: 'numeric', month: 'short' })}
                    </td>
                    <td className="px-4 py-3 text-slate-500">
                      {item.isRehearsal ? item.time : <span className="text-amber-600 font-bold text-xs uppercase px-2 py-1 bg-amber-100 rounded-full">Todo el día</span>}
                    </td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-2">
                        {item.isEvent ? <Star size={16} className="text-amber-500 fill-amber-500" /> : <Users size={14} className="text-blue-500" />}
                        <span className={item.isEvent ? 'font-bold text-indigo-900 text-base' : 'text-slate-700 font-medium'}>{item.title}</span>
                      </div>
                    </td>
                    <td className="px-4 py-3 text-slate-500">{item.location || 'Campus SMART'}</td>
                    <td className="px-4 py-3 text-slate-500">{item.teacher || '-'}</td>
                    <td className="px-4 py-3 text-right">
                      {item.isEvent && (
                        <button onClick={() => { setSelectedEventId(item.id); setView('event-detail'); }} className="text-indigo-600 hover:text-indigo-800 text-xs font-bold border border-indigo-200 px-3 py-1 rounded hover:bg-indigo-50 transition-colors">
                          Gestionar
                        </button>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
  };

return (
    <div className="min-h-screen bg-slate-100 font-sans text-slate-900 pb-10">
      <header className="bg-indigo-900 text-white shadow-lg sticky top-0 z-30">
        <div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
          <div className="flex items-center gap-3">
            <div className="bg-white/10 p-2 rounded-lg"><Star className="text-yellow-400" fill="currentColor" size={24} /></div>
            <div><h1 className="font-bold text-xl leading-none">SMART Manager</h1><p className="text-indigo-200 text-xs">Producción de Eventos</p></div>
          </div>
          <button 
            onClick={handlePrintGeneral}
            className="flex items-center gap-2 bg-yellow-500 text-indigo-900 px-4 py-2 rounded-lg hover:bg-yellow-400 transition-colors font-bold text-sm shadow-md"
          >
            <Printer size={18} /> IMPRIMIR REPORTE MAESTRO
          </button>
        </div>
        <div className="bg-indigo-800 text-sm font-medium overflow-x-auto">
            <div className="max-w-7xl mx-auto px-4 flex gap-6">
                <button onClick={() => { setView('dashboard'); setSelectedEventId(null); }} className={`py-3 border-b-2 whitespace-nowrap transition-colors ${view === 'dashboard' ? 'border-yellow-400 text-white' : 'border-transparent text-indigo-300 hover:text-white'}`}>Tablero</button>
                <button onClick={() => { setView('calendar'); setSelectedEventId(null); }} className={`py-3 border-b-2 whitespace-nowrap transition-colors ${view === 'calendar' ? 'border-yellow-400 text-white' : 'border-transparent text-indigo-300 hover:text-white'}`}>Calendario</button>
                <button onClick={() => { setView('master-checklist'); setSelectedEventId(null); }} className={`py-3 border-b-2 whitespace-nowrap transition-colors ${view === 'master-checklist' ? 'border-yellow-400 text-white' : 'border-transparent text-indigo-300 hover:text-white'}`}>Lista Maestra</button>
            </div>
        </div>
      </header>

<main className="max-w-7xl mx-auto px-4 py-8">
        {view === 'dashboard' && renderDashboard()}
        {view === 'calendar' && renderCalendar()}
        
        {view === 'event-detail' && selectedEvent && (
            <EventDetailView 
                key={selectedEvent.id} 
                event={selectedEvent}
                rehearsals={rehearsals}
                onBack={() => setView('dashboard')}
                onUpdateObservations={updateEventObservations}
                onUpdateChecklistItem={updateChecklistItem}
                onAddChecklistItem={addChecklistItem}
                onDeleteChecklistItem={deleteChecklistItem}
                onAddRehearsal={addRehearsal}
                onDeleteRehearsal={deleteRehearsal}
                onAddProgramItem={addProgramItem}
                onDeleteProgramItem={deleteProgramItem}
                onPrint={handlePrintSingle}
                onGenerateEmail={() => setShowEmailModal(true)}
            />
        )}

{view === 'master-checklist' && (
            <MasterChecklistView 
                events={events} 
                onToggleStatus={(evtId, itemId) => { const evt = events.find(e => e.id === evtId); const item = evt.checklist.find(i => i.id === itemId); updateChecklistItem(evtId, { ...item, status: !item.status }); }} 
                onOpenItem={handleMasterItemOpen}
                onPrintList={handlePrintMasterList} 
            />
        )}
      </main>

{masterEditingItem && (
          <ChecklistItemModal item={masterEditingItem} onClose={() => setMasterEditingItem(null)} onSave={(updatedItem) => { updateChecklistItem(masterEditingItem.eventId, updatedItem); setMasterEditingItem(null); }} onDelete={(itemId) => { deleteChecklistItem(masterEditingItem.eventId, itemId); setMasterEditingItem(null); }} />
      )}

{showPrintModal && (
          <PrintModal 
            mode={printMode}
            events={events}
            rehearsals={rehearsals}
            targetEventId={selectedEventId}
            onClose={() => setShowPrintModal(false)}
          />
      )}

{showEmailModal && selectedEvent && (
          <EmailDraftModal 
              event={selectedEvent} 
              rehearsals={rehearsals} 
              onClose={() => setShowEmailModal(false)} 
          />
      )}
    </div>
  );
}
  
</div>
</div></div></div></div></div>
    </div>
  
  </div>
  
</section>

</article>

</main>
      
        <footer class="sections" id="footer-sections" data-footer-sections>

.fe-65db9c98ca8f16577605409b {
  --grid-gutter: calc(var(--sqs-mobile-site-gutter, 6vw) - 11.0px);
  --cell-max-width: calc( ( var(--sqs-site-max-width, 1500px) - (11.0px * (8 - 1)) ) / 8 );

display: grid;
  position: relative;
  grid-area: 1/1/-1/-1;
  grid-template-rows: repeat(2,minmax(24px, auto));
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(8, minmax(0, var(--cell-max-width)))
    minmax(var(--grid-gutter), 1fr);
  row-gap: 11.0px;
  column-gap: 11.0px;
  overflow-x: hidden;
  overflow-x: clip;
}

@media (min-width: 768px) {
  .background-width--inset .fe-65db9c98ca8f16577605409b {
    --inset-padding: calc(var(--sqs-site-gutter) * 2);
  }

.fe-65db9c98ca8f16577605409b {
    --grid-gutter: calc(var(--sqs-site-gutter, 4vw) - 11.0px);
    --cell-max-width: calc( ( var(--sqs-site-max-width, 1500px) - (11.0px * (24 - 1)) ) / 24 );
    --inset-padding: 0vw;

--row-height-scaling-factor: 0.0215;
    --container-width: min(var(--sqs-site-max-width, 1500px), calc(100vw - var(--sqs-site-gutter, 4vw) * 2 - var(--inset-padding) ));

grid-template-rows: repeat(1,minmax(calc(var(--container-width) * var(--row-height-scaling-factor)), auto));
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);
  }
}

.fe-block-yui_3_17_2_1_1723571341474_39612 {
    grid-area: 1/2/3/10;
    z-index: 1;

@media (max-width: 767px) {
      
        
      
      
    }
  }

.fe-block-yui_3_17_2_1_1723571341474_39612 .sqs-block {
    justify-content: flex-start;
  }

.fe-block-yui_3_17_2_1_1723571341474_39612 .sqs-block-alignment-wrapper {
    align-items: flex-start;
  }

@media (min-width: 768px) {
    .fe-block-yui_3_17_2_1_1723571341474_39612 {
      grid-area: 1/11/2/17;
      z-index: 1;

}

.fe-block-yui_3_17_2_1_1723571341474_39612 .sqs-block {
      justify-content: flex-start;
    }

.fe-block-yui_3_17_2_1_1723571341474_39612 .sqs-block-alignment-wrapper {
      align-items: flex-start;
    }
  }

</style><div class="fluid-engine fe-65db9c98ca8f16577605409b"><div class="fe-block fe-block-yui_3_17_2_1_1723571341474_39612"><div class="sqs-block html-block sqs-block-html" data-blend-mode="NORMAL" data-block-type="2" data-border-radii="{"topLeft":{"unit":"px","value":0.0},"topRight":{"unit":"px","value":0.0},"bottomLeft":{"unit":"px","value":0.0},"bottomRight":{"unit":"px","value":0.0}}" data-sqsp-block="text" id="block-yui_3_17_2_1_1723571341474_39612"><div class="sqs-block-content">

<div class="sqs-html-content" data-sqsp-text-block-content>
  <div class="sqsrte-scaled-text-container"><span class="sqsrte-scaled-text"><h3 style="text-align:center;white-space:pre-wrap;">Lecto Escritura Musical para Niños</h3></span></div>
</div>

</div></div></div></div></div>
    </div>
  
  </div>
  
</section>

</footer>

</div>

</body>
</html>