import { useState, useMemo } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
import { useProject } from '../../context/ProjectContext';
import { MOCK_PROJECTS } from '../../services/mockData';

// ─── Mock Data ───────────────────────────────────────────────────────────────

const MOCK_LESSONS = [
  {
    id: 'l1',
    projectId: 'p4',
    title: 'Gestión deficiente de subcontratistas en obra',
    description: 'Los subcontratistas de instalaciones eléctricas no cumplieron con los plazos por falta de supervisión directa y contratos sin penalizaciones claras.',
    situacion: 'Durante la fase de ejecución, los subcontratistas de instalaciones eléctricas incumplieron reiteradamente los hitos de entrega, generando retrasos en cadena.',
    causaRaiz: 'Los contratos no incluían penalizaciones por incumplimiento ni criterios de aceptación medibles. La supervisión se delegó sin protocolos formales.',
    impacto: 'Retraso de 3 semanas en la entrega del piso 8, costo adicional de $45,000 USD en horas extra y remediación.',
    accionCorrectiva: 'Incluir SLAs con penalizaciones en todos los contratos de subcontratistas. Establecer reuniones de seguimiento semanales con actas firmadas.',
    type: 'NEGATIVA',
    category: 'Contratos',
    phase: 'Ejecución',
    date: '2026-03-15',
    tags: ['subcontratistas', 'contratos', 'plazos', 'supervisión'],
    relevance: 5,
  },
  {
    id: 'l2',
    projectId: 'p4',
    title: 'Uso de BIM redujo conflictos de instalaciones en 60%',
    description: 'La implementación de modelado BIM 3D antes de la construcción permitió detectar 47 conflictos entre instalaciones antes de que ocurrieran en obra.',
    situacion: 'Se implementó BIM Level 2 en la fase de planificación para coordinar estructuras, MEP y arquitectura.',
    causaRaiz: 'Decisión proactiva del equipo de proyecto de invertir en tecnología de coordinación.',
    impacto: 'Reducción del 60% en RFIs relacionados a conflictos, ahorro estimado de $120,000 USD en correcciones en campo.',
    accionCorrectiva: 'Aplicar BIM Level 2 como estándar en todos los proyectos de construcción mayores a $5M USD.',
    type: 'POSITIVA',
    category: 'Técnico',
    phase: 'Planificación',
    date: '2026-02-20',
    tags: ['BIM', 'coordinación', 'tecnología', 'calidad'],
    relevance: 5,
  },
  {
    id: 'l3',
    projectId: 'p4',
    title: 'Inspecciones de calidad sin criterios documentados',
    description: 'Las inspecciones de calidad del concreto no tenían criterios de aceptación/rechazo escritos, generando disputas entre supervisores y contratistas.',
    situacion: 'El inspector de calidad rechazó una colada de concreto sin criterios escritos, lo que generó una disputa legal con el proveedor.',
    causaRaiz: 'El plan de calidad no fue actualizado con los estándares NMX aplicables antes del inicio de la fase de estructura.',
    impacto: 'Paralización de 5 días, honorarios legales de $8,000 USD, tensión con el proveedor principal.',
    accionCorrectiva: 'Crear checklist de criterios de aceptación por cada actividad de control de calidad antes del inicio de cada fase.',
    type: 'NEGATIVA',
    category: 'Calidad',
    phase: 'Ejecución',
    date: '2026-04-10',
    tags: ['calidad', 'inspección', 'criterios', 'concreto'],
    relevance: 4,
  },
  {
    id: 'l4',
    projectId: 'p4',
    title: 'Sesiones de grabación con horario flexible aumentaron creatividad',
    description: 'Permitir que los artistas eligieran sus horarios de grabación en lugar de bloques fijos resultó en tomas de mayor calidad en menos tiempo.',
    situacion: 'Se experimentó con bloques de tiempo abiertos para que los artistas grabaran cuando se sintieran más creativos.',
    causaRaiz: 'Propuesta del productor basada en experiencias previas con artistas de pop latino.',
    impacto: 'Reducción del 25% en tiempo de estudio, mejora notable en la energía de las grabaciones según la dirección artística.',
    accionCorrectiva: 'Aplicar modelo de horario flexible en proyectos musicales donde el presupuesto de estudio lo permita.',
    type: 'POSITIVA',
    category: 'Gestión',
    phase: 'Ejecución',
    date: '2026-01-18',
    tags: ['creatividad', 'gestión', 'artistas', 'productividad'],
    relevance: 4,
  },
  {
    id: 'l5',
    projectId: 'p4',
    title: 'Derechos de autor de samples no verificados al inicio',
    description: 'Dos samples utilizados en el álbum no tenían clearing de derechos, lo que obligó a regrabaciones costosas en post-producción.',
    situacion: 'Durante la masterización se descubrió que dos tracks usaban samples sin licencia de obras registradas en ASCAP.',
    causaRaiz: 'No existía un proceso formal de verificación de derechos antes de aprobar samples para producción.',
    impacto: 'Costo adicional de $22,000 USD en regrabación y clearing retroactivo, retraso de 4 semanas en la fecha de lanzamiento.',
    accionCorrectiva: 'Establecer checklist de clearing de derechos como gate obligatorio antes de aprobar cualquier sample en producción.',
    type: 'NEGATIVA',
    category: 'Contratos',
    phase: 'Ejecución',
    date: '2026-02-05',
    tags: ['derechos', 'samples', 'legal', 'música'],
    relevance: 5,
  },
  {
    id: 'l6',
    projectId: 'p4',
    title: 'Gestión deficiente de subcontratistas de implementación ERP',
    description: 'El proveedor de módulo de RRHH no cumplió con los entregables de integración, replicando el mismo patrón de problemas del proyecto p1.',
    situacion: 'El subcontratista de RRHH entregó módulos sin pruebas de integración completas, causando fallos en UAT.',
    causaRaiz: 'Al igual que en proyectos de construcción, los contratos no incluían criterios de aceptación técnicos ni penalizaciones por defectos en entrega.',
    impacto: 'Fase UAT extendida 6 semanas, costo adicional de $35,000 USD en soporte y correcciones.',
    accionCorrectiva: 'Aplicar el aprendizaje del proyecto p1: contratos con criterios técnicos de aceptación, penalizaciones y reuniones de seguimiento semanales obligatorias.',
    type: 'NEGATIVA',
    category: 'Contratos',
    phase: 'Ejecución',
    date: '2026-03-22',
    tags: ['subcontratistas', 'ERP', 'contratos', 'integración'],
    relevance: 5,
  },
  {
    id: 'l7',
    projectId: 'p4',
    title: 'Change management insuficiente generó resistencia al ERP',
    description: 'Los usuarios finales no fueron involucrados durante el diseño, generando baja adopción y solicitudes de cambio masivas después del go-live.',
    situacion: 'Después del go-live, el 40% de los usuarios seguían usando hojas de cálculo paralelas por desconocimiento o desconfianza del sistema.',
    causaRaiz: 'El plan de change management se limitó a capacitaciones de 2 horas al final del proyecto. No hubo champions internos ni comunicación continua.',
    impacto: 'ROI del ERP comprometido en el primer año, soporte post-go-live multiplicado por 3x, insatisfacción del cliente.',
    accionCorrectiva: 'Implementar programa de change management desde la fase de inicio: champions, comunicación mensual, talleres participativos de diseño.',
    type: 'NEGATIVA',
    category: 'Gestión',
    phase: 'Cierre',
    date: '2026-05-01',
    tags: ['change management', 'adopción', 'ERP', 'usuarios'],
    relevance: 5,
  },
  {
    id: 'l8',
    projectId: 'p4',
    title: 'Ambiente de pruebas separado del productivo evitó crisis',
    description: 'Mantener un ambiente de staging idéntico al productivo permitió detectar un error crítico de migración de datos antes del go-live.',
    situacion: 'Durante las pruebas de carga en staging se detectó que la migración de datos históricos corrompía registros de proveedores con caracteres especiales.',
    causaRaiz: 'El equipo técnico insistió en mantener staging sincronizado semanalmente con estructura de producción.',
    impacto: 'Se evitó una crisis de datos en producción. Corrección realizada en staging sin impacto al negocio.',
    accionCorrectiva: 'Documentar como estándar: todo proyecto ERP debe tener ambiente de staging sincronizado con producción durante la fase de pruebas.',
    type: 'POSITIVA',
    category: 'Técnico',
    phase: 'Control',
    date: '2026-04-15',
    tags: ['testing', 'staging', 'datos', 'ERP'],
    relevance: 4,
  },
  {
    id: 'l9',
    projectId: 'p4',
    title: 'Componentes reutilizables aceleraron el desarrollo 40%',
    description: 'La creación de una librería de componentes compartidos desde el inicio del proyecto redujo significativamente el tiempo de desarrollo de nuevas páginas.',
    situacion: 'Se invirtieron 2 semanas al inicio del proyecto en crear componentes base (cards, tables, charts, modals) con Tailwind CSS.',
    causaRaiz: 'Decisión arquitectónica del equipo de frontend de priorizar reusabilidad sobre velocidad inicial.',
    impacto: 'A partir del sprint 3, cada nueva página tomó 40% menos tiempo. Consistencia visual sin esfuerzo adicional.',
    accionCorrectiva: 'Iniciar todo proyecto de frontend con sprint de componentes base antes de desarrollar features.',
    type: 'POSITIVA',
    category: 'Técnico',
    phase: 'Planificación',
    date: '2026-01-10',
    tags: ['componentes', 'frontend', 'reusabilidad', 'tailwind'],
    relevance: 4,
  },
  {
    id: 'l10',
    projectId: 'p4',
    title: 'Falta de validación con usuarios reales generó rediseños',
    description: 'Tres módulos fueron rediseñados completamente después del primer demo con el cliente porque las suposiciones del equipo no reflejaban los flujos reales de trabajo.',
    situacion: 'En el demo del sprint 5, el cliente indicó que los flujos de aprobación del módulo de recursos no correspondían a su proceso real.',
    causaRaiz: 'El equipo diseñó basándose en suposiciones sin realizar entrevistas de usuario ni observación de flujos reales.',
    impacto: 'Retraso de 2 sprints, 80 horas de rediseño y recodificación, frustración del equipo.',
    accionCorrectiva: 'Realizar sesiones de descubrimiento de usuario (user interviews + shadowing) antes de diseñar cualquier módulo nuevo.',
    type: 'NEGATIVA',
    category: 'Cliente',
    phase: 'Planificación',
    date: '2026-02-28',
    tags: ['UX', 'usuarios', 'diseño', 'validación'],
    relevance: 4,
  },
  {
    id: 'l11',
    projectId: 'p4',
    title: 'Protocolo de seguridad en altura redujo incidentes a cero',
    description: 'La implementación de un protocolo HSE estricto para trabajos en altura, con doble check y supervisión dedicada, resultó en cero incidentes durante toda la fase estructural.',
    situacion: 'Se implementó protocolo de doble verificación de arneses y puntos de anclaje antes de cada turno de trabajo en altura.',
    causaRaiz: 'Lección aprendida de un incidente en un proyecto anterior de la empresa.',
    impacto: 'Cero incidentes en 8 meses de trabajos en altura. Reducción de primas de seguro para proyectos futuros.',
    accionCorrectiva: 'Estandarizar el protocolo de doble verificación HSE en todos los proyectos de construcción.',
    type: 'POSITIVA',
    category: 'HSE',
    phase: 'Ejecución',
    date: '2026-05-10',
    tags: ['seguridad', 'altura', 'HSE', 'protocolo'],
    relevance: 5,
  },
  {
    id: 'l12',
    projectId: 'p4',
    title: 'Presupuesto de mezcla subestimado por iteraciones del cliente',
    description: 'El cliente solicitó 12 rondas de revisión de mezcla en lugar de las 3 contempladas, generando un sobrecosto significativo en el álbum.',
    situacion: 'Sony Music Latin solicitó revisiones adicionales de mezcla para 8 de los 14 tracks, argumentando cambios en la dirección artística.',
    causaRaiz: 'El contrato no especificaba el número máximo de rondas de revisión incluidas en el presupuesto.',
    impacto: 'Sobrecosto de $18,000 USD en horas de estudio y honorarios del mixer.',
    accionCorrectiva: 'Incluir cláusula explícita de número de revisiones incluidas y tarifa por revisión adicional en todos los contratos de producción.',
    type: 'NEGATIVA',
    category: 'Financiero',
    phase: 'Ejecución',
    date: '2026-03-05',
    tags: ['presupuesto', 'revisiones', 'contrato', 'cliente'],
    relevance: 3,
  },
];

