import React, { useState, useEffect, useRef } from 'react';
import { 
  LayoutDashboard, FileText, Users, Settings, LogOut, 
  Plus, Search, Filter, AlertCircle, CheckCircle2, 
  Clock, ChevronRight, PenTool, Download, UserCircle, Menu, X, Bell, Activity
} from 'lucide-react';

// ==========================================
// 1. MOCK DATA & SCHEMAS (Simulando MySQL DB)
// ==========================================

const MOCK_USERS = [
  { id: 1, name: 'Hna. Helen Gomez', role: 'TUTOR', email: 'helen@mundoabc.edu', avatar: 'HG' },
  { id: 2, name: 'Admin Principal', role: 'ADMIN', email: 'admin@mundoabc.edu', avatar: 'AD' },
  { id: 3, name: 'Carlos Cardales', role: 'PADRE', email: 'padre@correo.com', avatar: 'CC' },
  { id: 4, name: 'Yeiber Cardales', role: 'ESTUDIANTE', email: 'yeiber@mundoabc.edu', avatar: 'YC', grade: '6º', tutorId: 1 },
  { id: 5, name: 'Director Académico', role: 'DIRECTOR', email: 'director@mundoabc.edu', avatar: 'DA' },
];

const INFRACTION_TYPES = [
  'Muestra conducta agresiva',
  'Falta de respeto a compañeros o tutores',
  'Traer objetos no permitidos al aula',
  'No cumplió las normas de convivencia establecidas',
  'Uso indebido de dispositivos electrónicos durante actividades académicas',
  'No cumple con las normas en el aula'
];

let initialIncidents = [
  {
    id: 'INC-2026-001',
    studentId: 4,
    tutorId: 1,
    date: '2026-05-13',
    infractions: ['No cumple con las normas en el aula', 'Uso indebido de dispositivos electrónicos durante actividades académicas'],
    description: 'El estudiante ha presentado problemas de conducta dentro del aula.',
    status: 'PENDIENTE_FIRMAS', // PENDIENTE_FIRMAS, CERRADO, EN_REVISION
    agreements: 'El estudiante se compromete a prestar atención. Los padres supervisarán su comportamiento.',
    signatures: {
      tutor: { signed: true, date: '2026-05-13', data: 'mock-signature-data' },
      padre: { signed: false, date: null, data: null },
      estudiante: { signed: false, date: null, data: null },
      director: { signed: false, date: null, data: null }
    }
  }
];

// ==========================================
// 2. COMPONENTES UI REUTILIZABLES
// ==========================================

const Badge = ({ children, variant = 'gray' }) => {
  const variants = {
    gray: 'bg-gray-100 text-gray-800',
    blue: 'bg-blue-100 text-blue-800',
    yellow: 'bg-yellow-100 text-yellow-800',
    red: 'bg-red-100 text-red-800',
    green: 'bg-green-100 text-green-800',
  };
  return (
    <span className={`px-2.5 py-0.5 rounded-full text-xs font-medium ${variants[variant]}`}>
      {children}
    </span>
  );
};

const Button = ({ children, onClick, variant = 'primary', className = '', icon: Icon, type="button" }) => {
  const baseStyle = "inline-flex items-center justify-center px-4 py-2 border rounded-md shadow-sm text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors";
  const variants = {
    primary: "border-transparent text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500",
    secondary: "border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-blue-500",
    danger: "border-transparent text-white bg-red-600 hover:bg-red-700 focus:ring-red-500",
  };
  
  return (
    <button type={type} onClick={onClick} className={`${baseStyle} ${variants[variant]} ${className}`}>
      {Icon && <Icon className="w-4 h-4 mr-2" />}
      {children}
    </button>
  );
};

// ==========================================
// 3. COMPONENTE FIRMA DIGITAL (Canvas)
// ==========================================