// ─── Constants ───────────────────────────────────────────────────────────────

const CATEGORIES = ['Técnico', 'Gestión', 'Calidad', 'HSE', 'Financiero', 'Cliente', 'Contratos'];
const TYPES = ['POSITIVA', 'NEGATIVA', 'MEJORA'];
const PHASES = ['Inicio', 'Planificación', 'Ejecución', 'Control', 'Cierre'];

const TYPE_CONFIG = {
  POSITIVA: { label: 'Positiva', icon: '✓', color: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400', dot: 'bg-emerald-500' },
  NEGATIVA: { label: 'Negativa', icon: '✗', color: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400', dot: 'bg-red-500' },
  MEJORA:   { label: 'Mejora',   icon: '↑', color: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400', dot: 'bg-amber-500' },
};

const CATEGORY_COLORS = {
  Técnico: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
  Gestión: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
  Calidad: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-400',
  HSE: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
  Financiero: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
  Cliente: 'bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-400',
  Contratos: 'bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300',
};

const PIE_COLORS = { POSITIVA: '#10b981', NEGATIVA: '#ef4444', MEJORA: '#f59e0b' };

// ─── Sub-components ──────────────────────────────────────────────────────────

function StarRating({ value, onChange }) {
  return (
    <div className="flex gap-1">
      {[1, 2, 3, 4, 5].map((star) => (
        <button
          key={star}
          type="button"
          onClick={() => onChange && onChange(star)}
          className={`text-xl transition-colors ${star <= value ? 'text-amber-400' : 'text-slate-300 dark:text-slate-600'} ${onChange ? 'hover:text-amber-300 cursor-pointer' : 'cursor-default'}`}
        >
          ★
        </button>
      ))}
    </div>
  );
}

function Badge({ label, colorClass }) {
  return (
    <span className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${colorClass}`}>{label}</span>
  );
}

function LessonCard({ lesson, onViewDetail }) {
  const project = MOCK_PROJECTS.find((p) => p.id === lesson.projectId);
  const typeConf = TYPE_CONFIG[lesson.type];

  return (
    <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-700 p-5 flex flex-col gap-3 hover:shadow-md transition-shadow">
      <div className="flex items-start justify-between gap-2">
        <div className="flex flex-wrap gap-1.5">
          <Badge label={lesson.category} colorClass={CATEGORY_COLORS[lesson.category] || 'bg-slate-100 text-slate-700'} />
          <span className={`rounded-full px-2.5 py-0.5 text-xs font-semibold flex items-center gap-1 ${typeConf.color}`}>
            <span>{typeConf.icon}</span> {typeConf.label}
          </span>
        </div>
        <StarRating value={lesson.relevance} />
      </div>

      <div>
        <h3 className="text-sm font-semibold text-slate-900 dark:text-white leading-snug line-clamp-2">{lesson.title}</h3>
        <p className="text-xs text-slate-500 dark:text-slate-400 mt-1 line-clamp-3">{lesson.description}</p>
      </div>

      <div className="flex flex-wrap gap-1">
        {lesson.tags.map((tag) => (
          <span key={tag} className="bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-full px-2 py-0.5 text-xs">#{tag}</span>
        ))}
      </div>

      <div className="flex items-center justify-between mt-auto pt-2 border-t border-slate-100 dark:border-slate-800">
        <div>
          <p className="text-xs font-medium text-slate-700 dark:text-slate-300">{project?.code}</p>
          <p className="text-xs text-slate-400">{lesson.date} · {lesson.phase}</p>
        </div>
        <button
          onClick={() => onViewDetail(lesson)}
          className="text-xs text-blue-600 dark:text-blue-400 hover:underline font-medium"
        >
          Ver detalle →
        </button>
      </div>
    </div>
  );
}

function LessonDetailModal({ lesson, onClose }) {
  if (!lesson) return null;
  const project = MOCK_PROJECTS.find((p) => p.id === lesson.projectId);
  const typeConf = TYPE_CONFIG[lesson.type];

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
      <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-700 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        <div className="p-6 border-b border-slate-100 dark:border-slate-800 flex items-start justify-between gap-4">
          <div className="flex flex-wrap gap-2">
            <Badge label={lesson.category} colorClass={CATEGORY_COLORS[lesson.category] || ''} />
            <span className={`rounded-full px-2.5 py-0.5 text-xs font-semibold flex items-center gap-1 ${typeConf.color}`}>
              {typeConf.icon} {typeConf.label}
            </span>
            <Badge label={lesson.phase} colorClass="bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300" />
          </div>
          <button onClick={onClose} className="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 text-xl font-bold leading-none">×</button>
        </div>

        <div className="p-6 space-y-5">
          <div>
            <h2 className="text-lg font-bold text-slate-900 dark:text-white">{lesson.title}</h2>
            <div className="flex items-center gap-3 mt-1">
              <StarRating value={lesson.relevance} />
              <span className="text-xs text-slate-400">{project?.name} · {lesson.date}</span>
            </div>
          </div>

          {[
            { label: 'Situación', value: lesson.situacion },
            { label: 'Causa raíz', value: lesson.causaRaiz },
            { label: 'Impacto', value: lesson.impacto },
            { label: 'Acción correctiva / Recomendación', value: lesson.accionCorrectiva },
          ].map(({ label, value }) => (
            <div key={label}>
              <h4 className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase mb-1">{label}</h4>
              <p className="text-sm text-slate-700 dark:text-slate-300">{value}</p>
            </div>
          ))}

          <div>
            <h4 className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase mb-2">Etiquetas</h4>
            <div className="flex flex-wrap gap-1.5">
              {lesson.tags.map((tag) => (
                <span key={tag} className="bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-full px-2.5 py-0.5 text-xs">#{tag}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Tab: Base de Conocimiento ───────────────────────────────────────────────

function KnowledgeBaseTab({ lessons }) {
  const [search, setSearch] = useState('');
  const [activeCategories, setActiveCategories] = useState([]);
  const [activeTypes, setActiveTypes] = useState([]);
  const [selectedLesson, setSelectedLesson] = useState(null);

  const toggleFilter = (value, list, setList) => {
    setList(list.includes(value) ? list.filter((v) => v !== value) : [...list, value]);
  };

  const filtered = useMemo(() => {
    return lessons.filter((l) => {
      const q = search.toLowerCase();
      const matchSearch = !q || l.title.toLowerCase().includes(q) || l.description.toLowerCase().includes(q) || l.tags.some((t) => t.toLowerCase().includes(q));
      const matchCat = !activeCategories.length || activeCategories.includes(l.category);
      const matchType = !activeTypes.length || activeTypes.includes(l.type);
      return matchSearch && matchCat && matchType;
    });
  }, [lessons, search, activeCategories, activeTypes]);

  return (
    <div className="space-y-5">
      <div className="flex flex-col sm:flex-row gap-3">
        <input
          type="text"
          placeholder="Buscar lecciones por título, descripción o etiqueta..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="flex-1 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl px-4 py-2.5 text-sm text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <span className="text-sm text-slate-500 dark:text-slate-400 flex items-center">{filtered.length} resultado{filtered.length !== 1 ? 's' : ''}</span>
      </div>

      <div className="space-y-2">
        <div className="flex flex-wrap gap-2">
          <span className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase self-center">Categoría:</span>
          {CATEGORIES.map((cat) => (
            <button
              key={cat}
              onClick={() => toggleFilter(cat, activeCategories, setActiveCategories)}
              className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${activeCategories.includes(cat) ? 'bg-blue-600 text-white' : 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700'}`}
            >
              {cat}
            </button>
          ))}
        </div>
        <div className="flex flex-wrap gap-2">
          <span className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase self-center">Tipo:</span>
          {TYPES.map((type) => (
            <button
              key={type}
              onClick={() => toggleFilter(type, activeTypes, setActiveTypes)}
              className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${activeTypes.includes(type) ? TYPE_CONFIG[type].color + ' ring-2 ring-current' : 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700'}`}
            >
              {TYPE_CONFIG[type].icon} {TYPE_CONFIG[type].label}
            </button>
          ))}
        </div>
      </div>

      {filtered.length === 0 ? (
        <div className="text-center py-16 text-slate-400">
          <p className="text-4xl mb-3">🔍</p>
          <p className="text-sm">No se encontraron lecciones con esos filtros.</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
          {filtered.map((lesson) => (
            <LessonCard key={lesson.id} lesson={lesson} onViewDetail={setSelectedLesson} />
          ))}
        </div>
      )}

      <LessonDetailModal lesson={selectedLesson} onClose={() => setSelectedLesson(null)} />
    </div>
  );
}

// ─── Tab: Registrar Lección ──────────────────────────────────────────────────

const EMPTY_FORM = {
  title: '',
  type: 'NEGATIVA',
  category: '',
  projectId: '',
  phase: '',
  situacion: '',
  causaRaiz: '',
  impacto: '',
  accionCorrectiva: '',
  tags: [],
  relevance: 3,
};

function RegisterTab({ onAdd }) {
  const [form, setForm] = useState(EMPTY_FORM);
  const [tagInput, setTagInput] = useState('');
  const [saved, setSaved] = useState(false);

  const set = (field, value) => setForm((f) => ({ ...f, [field]: value }));

  const addTag = () => {
    const t = tagInput.trim().toLowerCase().replace(/^#/, '');
    if (t && !form.tags.includes(t)) set('tags', [...form.tags, t]);
    setTagInput('');
  };

  const removeTag = (tag) => set('tags', form.tags.filter((t) => t !== tag));

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.title || !form.category || !form.projectId || !form.phase) return;
    const newLesson = {
      ...form,
      id: `l${Date.now()}`,
      date: new Date().toISOString().split('T')[0],
      description: form.situacion.slice(0, 120) + (form.situacion.length > 120 ? '...' : ''),
    };
    onAdd(newLesson);
    setForm(EMPTY_FORM);
    setTagInput('');
    setSaved(true);
    setTimeout(() => setSaved(false), 3000);
  };

  const labelClass = 'block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase mb-1.5';
  const inputClass = 'w-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl px-4 py-2.5 text-sm text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500';
  const textareaClass = inputClass + ' resize-none';

  return (
    <div className="max-w-3xl">
      <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-700 p-6">
        <h2 className="text-base font-bold text-slate-900 dark:text-white mb-6">Nueva Lección Aprendida</h2>

        {saved && (
          <div className="mb-5 bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800 rounded-xl px-4 py-3 text-sm text-emerald-700 dark:text-emerald-400 font-medium">
            ✓ Lección registrada correctamente en la base de conocimiento.
          </div>
        )}

        <form onSubmit={handleSubmit} className="space-y-5">
          <div>
            <label className={labelClass}>Título *</label>
            <input className={inputClass} placeholder="Describe brevemente la lección aprendida" value={form.title} onChange={(e) => set('title', e.target.value)} required />
          </div>

          <div>
            <label className={labelClass}>Tipo *</label>
            <div className="flex gap-2">
              {TYPES.map((type) => (
                <button
                  key={type}
                  type="button"
                  onClick={() => set('type', type)}
                  className={`flex-1 rounded-xl py-2.5 text-sm font-semibold transition-all ${form.type === type ? TYPE_CONFIG[type].color + ' ring-2 ring-offset-1 ring-current' : 'border border-slate-200 dark:border-slate-700 text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800'}`}
                >
                  {TYPE_CONFIG[type].icon} {TYPE_CONFIG[type].label}
                </button>
              ))}
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
              <label className={labelClass}>Categoría *</label>
              <select className={inputClass} value={form.category} onChange={(e) => set('category', e.target.value)} required>
                <option value="">Seleccionar...</option>
                {CATEGORIES.map((c) => <option key={c} value={c}>{c}</option>)}
              </select>
            </div>
            <div>
              <label className={labelClass}>Proyecto *</label>
              <select className={inputClass} value={form.projectId} onChange={(e) => set('projectId', e.target.value)} required>
                <option value="">Seleccionar...</option>
                {MOCK_PROJECTS.map((p) => <option key={p.id} value={p.id}>{p.code}</option>)}
              </select>
            </div>
            <div>
              <label className={labelClass}>Fase *</label>
              <select className={inputClass} value={form.phase} onChange={(e) => set('phase', e.target.value)} required>
                <option value="">Seleccionar...</option>
                {PHASES.map((ph) => <option key={ph} value={ph}>{ph}</option>)}
              </select>
            </div>
          </div>

          <div>
            <label className={labelClass}>Situación — ¿Qué ocurrió?</label>
            <textarea className={textareaClass} rows={3} placeholder="Describe el contexto y lo que sucedió..." value={form.situacion} onChange={(e) => set('situacion', e.target.value)} />
          </div>

          <div>
            <label className={labelClass}>Causa raíz — ¿Por qué ocurrió?</label>
            <textarea className={textareaClass} rows={3} placeholder="Identifica la causa raíz del problema o éxito..." value={form.causaRaiz} onChange={(e) => set('causaRaiz', e.target.value)} />
          </div>

          <div>
            <label className={labelClass}>Impacto — ¿Cuál fue el efecto?</label>
            <textarea className={textareaClass} rows={3} placeholder="Describe el impacto en tiempo, costo, calidad o alcance..." value={form.impacto} onChange={(e) => set('impacto', e.target.value)} />
          </div>

          <div>
            <label className={labelClass}>Acción correctiva / Recomendación</label>
            <textarea className={textareaClass} rows={3} placeholder="¿Qué se debe hacer diferente la próxima vez?" value={form.accionCorrectiva} onChange={(e) => set('accionCorrectiva', e.target.value)} />
          </div>

          <div>
            <label className={labelClass}>Etiquetas</label>
            <div className="flex gap-2">
              <input
                className={inputClass}
                placeholder="Escribe una etiqueta y presiona Enter o +"
                value={tagInput}
                onChange={(e) => setTagInput(e.target.value)}
                onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addTag(); } }}
              />
              <button type="button" onClick={addTag} className="border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-xl px-4 py-2.5 text-sm font-medium transition-colors">+</button>
            </div>
            {form.tags.length > 0 && (
              <div className="flex flex-wrap gap-1.5 mt-2">
                {form.tags.map((tag) => (
                  <span key={tag} className="bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 rounded-full px-2.5 py-0.5 text-xs font-medium flex items-center gap-1">
                    #{tag}
                    <button type="button" onClick={() => removeTag(tag)} className="ml-0.5 hover:text-blue-900 dark:hover:text-blue-200">×</button>
                  </span>
                ))}
              </div>
            )}
          </div>

          <div>
            <label className={labelClass}>Relevancia</label>
            <StarRating value={form.relevance} onChange={(v) => set('relevance', v)} />
            <p className="text-xs text-slate-400 mt-1">¿Qué tan útil es esta lección para futuros proyectos?</p>
          </div>

          <div className="flex justify-end pt-2">
            <button type="submit" className="bg-blue-600 hover:bg-blue-700 text-white rounded-xl px-6 py-2.5 text-sm font-medium transition-colors">
              Guardar Lección
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