const SignaturePad = ({ onSave, onCancel, roleToSign }) => {
  const canvasRef = useRef(null);
  const [isDrawing, setIsDrawing] = useState(false);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (canvas) {
      const ctx = canvas.getContext('2d');
      ctx.lineWidth = 2;
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round';
      ctx.strokeStyle = '#0f172a'; // Slate 900
      
      // Fix resolution for high DPI displays
      const rect = canvas.getBoundingClientRect();
      canvas.width = rect.width * 2;
      canvas.height = rect.height * 2;
      ctx.scale(2, 2);
    }
  }, []);

  const getCoordinates = (e) => {
    const canvas = canvasRef.current;
    const rect = canvas.getBoundingClientRect();
    if (e.touches && e.touches.length > 0) {
      return {
        x: e.touches[0].clientX - rect.left,
        y: e.touches[0].clientY - rect.top
      };
    }
    return {
      x: e.clientX - rect.left,
      y: e.clientY - rect.top
    };
  };

  const startDrawing = (e) => {
    e.preventDefault();
    const { x, y } = getCoordinates(e);
    const ctx = canvasRef.current.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(x, y);
    setIsDrawing(true);
  };

  const draw = (e) => {
    e.preventDefault();
    if (!isDrawing) return;
    const { x, y } = getCoordinates(e);
    const ctx = canvasRef.current.getContext('2d');
    ctx.lineTo(x, y);
    ctx.stroke();
  };

  const stopDrawing = () => {
    setIsDrawing(false);
  };

  const handleClear = () => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  };

  const handleSave = () => {
    const dataUrl = canvasRef.current.toDataURL('image/png');
    // Basic check to see if canvas is empty (simplified)
    onSave(dataUrl, roleToSign);
  };

  return (
    <div className="fixed inset-0 bg-gray-900/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-xl shadow-2xl w-full max-w-lg overflow-hidden flex flex-col">
        <div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
          <h3 className="text-lg font-bold text-gray-800">Firma Digital - {roleToSign}</h3>
          <button onClick={onCancel} className="text-gray-400 hover:text-gray-600">
            <X className="w-5 h-5" />
          </button>
        </div>
        <div className="p-6 flex-1 flex flex-col">
          <p className="text-sm text-gray-500 mb-4">Por favor, dibuje su firma en el recuadro inferior usando su mouse o pantalla táctil.</p>
          <div className="border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 touch-none relative">
            <canvas
              ref={canvasRef}
              className="w-full h-64 cursor-crosshair"
              onMouseDown={startDrawing}
              onMouseMove={draw}
              onMouseUp={stopDrawing}
              onMouseLeave={stopDrawing}
              onTouchStart={startDrawing}
              onTouchMove={draw}
              onTouchEnd={stopDrawing}
            />
            <div className="absolute bottom-2 right-2 opacity-50 text-xs text-gray-400 pointer-events-none">
              Área de firma
            </div>
          </div>
        </div>
        <div className="px-6 py-4 border-t border-gray-100 bg-gray-50 flex justify-between items-center">
          <Button variant="secondary" onClick={handleClear}>Limpiar</Button>
          <div className="space-x-3">
            <Button variant="secondary" onClick={onCancel}>Cancelar</Button>
            <Button variant="primary" onClick={handleSave} icon={PenTool}>Guardar Firma</Button>
          </div>
        </div>
      </div>
    </div>
  );
};

// ==========================================
// 4. VISTAS PRINCIPALES
// ==========================================