// ─── Tab: Análisis ───────────────────────────────────────────────────────────

const CustomPieLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, name, percent }) => {
  if (percent < 0.06) return null;
  const RADIAN = Math.PI / 180;
  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
  const x = cx + radius * Math.cos(-midAngle * RADIAN);
  const y = cy + radius * Math.sin(-midAngle * RADIAN);
  return (
    <text x={x} y={y} fill="white" textAnchor="middle" dominantBaseline="central" fontSize={12} fontWeight={600}>
      {`${(percent * 100).toFixed(0)}%`}
    </text>
  );
};

function AnalysisTab({ lessons }) {
  const byCategory = useMemo(() => {
    const map = {};
    lessons.forEach((l) => { map[l.category] = (map[l.category] || 0) + 1; });
    return Object.entries(map).map(([name, count]) => ({ name, count })).sort((a, b) => b.count - a.count);
  }, [lessons]);

  const byType = useMemo(() => {
    const map = {};
    lessons.forEach((l) => { map[l.type] = (map[l.type] || 0) + 1; });
    return Object.entries(map).map(([name, value]) => ({ name, value }));
  }, [lessons]);

  const byProject = useMemo(() => {
    const map = {};
    lessons.forEach((l) => {
      const project = MOCK_PROJECTS.find((p) => p.id === l.projectId);
      const key = project?.code || l.projectId;
      map[key] = (map[key] || 0) + 1;
    });
    return Object.entries(map).map(([name, count]) => ({ name, count }));
  }, [lessons]);

  const top5 = useMemo(() => [...lessons].sort((a, b) => b.relevance - a.relevance).slice(0, 5), [lessons]);

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-700 p-6">
          <h3 className="text-sm font-semibold text-slate-900 dark:text-white mb-4">Lecciones por Categoría</h3>
          <ResponsiveContainer width="100%" height={260}>
            <BarChart data={byCategory} layout="vertical" margin={{ left: 10, right: 20 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
              <XAxis type="number" tick={{ fontSize: 11 }} allowDecimals={false} />
              <YAxis type="category" dataKey="name" tick={{ fontSize: 11 }} width={75} />
              <Tooltip contentStyle={{ borderRadius: 12, border: 'none', boxShadow: '0 4px 24px rgba(0,0,0,0.1)' }} />
              <Bar dataKey="count" name="Lecciones" fill="#3b82f6" radius={[0, 6, 6, 0]} />
            </BarChart>
          </ResponsiveContainer>
        </div>

        <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-700 p-6">
          <h3 className="text-sm font-semibold text-slate-900 dark:text-white mb-4">Distribución por Tipo</h3>
          <ResponsiveContainer width="100%" height={260}>
            <PieChart>
              <Pie data={byType} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={100} labelLine={false} label={CustomPieLabel}>
                {byType.map((entry) => (
                  <Cell key={entry.name} fill={PIE_COLORS[entry.name] || '#8b5cf6'} />
                ))}
              </Pie>
              <Tooltip contentStyle={{ borderRadius: 12, border: 'none', boxShadow: '0 4px 24px rgba(0,0,0,0.1)' }} formatter={(value, name) => [value, TYPE_CONFIG[name]?.label || name]} />
              <Legend formatter={(value) => TYPE_CONFIG[value]?.label || value} />
            </PieChart>
          </ResponsiveContainer>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-700 p-6">
          <h3 className="text-sm font-semibold text-slate-900 dark:text-white mb-4">Lecciones por Proyecto</h3>
          <ResponsiveContainer width="100%" height={220}>
            <BarChart data={byProject} margin={{ bottom: 20 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
              <XAxis dataKey="name" tick={{ fontSize: 10 }} angle={-15} textAnchor="end" />
              <YAxis tick={{ fontSize: 11 }} allowDecimals={false} />
              <Tooltip contentStyle={{ borderRadius: 12, border: 'none', boxShadow: '0 4px 24px rgba(0,0,0,0.1)' }} />
              <Bar dataKey="count" name="Lecciones" fill="#8b5cf6" radius={[6, 6, 0, 0]} />
            </BarChart>
          </ResponsiveContainer>
        </div>

        <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-700 p-6">
          <h3 className="text-sm font-semibold text-slate-900 dark:text-white mb-4">Top 5 Lecciones más Relevantes</h3>
          <div className="space-y-3">
            {top5.map((lesson, idx) => {
              const typeConf = TYPE_CONFIG[lesson.type];
              return (
                <div key={lesson.id} className="flex items-start gap-3">
                  <span className="text-xs font-bold text-slate-400 dark:text-slate-500 w-4 shrink-0 mt-0.5">#{idx + 1}</span>
                  <div className="flex-1 min-w-0">
                    <p className="text-xs font-semibold text-slate-900 dark:text-white line-clamp-2">{lesson.title}</p>
                    <div className="flex items-center gap-2 mt-0.5">
                      <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${typeConf.color}`}>{typeConf.icon} {typeConf.label}</span>
                      <StarRating value={lesson.relevance} />
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <div className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30 rounded-2xl border border-blue-100 dark:border-blue-900/30 p-6">
        <div className="flex items-start gap-3">
          <span className="text-2xl">💡</span>
          <div>
            <h3 className="text-sm font-bold text-blue-900 dark:text-blue-300 mb-2">Insight del Sistema</h3>
            <p className="text-sm text-blue-800 dark:text-blue-400 leading-relaxed">
              Los proyectos de tipo <strong>Construcción</strong> y <strong>ERP</strong> comparten el mismo patrón de riesgo:
              gestión deficiente de subcontratistas con contratos sin criterios de aceptación ni penalizaciones.
              Esta lección apareció de forma independiente en <strong>PRY-2026-004</strong> y <strong>PRY-2026-004</strong>,
              sugiriendo que la plantilla estándar de contratos debe ser revisada como acción organizacional.
              Los proyectos de <strong>Construcción</strong> generan 3× más lecciones de <strong>Calidad</strong> y <strong>HSE</strong>
              que los proyectos de Software, lo que requiere un mayor foco en aseguramiento previo a la ejecución.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Main Page ───────────────────────────────────────────────────────────────

const TABS = [
  { id: 'knowledge', label: 'Base de Conocimiento' },
  { id: 'register', label: 'Registrar Lección' },
  { id: 'analysis', label: 'Análisis' },
];

export default function LessonsLearnedPage() {
  const { selectedProjectId } = useProject();
  const [activeTab, setActiveTab] = useState('knowledge');
  const [lessons, setLessons] = useState(MOCK_LESSONS);

  const filteredLessons = useMemo(() => {
    return !selectedProjectId ? lessons : lessons.filter((l) => l.projectId === selectedProjectId);
  }, [lessons, selectedProjectId]);

  const handleAddLesson = (lesson) => {
    setLessons((prev) => [lesson, ...prev]);
    setActiveTab('knowledge');
  };

  const kpis = useMemo(() => {
    const positivas = filteredLessons.filter((l) => l.type === 'POSITIVA').length;
    const negativas = filteredLessons.filter((l) => l.type === 'NEGATIVA').length;
    const avgRel = filteredLessons.length ? (filteredLessons.reduce((s, l) => s + l.relevance, 0) / filteredLessons.length).toFixed(1) : '—';
    return { total: filteredLessons.length, positivas, negativas, avgRel };
  }, [filteredLessons]);

  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-950 p-4 md:p-6 lg:p-8">
      <div className="max-w-7xl mx-auto space-y-6">

        {/* Header */}
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <h1 className="text-2xl font-bold text-slate-900 dark:text-white">Lecciones Aprendidas</h1>
            <p className="text-slate-500 dark:text-slate-400 text-sm mt-0.5">
              Base de conocimiento organizacional — {kpis.total} lección{kpis.total !== 1 ? 'es' : ''} registrada{kpis.total !== 1 ? 's' : ''}
              {selectedProjectId && ` · ${MOCK_PROJECTS.find((p) => p.id === selectedProjectId)?.code}`}
            </p>
          </div>
          <button
            onClick={() => setActiveTab('register')}
            className="bg-blue-600 hover:bg-blue-700 text-white rounded-xl px-4 py-2.5 text-sm font-medium transition-colors self-start sm:self-auto"
          >
            + Nueva Lección
          </button>
        </div>

        {/* KPI Cards */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {[
            { label: 'Total de Lecciones', value: kpis.total, sub: 'en base de conocimiento', color: 'text-blue-600 dark:text-blue-400' },
            { label: 'Positivas', value: kpis.positivas, sub: 'buenas prácticas', color: 'text-emerald-600 dark:text-emerald-400' },
            { label: 'Negativas', value: kpis.negativas, sub: 'errores documentados', color: 'text-red-600 dark:text-red-400' },
            { label: 'Relevancia Promedio', value: `${kpis.avgRel} / 5`, sub: 'valor para futuros proyectos', color: 'text-amber-600 dark:text-amber-400' },
          ].map((kpi) => (
            <div key={kpi.label} className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-700 p-5">
              <p className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase">{kpi.label}</p>
              <p className={`text-2xl font-bold mt-1 ${kpi.color}`}>{kpi.value}</p>
              <p className="text-xs text-slate-400 mt-0.5">{kpi.sub}</p>
            </div>
          ))}
        </div>

        {/* Tabs */}
        <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-700 overflow-hidden">
          <div className="flex border-b border-slate-200 dark:border-slate-700 px-6">
            {TABS.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`py-4 px-4 text-sm font-medium transition-colors mr-2 ${activeTab === tab.id ? 'border-b-2 border-blue-600 text-blue-600 dark:text-blue-400' : 'border-b-2 border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'}`}
              >
                {tab.label}
              </button>
            ))}
          </div>

          <div className="p-6">
            {activeTab === 'knowledge' && <KnowledgeBaseTab lessons={filteredLessons} />}
            {activeTab === 'register' && <RegisterTab onAdd={handleAddLesson} />}
            {activeTab === 'analysis' && <AnalysisTab lessons={filteredLessons} />}
          </div>
        </div>

      </div>
    </div>
  );
}