const DashboardView = ({ incidents, role }) => {
  const pending = incidents.filter(i => i.status === 'PENDIENTE_FIRMAS').length;
  const closed = incidents.filter(i => i.status === 'CERRADO').length;

  return (
    <div className="space-y-6">
      <h2 className="text-2xl font-bold text-gray-800">Panel de Control</h2>
      
      {/* KPI Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-center">
          <div className="p-3 bg-blue-100 text-blue-600 rounded-lg">
            <FileText className="w-8 h-8" />
          </div>
          <div className="ml-4">
            <p className="text-sm font-medium text-gray-500">Total Incidencias</p>
            <p className="text-2xl font-bold text-gray-900">{incidents.length}</p>
          </div>
        </div>
        <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-center">
          <div className="p-3 bg-yellow-100 text-yellow-600 rounded-lg">
            <Clock className="w-8 h-8" />
          </div>
          <div className="ml-4">
            <p className="text-sm font-medium text-gray-500">Pendientes de Firma</p>
            <p className="text-2xl font-bold text-gray-900">{pending}</p>
          </div>
        </div>
        <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-center">
          <div className="p-3 bg-green-100 text-green-600 rounded-lg">
            <CheckCircle2 className="w-8 h-8" />
          </div>
          <div className="ml-4">
            <p className="text-sm font-medium text-gray-500">Casos Cerrados</p>
            <p className="text-2xl font-bold text-gray-900">{closed}</p>
          </div>
        </div>
      </div>

      {/* Gráfico de Estadísticas (NUEVO) */}
      <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
        <h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center"><Activity className="w-5 h-5 mr-2 text-blue-600"/> Estadísticas de Incidencias por Mes</h3>
        <div className="h-48 flex items-end space-x-2 sm:space-x-4 border-b border-gray-200 pb-2 pt-8">
          {/* Barras simuladas */}
          {[4, 7, 3, 8, 2, 5, 9, 4, 6, 10, 5, 8].map((val, idx) => (
             <div key={idx} className="flex-1 flex flex-col items-center group relative h-full justify-end">
                <div className="absolute -top-8 bg-gray-800 text-white text-xs py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity z-10">{val} Casos</div>
                <div className="w-full bg-blue-500 rounded-t-sm transition-all duration-500 hover:bg-blue-600" style={{ height: `${(val/10)*100}%` }}></div>
                <span className="text-[10px] text-gray-400 mt-2 rotate-45 origin-left">Mes {idx+1}</span>
             </div>
          ))}
        </div>
      </div>

      {/* Actividad Reciente */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div className="px-6 py-4 border-b border-gray-100">
          <h3 className="text-lg font-semibold text-gray-800">Incidencias Recientes</h3>
        </div>
        <div className="divide-y divide-gray-100">
          {incidents.slice(0, 5).map(inc => {
            const student = MOCK_USERS.find(u => u.id === inc.studentId);
            return (
              <div key={inc.id} className="p-6 flex flex-col sm:flex-row sm:items-center justify-between hover:bg-gray-50 transition-colors">
                <div className="flex items-start space-x-4">
                  <div className={`mt-1 p-2 rounded-full ${inc.status === 'CERRADO' ? 'bg-green-100 text-green-600' : 'bg-yellow-100 text-yellow-600'}`}>
                    {inc.status === 'CERRADO' ? <CheckCircle2 className="w-5 h-5" /> : <AlertCircle className="w-5 h-5" />}
                  </div>
                  <div>
                    <h4 className="text-md font-semibold text-gray-800">{inc.id} - {student?.name}</h4>
                    <p className="text-sm text-gray-500 mt-1 line-clamp-1">{inc.description}</p>
                    <div className="flex flex-wrap gap-2 mt-2">
                      <Badge variant="blue">{inc.date}</Badge>
                      <Badge variant={inc.status === 'CERRADO' ? 'green' : 'yellow'}>
                        {inc.status.replace('_', ' ')}
                      </Badge>
                    </div>
                  </div>
                </div>
                <div className="mt-4 sm:mt-0 text-right">
                  <Button variant="secondary" className="w-full sm:w-auto text-xs py-1.5 px-3">Ver Detalles</Button>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

const CreateIncidentView = ({ onSubmit, onCancel }) => {
  const [formData, setFormData] = useState({
    studentId: '',
    date: new Date().toISOString().split('T')[0],
    infractions: [],
    description: '',
    agreements: ''
  });

  const students = MOCK_USERS.filter(u => u.role === 'ESTUDIANTE');

  const toggleInfraction = (infraction) => {
    setFormData(prev => ({
      ...prev,
      infractions: prev.infractions.includes(infraction)
        ? prev.infractions.filter(i => i !== infraction)
        : [...prev.infractions, infraction]
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(formData);
  };

  return (
    <div className="max-w-4xl mx-auto">
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-2xl font-bold text-gray-800">Registrar Nueva Incidencia</h2>
        <Button variant="secondary" onClick={onCancel}>Volver</Button>
      </div>

      <form onSubmit={handleSubmit} className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        {/* Header del formulario imitando la imagen */}
        <div className="bg-blue-50/50 p-6 border-b border-gray-100 flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-xl">
              ABC
            </div>
            <div>
              <h1 className="text-xl font-bold text-blue-900 tracking-tight">INCIDENCIA ESCOLAR</h1>
              <p className="text-xs text-blue-600 font-medium uppercase tracking-wider">Mundo ABC - Reporte Oficial</p>
            </div>
          </div>
          <div className="text-right">
            <label className="block text-xs font-semibold text-gray-500 uppercase">Fecha de Emisión</label>
            <input 
              type="date" 
              required
              value={formData.date}
              onChange={e => setFormData({...formData, date: e.target.value})}
              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
            />
          </div>
        </div>

        <div className="p-6 space-y-8">
          {/* Datos del Estudiante */}
          <section>
            <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">1. Datos del Estudiante</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-4 bg-gray-50 rounded-lg border border-gray-100">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Nombre del Estudiante *</label>
                <select 
                  required
                  value={formData.studentId}
                  onChange={e => setFormData({...formData, studentId: Number(e.target.value)})}
                  className="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-white"
                >
                  <option value="">Seleccione un estudiante...</option>
                  {students.map(s => <option key={s.id} value={s.id}>{s.name} - {s.grade}</option>)}
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Grado / Nivel</label>
                <input 
                  type="text" 
                  disabled
                  value={formData.studentId ? students.find(s=>s.id === formData.studentId)?.grade : ''}
                  className="block w-full rounded-md border-gray-200 bg-gray-100 shadow-sm sm:text-sm cursor-not-allowed" 
                  placeholder="Se autocompleta..."
                />
              </div>
            </div>
          </section>

          {/* Situación */}
          <section>
            <div className="bg-yellow-400 py-2 px-4 rounded-t-lg">
              <h3 className="text-sm font-bold text-yellow-900 uppercase tracking-widest text-center">Situación Reportada</h3>
            </div>
            <div className="border border-yellow-200 border-t-0 rounded-b-lg divide-y divide-gray-100 p-2 bg-white">
              {INFRACTION_TYPES.map((infraction, idx) => (
                <label key={idx} className="flex items-center p-3 hover:bg-gray-50 cursor-pointer rounded transition-colors">
                  <div className="flex items-center h-5">
                    <input
                      type="checkbox"
                      checked={formData.infractions.includes(infraction)}
                      onChange={() => toggleInfraction(infraction)}
                      className="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 cursor-pointer"
                    />
                  </div>
                  <div className="ml-3 text-sm">
                    <span className="font-medium text-gray-700">{infraction}</span>
                  </div>
                </label>
              ))}
            </div>
          </section>

          {/* Descripción */}
          <section>
            <div className="bg-yellow-400 py-2 px-4 rounded-t-lg">
              <h3 className="text-sm font-bold text-yellow-900 uppercase tracking-widest text-center">Descripción Detallada</h3>
            </div>
            <div className="border border-yellow-200 border-t-0 rounded-b-lg p-4 bg-white relative">
              <textarea
                required
                rows={4}
                value={formData.description}
                onChange={e => setFormData({...formData, description: e.target.value})}
                placeholder="Describa los hechos de forma objetiva..."
                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm resize-none"
              />
              {/* Decorative element inspired by image */}
              <div className="absolute bottom-2 right-4 opacity-20 pointer-events-none">
                <UserCircle className="w-16 h-16 text-blue-900" />
              </div>
            </div>
          </section>

          {/* Acuerdos iniciales */}
          <section>
            <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Acuerdos y Compromisos Propuestos</h3>
            <textarea
              rows={3}
              value={formData.agreements}
              onChange={e => setFormData({...formData, agreements: e.target.value})}
              placeholder="Escriba los compromisos que el estudiante/padre debe asumir..."
              className="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
            />
          </section>

          <div className="pt-6 border-t border-gray-100 flex justify-end space-x-3">
            <Button variant="secondary" onClick={onCancel}>Cancelar</Button>
            <Button type="submit" variant="primary" icon={CheckCircle2}>Generar y Firmar</Button>
          </div>
        </div>
      </form>
    </div>
  );
};

const IncidentDetailView = ({ incident, onBack, onSign, currentUser }) => {
  const student = MOCK_USERS.find(u => u.id === incident.studentId);
  const tutor = MOCK_USERS.find(u => u.id === incident.tutorId);

  const getSignatureBox = (roleLabel, roleKey, signData) => {
    const canSign = currentUser.role === roleKey.toUpperCase() || 
                    (currentUser.role === 'ADMIN' && !signData.signed);
    
    return (
      <div className="border rounded-lg p-4 flex flex-col items-center justify-center bg-gray-50 min-h-[120px] relative">
        <p className="text-xs font-semibold text-gray-500 uppercase absolute top-2 left-3">{roleLabel}</p>
        
        {signData.signed ? (
          <div className="mt-4 flex flex-col items-center">
            {signData.data && signData.data.startsWith('data:image') ? (
               <img src={signData.data} alt="Firma" className="h-16 object-contain" />
            ) : (
               <div className="font-cursive text-2xl text-blue-900 my-2">{signData.data || 'Firmado'}</div>
            )}
            <p className="text-xs text-gray-400 mt-2">Firmado el: {signData.date}</p>
            <Badge variant="green">Verificado</Badge>
          </div>
        ) : (
          <div className="mt-4 text-center">
            <p className="text-sm text-gray-400 mb-3 font-medium">Pendiente de firma</p>
            {canSign && (
              <Button variant="primary" className="text-xs py-1 px-3" onClick={() => onSign(roleKey)} icon={PenTool}>
                Firmar Ahora
              </Button>
            )}
          </div>
        )}
      </div>
    );
  };

  const handlePrint = () => {
    window.print();
  };

  return (
    <div className="max-w-5xl mx-auto space-y-6">
      <div className="flex items-center justify-between print:hidden">
        <Button variant="secondary" onClick={onBack} icon={ChevronRight} className="rotate-180">Volver</Button>
        <div className="flex space-x-3">
          <Button variant="secondary" icon={Download} onClick={handlePrint}>Exportar PDF</Button>
        </div>
      </div>

      {/* Documento Estilo Print */}
      <div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden print:shadow-none print:border-none">
        {/* Header Institucional */}
        <div className="bg-blue-50/80 px-8 py-6 border-b border-blue-100 flex items-center justify-between">
          <div className="flex items-center space-x-4">
             <div className="w-12 h-12 bg-blue-700 rounded-xl flex items-center justify-center text-white font-extrabold text-2xl shadow-sm">
              M
            </div>
            <div>
              <h1 className="text-2xl font-black text-blue-900 tracking-tight">INCIDENCIA ESCOLAR</h1>
              <p className="text-sm text-blue-700 font-bold uppercase tracking-widest mt-1">Institución Educativa Mundo ABC</p>
            </div>
          </div>
          <div className="text-right border-l-2 border-blue-200 pl-6">
            <p className="text-sm font-bold text-gray-500 uppercase mb-1">Folio</p>
            <p className="text-lg font-mono font-bold text-blue-900">{incident.id}</p>
            <p className="text-xs font-semibold text-gray-500 mt-2">Fecha: {incident.date}</p>
          </div>
        </div>

        <div className="p-8 space-y-8">
          {/* Info Básica */}
          <div className="grid grid-cols-2 gap-4">
            <div className="border-2 border-blue-100 rounded-lg p-3 bg-white">
              <span className="text-xs font-bold text-blue-500 uppercase tracking-wider block mb-1">Del Estudiante</span>
              <p className="font-bold text-gray-800 text-lg">{student?.name}</p>
              <p className="text-sm text-gray-600 font-medium mt-1">Grado: {student?.grade}</p>
            </div>
            <div className="border-2 border-blue-100 rounded-lg p-3 bg-white">
              <span className="text-xs font-bold text-blue-500 uppercase tracking-wider block mb-1">Tutor(a) Encargado</span>
              <p className="font-bold text-gray-800 text-lg">{tutor?.name}</p>
              <p className="text-sm text-gray-600 font-medium mt-1">Docente Titular</p>
            </div>
          </div>

          {/* Situación */}
          <div>
            <div className="bg-yellow-400 py-2 px-6 rounded-t-lg shadow-sm">
              <h3 className="text-sm font-bold text-yellow-900 uppercase tracking-widest text-center">Situación Reportada</h3>
            </div>
            <div className="border-2 border-yellow-400 border-t-0 rounded-b-lg p-4 bg-yellow-50/30">
              <ul className="space-y-3">
                {INFRACTION_TYPES.map((inf, idx) => {
                  const isChecked = incident.infractions.includes(inf);
                  return (
                    <li key={idx} className={`flex items-start ${isChecked ? 'opacity-100' : 'opacity-40'}`}>
                       <div className={`mt-0.5 flex-shrink-0 w-5 h-5 border-2 rounded-sm flex items-center justify-center
                          ${isChecked ? 'border-blue-600 bg-blue-600' : 'border-gray-300 bg-white'}`}>
                          {isChecked && <CheckCircle2 className="w-4 h-4 text-white" />}
                       </div>
                       <span className={`ml-3 text-sm font-medium ${isChecked ? 'text-gray-900' : 'text-gray-500'}`}>{inf}</span>
                    </li>
                  )
                })}
              </ul>
            </div>
          </div>

          {/* Descripción */}
          <div>
             <div className="bg-yellow-400 py-2 px-6 rounded-t-lg shadow-sm">
              <h3 className="text-sm font-bold text-yellow-900 uppercase tracking-widest text-center">Descripción Detallada</h3>
            </div>
            <div className="border-2 border-yellow-400 border-t-0 rounded-b-lg p-5 bg-white min-h-[100px]">
              <p className="text-gray-800 whitespace-pre-wrap font-medium">{incident.description}</p>
            </div>
          </div>

          {/* Acuerdos */}
          <div className="bg-gray-50 rounded-xl border-2 border-gray-200 p-6">
            <h3 className="text-lg font-bold text-gray-800 mb-3 flex items-center">
              <CheckCircle2 className="w-5 h-5 text-green-500 mr-2"/>
              Acuerdos y Compromisos
            </h3>
            <p className="text-gray-700 italic border-l-4 border-blue-500 pl-4 py-1">{incident.agreements}</p>
          </div>

          {/* Timeline de Seguimiento */}
          <div className="mt-8 print:hidden">
            <h3 className="text-sm font-bold text-gray-800 uppercase tracking-widest mb-4">Línea de Tiempo del Caso</h3>
            <div className="relative border-l-2 border-blue-200 ml-3 space-y-6 pb-4">
               <div className="relative pl-6">
                 <div className="absolute -left-[9px] top-1 w-4 h-4 rounded-full bg-blue-500 border-4 border-white"></div>
                 <p className="text-sm font-bold text-gray-800">Incidencia Registrada</p>
                 <p className="text-xs text-gray-500">{incident.date} - Reportado por {tutor?.name}</p>
               </div>
               {incident.signatures.padre.signed && (
                 <div className="relative pl-6">
                   <div className="absolute -left-[9px] top-1 w-4 h-4 rounded-full bg-green-500 border-4 border-white"></div>
                   <p className="text-sm font-bold text-gray-800">Acuerdo Aceptado (Acudiente)</p>
                   <p className="text-xs text-gray-500">{incident.signatures.padre.date} - Firma digital registrada en el sistema</p>
                 </div>
               )}
               {incident.status === 'CERRADO' && (
                 <div className="relative pl-6">
                   <div className="absolute -left-[9px] top-1 w-4 h-4 rounded-full bg-slate-800 border-4 border-white"></div>
                   <p className="text-sm font-bold text-gray-800">Caso Cerrado y Archivado</p>
                   <p className="text-xs text-gray-500">Todas las firmas de conformidad han sido recolectadas</p>
                 </div>
               )}
            </div>
          </div>

          {/* Firmas */}
          <div className="pt-6 border-t-2 border-dashed border-gray-200 break-inside-avoid">
            <h3 className="text-center font-bold text-gray-800 uppercase tracking-widest mb-6">Firmas de Conformidad</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              {getSignatureBox('Docente / Tutor', 'tutor', incident.signatures.tutor)}
              {getSignatureBox('Padre o Tutor Legal', 'padre', incident.signatures.padre)}
              {getSignatureBox('Alumno(a)', 'estudiante', incident.signatures.estudiante)}
              {getSignatureBox('Directivo', 'director', incident.signatures.director)}
            </div>
          </div>
          
          <div className="text-center pt-8 opacity-50">
            <p className="text-xs font-bold font-mono tracking-widest">A.B.C.D.E.F.G.H.I.J.K.L.M.N.O.P.Q.R.S.T.U.V.W.X.Y.Z</p>
          </div>
        </div>
      </div>
    </div>
  );
};

// ==========================================
// 5. APLICACIÓN PRINCIPAL (Root Component)
// ==========================================

export default function App() {
  const [user, setUser] = useState(null); // null = no logueado
  const [currentView, setCurrentView] = useState('dashboard'); // dashboard, list, create, detail
  const [incidents, setIncidents] = useState(initialIncidents);
  const [selectedIncidentId, setSelectedIncidentId] = useState(null);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [signingRole, setSigningRole] = useState(null);
  const [showNotifications, setShowNotifications] = useState(false);

  const notifications = [
    { id: 1, text: "Nueva incidencia registrada (Yeiber C.)", time: "Hace 5 min", unread: true },
    { id: 2, text: "Firma de padre pendiente en INC-2026-001", time: "Hace 2 horas", unread: true },
  ];

  // --- Handlers ---

  const handleLogin = (mockUser) => {
    setUser(mockUser);
    setCurrentView('dashboard');
  };

  const handleLogout = () => {
    setUser(null);
  };

  const handleCreateIncident = (formData) => {
    const newIncident = {
      id: `INC-2026-${String(incidents.length + 1).padStart(3, '0')}`,
      ...formData,
      status: 'PENDIENTE_FIRMAS',
      tutorId: user.id, // El creador
      signatures: {
        tutor: { signed: true, date: formData.date, data: 'Firma Digital Autenticada' }, // auto-firma del creador
        padre: { signed: false, date: null, data: null },
        estudiante: { signed: false, date: null, data: null },
        director: { signed: false, date: null, data: null }
      }
    };
    setIncidents([newIncident, ...incidents]);
    setCurrentView('list');
  };

  const handleSignRequest = (role) => {
    setSigningRole(role);
  };

  const handleSaveSignature = (dataUrl, roleKey) => {
    setIncidents(prevIncidents => prevIncidents.map(inc => {
      if (inc.id === selectedIncidentId) {
        const updatedSignatures = {
          ...inc.signatures,
          [roleKey]: {
            signed: true,
            date: new Date().toISOString().split('T')[0],
            data: dataUrl
          }
        };
        
        // Verificar si todas están firmadas para cambiar status
        const allSigned = Object.values(updatedSignatures).every(s => s.signed);
        
        return {
          ...inc,
          signatures: updatedSignatures,
          status: allSigned ? 'CERRADO' : 'PENDIENTE_FIRMAS'
        };
      }
      return inc;
    }));
    setSigningRole(null);
  };

  // --- Renderización Condicional (Login Mock) ---

  if (!user) {
    return (
      <div className="min-h-screen bg-slate-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
        <div className="sm:mx-auto sm:w-full sm:max-w-md text-center">
          <div className="w-20 h-20 bg-blue-600 rounded-2xl mx-auto flex items-center justify-center text-white font-black text-3xl shadow-lg mb-6">
            M
          </div>
          <h2 className="mt-6 text-3xl font-extrabold text-gray-900">Mundo ABC</h2>
          <p className="mt-2 text-sm text-gray-600">Sistema de Gestión de Incidencias</p>
        </div>

        <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
          <div className="bg-white py-8 px-4 shadow-xl sm:rounded-xl sm:px-10 border border-gray-100">
            <h3 className="text-sm font-medium text-gray-500 mb-4 text-center uppercase tracking-wider">Seleccione un perfil para ingresar</h3>
            <div className="space-y-3">
              {MOCK_USERS.map((mockUser) => (
                <button
                  key={mockUser.id}
                  onClick={() => handleLogin(mockUser)}
                  className="w-full flex items-center p-4 border border-gray-200 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-all text-left group"
                >
                  <div className="w-10 h-10 rounded-full bg-blue-100 text-blue-700 flex items-center justify-center font-bold mr-4 group-hover:bg-blue-600 group-hover:text-white transition-colors">
                    {mockUser.avatar}
                  </div>
                  <div>
                    <p className="text-sm font-bold text-gray-900">{mockUser.name}</p>
                    <p className="text-xs font-medium text-gray-500 uppercase tracking-wider mt-0.5">{mockUser.role}</p>
                  </div>
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  // --- Layout Principal ---

  const SidebarContent = () => (
    <div className="h-full flex flex-col bg-slate-900 text-white">
      <div className="p-6 flex items-center justify-center border-b border-slate-800">
         <div className="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center text-white font-black text-xl mr-3 shadow-lg">
            M
          </div>
        <h1 className="text-xl font-bold tracking-tight">Mundo ABC</h1>
      </div>
      <div className="p-6">
        <div className="flex items-center space-x-3 mb-8 bg-slate-800 p-3 rounded-xl border border-slate-700">
          <div className="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center font-bold text-white shadow-inner">
            {user.avatar}
          </div>
          <div>
            <p className="text-sm font-bold truncate max-w-[120px]">{user.name}</p>
            <p className="text-xs text-slate-400 font-medium uppercase">{user.role}</p>
          </div>
        </div>

        <nav className="space-y-2">
          <button 
            onClick={() => { setCurrentView('dashboard'); setIsMenuOpen(false); }}
            className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors text-sm font-medium ${currentView === 'dashboard' ? 'bg-blue-600 text-white shadow-md' : 'text-slate-300 hover:bg-slate-800 hover:text-white'}`}
          >
            <LayoutDashboard className="w-5 h-5" />
            <span>Dashboard</span>
          </button>
          
          <button 
            onClick={() => { setCurrentView('list'); setIsMenuOpen(false); }}
            className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors text-sm font-medium ${currentView === 'list' || currentView === 'detail' ? 'bg-blue-600 text-white shadow-md' : 'text-slate-300 hover:bg-slate-800 hover:text-white'}`}
          >
            <FileText className="w-5 h-5" />
            <span>Incidencias</span>
          </button>

          {(user.role === 'ADMIN' || user.role === 'TUTOR') && (
            <button 
              onClick={() => { setCurrentView('create'); setIsMenuOpen(false); }}
              className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors text-sm font-medium ${currentView === 'create' ? 'bg-blue-600 text-white shadow-md' : 'text-slate-300 hover:bg-slate-800 hover:text-white'}`}
            >
              <Plus className="w-5 h-5" />
              <span>Nueva Incidencia</span>
            </button>
          )}

          {user.role === 'ADMIN' && (
            <button className="w-full flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-white">
              <Users className="w-5 h-5" />
              <span>Usuarios</span>
            </button>
          )}
        </nav>
      </div>
      <div className="mt-auto p-6 border-t border-slate-800">
        <button onClick={handleLogout} className="w-full flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors text-sm font-medium text-slate-400 hover:bg-red-500 hover:text-white group">
          <LogOut className="w-5 h-5 group-hover:rotate-180 transition-transform duration-300" />
          <span>Cerrar Sesión</span>
        </button>
      </div>
    </div>
  );

  return (
    <div className="flex h-screen bg-slate-50 overflow-hidden font-sans">
      {/* Mobile Sidebar Overlay */}
      {isMenuOpen && (
        <div className="fixed inset-0 bg-slate-900/50 z-40 md:hidden" onClick={() => setIsMenuOpen(false)} />
      )}

      {/* Sidebar Desktop & Mobile */}
      <aside className={`fixed inset-y-0 left-0 z-50 w-72 transform transition-transform duration-300 ease-in-out md:relative md:translate-x-0 ${isMenuOpen ? 'translate-x-0' : '-translate-x-full'}`}>
        <SidebarContent />
      </aside>

      {/* Main Content */}
      <main className="flex-1 flex flex-col overflow-hidden relative">
        {/* Header Superior (Notificaciones y Menu) */}
        <header className="bg-white border-b border-slate-200 px-4 sm:px-8 py-3 flex items-center justify-between z-30">
          <div className="flex items-center md:hidden">
            <div className="w-8 h-8 bg-blue-600 rounded-md flex items-center justify-center text-white font-bold mr-2">M</div>
            <span className="font-bold text-slate-800">Mundo ABC</span>
          </div>
          <div className="hidden md:block">
            <h2 className="text-xl font-bold text-gray-800 tracking-tight">Portal Institucional</h2>
          </div>
          <div className="flex items-center space-x-4 ml-auto">
             <div className="relative">
               <button onClick={() => setShowNotifications(!showNotifications)} className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-full transition-colors relative">
                 <Bell className="w-5 h-5" />
                 <span className="absolute top-1 right-1 w-2.5 h-2.5 bg-red-500 rounded-full border-2 border-white"></span>
               </button>
               
               {showNotifications && (
                 <div className="absolute right-0 mt-2 w-80 bg-white rounded-xl shadow-xl border border-gray-100 overflow-hidden z-50">
                    <div className="p-3 bg-slate-50 border-b border-gray-100 flex justify-between items-center">
                       <span className="font-bold text-sm text-gray-700">Notificaciones Recientes</span>
                       <span className="text-xs text-blue-600 cursor-pointer font-medium hover:underline">Marcar leídas</span>
                    </div>
                    <div className="divide-y divide-gray-50 max-h-64 overflow-y-auto">
                       {notifications.map(n => (
                         <div key={n.id} className={`p-4 hover:bg-gray-50 cursor-pointer transition-colors ${n.unread ? 'bg-blue-50/20' : ''}`}>
                            <p className="text-sm text-gray-800 font-medium">{n.text}</p>
                            <p className="text-xs text-gray-400 mt-1">{n.time}</p>
                         </div>
                       ))}
                    </div>
                 </div>
               )}
             </div>
             
             <button onClick={() => setIsMenuOpen(true)} className="p-2 text-slate-600 hover:bg-slate-100 rounded-lg md:hidden">
               <Menu className="w-6 h-6" />
             </button>
          </div>
        </header>

        {/* Content Area */}
        <div className="flex-1 overflow-auto p-4 md:p-8">
          <div className="max-w-7xl mx-auto">
            {currentView === 'dashboard' && <DashboardView incidents={incidents} role={user.role} />}
            
            {currentView === 'list' && (
              <div className="space-y-6">
                <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                  <h2 className="text-2xl font-bold text-gray-800">Registro de Incidencias</h2>
                  {(user.role === 'ADMIN' || user.role === 'TUTOR') && (
                    <Button variant="primary" icon={Plus} onClick={() => setCurrentView('create')}>Nueva Incidencia</Button>
                  )}
                </div>
                
                <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                  <div className="p-4 border-b border-gray-100 flex flex-col sm:flex-row gap-4 bg-gray-50/50">
                    <div className="relative flex-1">
                      <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
                      <input type="text" placeholder="Buscar por código o estudiante..." className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm" />
                    </div>
                    <Button variant="secondary" icon={Filter}>Filtros</Button>
                  </div>
                  <div className="overflow-x-auto">
                    <table className="w-full text-left border-collapse">
                      <thead>
                        <tr className="bg-gray-50 border-b border-gray-100">
                          <th className="p-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Código</th>
                          <th className="p-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Fecha</th>
                          <th className="p-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Estudiante</th>
                          <th className="p-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Estado</th>
                          <th className="p-4 text-xs font-semibold text-gray-500 uppercase tracking-wider text-right">Acciones</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-gray-100">
                        {incidents.map((inc) => {
                          const student = MOCK_USERS.find(u => u.id === inc.studentId);
                          return (
                            <tr key={inc.id} className="hover:bg-blue-50/30 transition-colors">
                              <td className="p-4 text-sm font-medium text-blue-600">{inc.id}</td>
                              <td className="p-4 text-sm text-gray-600">{inc.date}</td>
                              <td className="p-4">
                                <div className="text-sm font-medium text-gray-900">{student?.name}</div>
                                <div className="text-xs text-gray-500">Grado: {student?.grade}</div>
                              </td>
                              <td className="p-4">
                                <Badge variant={inc.status === 'CERRADO' ? 'green' : 'yellow'}>
                                  {inc.status.replace('_', ' ')}
                                </Badge>
                              </td>
                              <td className="p-4 text-right">
                                <Button 
                                  variant="secondary" 
                                  className="text-xs py-1.5 px-3"
                                  onClick={() => {
                                    setSelectedIncidentId(inc.id);
                                    setCurrentView('detail');
                                  }}
                                >
                                  Ver Documento
                                </Button>
                              </td>
                            </tr>
                          );
                        })}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            )}

            {currentView === 'create' && (
              <CreateIncidentView 
                onSubmit={handleCreateIncident} 
                onCancel={() => setCurrentView('list')} 
              />
            )}

            {currentView === 'detail' && (
              <IncidentDetailView 
                incident={incidents.find(i => i.id === selectedIncidentId)} 
                currentUser={user}
                onBack={() => {
                  setSelectedIncidentId(null);
                  setCurrentView('list');
                }}
                onSign={handleSignRequest}
              />
            )}
          </div>
        </div>

        {/* Modal de Firma */}
        {signingRole && (
          <SignaturePad 
            roleToSign={signingRole} 
            onSave={handleSaveSignature} 
            onCancel={() => setSigningRole(null)} 
          />
        )}
      </main>
    </div>
  );
}