import React, { useState, useMemo } from 'react';
import {
  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
  LineChart, Line, Cell, ReferenceLine,
} from 'recharts';
import { useProject } from '../../context/ProjectContext';

// ─────────────────────────────────────────────────────────────
// MOCK DATA
// ─────────────────────────────────────────────────────────────
const MOCK_CRS = [
  {
    id: 'CR-001', origen: 'Cliente', tipo: ['Alcance', 'Plazo'], proyecto: 'PRY-001', projectId: 'p4',
    descripcion: 'Ampliación del muelle de atraque en 15 metros adicionales',
    justificacion: 'El cliente requiere capacidad para embarcaciones de mayor calado',
    impactoCosto: 45000, impactoDias: 15, urgencia: 'Normal',
    estado: 'Aprobado', fecha: '2025-03-10',
    recursos: 'Acero estructural adicional, 3 operarios extra',
    riesgos: 'Posible interferencia con trabajos adyacentes',
    pasos: [
      { nombre: 'Evaluación técnica', responsable: 'Ing. García', estado: 'Aprobado', fecha: '2025-03-12', comentario: 'Factible técnicamente' },
      { nombre: 'Evaluación financiera', responsable: 'Fin. López', estado: 'Aprobado', fecha: '2025-03-14', comentario: 'Dentro de márgenes' },
      { nombre: 'Evaluación HSE', responsable: 'HSE. Martín', estado: 'Aprobado', fecha: '2025-03-15', comentario: 'Sin riesgo adicional' },
      { nombre: 'Aprobación Director', responsable: 'Dir. Sánchez', estado: 'Aprobado', fecha: '2025-03-16', comentario: 'Aprobado con condiciones' },
    ],
  },
  {
    id: 'CR-002', origen: 'Técnico', tipo: ['Técnico', 'Costo'], proyecto: 'PRY-001', projectId: 'p4',
    descripcion: 'Sustitución de materiales: acero A36 por acero A572 por problemas de disponibilidad',
    justificacion: 'Proveedor no puede entregar acero A36 en tiempo requerido',
    impactoCosto: 12000, impactoDias: 0, urgencia: 'Urgente',
    estado: 'En evaluación técnica', fecha: '2025-04-02',
    recursos: 'Mismo equipo, coordinación con proveedor alternativo',
    riesgos: 'Requiere recálculo de soldaduras',
    pasos: [
      { nombre: 'Evaluación técnica', responsable: 'Ing. García', estado: 'En revisión', fecha: null, comentario: '' },
      { nombre: 'Evaluación financiera', responsable: 'Fin. López', estado: 'Pendiente', fecha: null, comentario: '' },
      { nombre: 'Evaluación HSE', responsable: 'HSE. Martín', estado: 'Pendiente', fecha: null, comentario: '' },
      { nombre: 'Aprobación Director', responsable: 'Dir. Sánchez', estado: 'Pendiente', fecha: null, comentario: '' },
    ],
  },
  {
    id: 'CR-003', origen: 'Regulatorio', tipo: ['Alcance', 'Costo', 'Plazo'], proyecto: 'PRY-002', projectId: 'p4',
    descripcion: 'Implementación de nuevos requisitos HSE por actualización normativa DIAN 2025',
    justificacion: 'Normativa actualizada obliga a reforzar señalización y equipos de seguridad',
    impactoCosto: 8000, impactoDias: 5, urgencia: 'Normal',
    estado: 'Pendiente aprobación Director', fecha: '2025-04-15',
    recursos: 'Señalización, equipo de seguridad adicional',
    riesgos: 'Multas por incumplimiento si no se implementa',
    pasos: [
      { nombre: 'Evaluación técnica', responsable: 'Ing. García', estado: 'Aprobado', fecha: '2025-04-17', comentario: 'Requerimiento válido' },
      { nombre: 'Evaluación financiera', responsable: 'Fin. López', estado: 'Aprobado', fecha: '2025-04-18', comentario: 'Presupuestado' },
      { nombre: 'Evaluación HSE', responsable: 'HSE. Martín', estado: 'Aprobado', fecha: '2025-04-19', comentario: 'Necesario para cumplimiento' },
      { nombre: 'Aprobación Director', responsable: 'Dir. Sánchez', estado: 'En revisión', fecha: null, comentario: '' },
    ],
  },
  {
    id: 'CR-004', origen: 'Equipo', tipo: ['Costo', 'Plazo'], proyecto: 'PRY-002', projectId: 'p4',
    descripcion: 'Mejora de proceso de montaje con nuevas técnicas de prefabricación offshore',
    justificacion: 'El equipo identificó optimización que reduce tiempo y costo de montaje',
    impactoCosto: -5000, impactoDias: -3, urgencia: 'Normal',
    estado: 'Aprobado', fecha: '2025-02-20',
    recursos: 'Ninguno adicional, reentrenamiento interno',
    riesgos: 'Curva de aprendizaje inicial',
    pasos: [
      { nombre: 'Evaluación técnica', responsable: 'Ing. García', estado: 'Aprobado', fecha: '2025-02-22', comentario: 'Excelente propuesta' },
      { nombre: 'Evaluación financiera', responsable: 'Fin. López', estado: 'Aprobado', fecha: '2025-02-23', comentario: 'Ahorro verificado' },
      { nombre: 'Evaluación HSE', responsable: 'HSE. Martín', estado: 'Omitido', fecha: null, comentario: 'No aplica' },
      { nombre: 'Aprobación Director', responsable: 'Dir. Sánchez', estado: 'Aprobado', fecha: '2025-02-24', comentario: 'Implementar inmediatamente' },
    ],
  },
  {
    id: 'CR-005', origen: 'Riesgo materializado', tipo: ['Alcance', 'Costo', 'Plazo'], proyecto: 'PRY-003', projectId: 'p4',
    descripcion: 'Reducción de alcance por inviabilidad geotécnica en zona norte',
    justificacion: 'Estudio de suelos reveló condiciones no aptas para la construcción planificada',
    impactoCosto: -20000, impactoDias: -10, urgencia: 'Emergencia',
    estado: 'Rechazado', fecha: '2025-03-28',
    recursos: 'Ninguno',
    riesgos: 'Pérdida de funcionalidad en zona norte',
    pasos: [
      { nombre: 'Evaluación técnica', responsable: 'Ing. García', estado: 'Aprobado', fecha: '2025-03-29', comentario: 'Estudio confirma inviabilidad' },
      { nombre: 'Evaluación financiera', responsable: 'Fin. López', estado: 'Rechazado', fecha: '2025-03-30', comentario: 'No aceptable reducción de alcance comprometida con cliente' },
      { nombre: 'Evaluación HSE', responsable: 'HSE. Martín', estado: 'Omitido', fecha: null, comentario: '' },
      { nombre: 'Aprobación Director', responsable: 'Dir. Sánchez', estado: 'Rechazado', fecha: '2025-03-31', comentario: 'Se buscará solución técnica alternativa' },
    ],
  },
  {
    id: 'CR-006', origen: 'Cliente', tipo: ['Alcance', 'Costo', 'Plazo'], proyecto: 'PRY-004', projectId: 'p4',
    descripcion: 'Nuevo requerimiento: sistema de monitoreo ambiental integrado',
    justificacion: 'El cliente amplió el alcance para incluir sensores de calidad del agua',
    impactoCosto: 65000, impactoDias: 30, urgencia: 'Normal',
    estado: 'Borrador', fecha: '2025-05-01',
    recursos: 'Sensores IoT, servidor de datos, ingeniero de sistemas adicional',
    riesgos: 'Dependencia de proveedor especializado, riesgo de integración',
    pasos: [
      { nombre: 'Evaluación técnica', responsable: 'Ing. García', estado: 'Pendiente', fecha: null, comentario: '' },
      { nombre: 'Evaluación financiera', responsable: 'Fin. López', estado: 'Pendiente', fecha: null, comentario: '' },
      { nombre: 'Evaluación HSE', responsable: 'HSE. Martín', estado: 'Pendiente', fecha: null, comentario: '' },
      { nombre: 'Aprobación Director', responsable: 'Dir. Sánchez', estado: 'Pendiente', fecha: null, comentario: '' },
    ],
  },
];

const PROYECTOS = ['PRY-001', 'PRY-002', 'PRY-003', 'PRY-004'];
const ORIGENES = ['Cliente', 'Equipo', 'Regulatorio', 'Técnico', 'HSE', 'Riesgo materializado'];
const TIPOS = ['Alcance', 'Costo', 'Plazo', 'Técnico'];
const URGENCIAS = ['Normal', 'Urgente', 'Emergencia'];
const ESTADOS = [
  'Borrador', 'En evaluación técnica', 'En evaluación financiera', 'Pendiente HSE',
  'Pendiente aprobación Director', 'Aprobado', 'Rechazado', 'Implementado',
];

const BASELINES = {
  'PRY-001': { presupuestoOriginal: 850000, presupuestoActual: 907000, fechaFinOriginal: '2025-09-30', fechaFinActual: '2025-10-15' },
  'PRY-002': { presupuestoOriginal: 420000, presupuestoActual: 423000, fechaFinOriginal: '2025-07-31', fechaFinActual: '2025-08-05' },
  'PRY-003': { presupuestoOriginal: 290000, presupuestoActual: 270000, fechaFinOriginal: '2025-06-30', fechaFinActual: '2025-06-20' },
  'PRY-004': { presupuestoOriginal: 650000, presupuestoActual: 650000, fechaFinOriginal: '2025-12-31', fechaFinActual: '2025-12-31' },
};

// ─────────────────────────────────────────────────────────────
// BADGE COLOR MAPS
// ─────────────────────────────────────────────────────────────
const ESTADO_COLORS = {
  'Borrador': 'bg-slate-100 text-slate-600 dark:bg-gray-500/10 dark:text-gray-400',
  'En evaluación técnica': 'bg-blue-100 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400',
  'En evaluación financiera': 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-400',
  'Pendiente HSE': 'bg-orange-100 text-orange-700 dark:bg-orange-500/10 dark:text-orange-400',
  'Pendiente aprobación Director': 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400',
  'Aprobado': 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400',
  'Rechazado': 'bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400',
  'Implementado': 'bg-purple-100 text-purple-700 dark:bg-purple-500/10 dark:text-purple-400',
};
const URGENCIA_COLORS = {
  'Normal': 'bg-slate-100 text-slate-600 dark:bg-gray-500/10 dark:text-gray-400',
  'Urgente': 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400',
  'Emergencia': 'bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400',
};
const TIPO_COLORS = {
  'Alcance': 'bg-blue-100 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400',
  'Costo': 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400',
  'Plazo': 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400',
  'Técnico': 'bg-purple-100 text-purple-700 dark:bg-purple-500/10 dark:text-purple-400',
};
const PASO_COLORS = {
  'Aprobado': 'bg-emerald-500',
  'Rechazado': 'bg-red-500',
  'En revisión': 'bg-blue-500',
  'Pendiente': 'bg-slate-300 dark:bg-surface-600',
  'Omitido': 'bg-slate-200 dark:bg-surface-700',
};

// ─────────────────────────────────────────────────────────────
// HELPERS
// ─────────────────────────────────────────────────────────────
const fmt$ = n => n >= 0 ? `+$${Math.abs(n).toLocaleString()}` : `-$${Math.abs(n).toLocaleString()}`;
const fmtDays = n => n >= 0 ? `+${n}d` : `${n}d`;
const fmtDate = d => d ? new Date(d).toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: 'numeric' }) : '—';
const today = () => new Date().toISOString().split('T')[0];

const TT = { background: '#1e293b', border: '1px solid #334155', borderRadius: 8, fontSize: 12, color: '#f1f5f9' };

function Badge({ label, color }) {
  return (
    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${color}`}>
      {label}
    </span>
  );
}

function KpiCard({ label, value, color = '', sub }) {
  return (
    <div className="rounded-2xl border border-slate-200 dark:border-surface-700 bg-white dark:bg-surface-800 px-5 py-4 flex flex-col gap-1">
      <span className="text-xs text-slate-500 dark:text-slate-400 font-medium uppercase tracking-wide">{label}</span>
      <span className={`text-2xl font-bold ${color || 'text-slate-800 dark:text-white'}`}>{value}</span>
      {sub && <span className="text-xs text-slate-400 dark:text-gray-500">{sub}</span>}
    </div>
  );
}

// Simple modal wrapper
function Modal({ open, onClose, title, children }) {
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4">
      <div className="bg-white dark:bg-surface-800 rounded-2xl shadow-2xl border border-slate-200 dark:border-surface-700 w-full max-w-3xl max-h-[90vh] overflow-y-auto">
        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-200 dark:border-surface-700">
          <h2 className="text-base font-semibold text-slate-800 dark:text-slate-100">{title}</h2>
          <button onClick={onClose} className="text-slate-400 hover:text-slate-600 dark:hover:text-gray-300 transition-colors text-xl leading-none">&times;</button>
        </div>
        <div className="px-6 py-5">{children}</div>
      </div>
    </div>
  );
}

// Shared input styles
const inputCls = 'w-full bg-white dark:bg-surface-800 border border-slate-200 dark:border-surface-700 rounded-xl px-3 py-2 text-sm text-slate-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500/50';
const selectCls = inputCls;
const labelCls = 'block text-xs font-medium text-slate-500 dark:text-gray-400 mb-1';

// ─────────────────────────────────────────────────────────────
// TAB 1 — SOLICITUDES
// ─────────────────────────────────────────────────────────────
function TabSolicitudes({ crs, setCrs }) {
  const [filters, setFilters] = useState({ proyecto: '', tipo: '', origen: '', estado: '' });
  const [showModal, setShowModal] = useState(false);
  const [detailCr, setDetailCr] = useState(null);
  const [form, setForm] = useState({
    numero: 'CR-00' + (MOCK_CRS.length + 1),
    origen: '', proyecto: '', tipos: [], urgencia: 'Normal',
    descripcion: '', justificacion: '', impactoDias: 0, impactoCosto: 0,
    recursos: '', riesgos: '',
  });

  const { selectedProjectId } = useProject();
  const filtered = useMemo(() => {
    return crs.filter(cr => {
      if (selectedProjectId && cr.projectId !== selectedProjectId) return false;
      if (filters.proyecto && cr.proyecto !== filters.proyecto) return false;
      if (filters.tipo && !cr.tipo.includes(filters.tipo)) return false;
      if (filters.origen && cr.origen !== filters.origen) return false;
      if (filters.estado && cr.estado !== filters.estado) return false;
      return true;
    });
  }, [crs, filters, selectedProjectId]);

  const kpi = useMemo(() => ({
    total: crs.length,
    aprobados: crs.filter(c => c.estado === 'Aprobado' || c.estado === 'Implementado').length,
    enProceso: crs.filter(c => !['Borrador', 'Aprobado', 'Rechazado', 'Implementado'].includes(c.estado)).length,
    rechazados: crs.filter(c => c.estado === 'Rechazado').length,
    totalCosto: crs.reduce((s, c) => s + c.impactoCosto, 0),
    totalDias: crs.reduce((s, c) => s + c.impactoDias, 0),
  }), [crs]);

  function handleSubmit(e) {
    e.preventDefault();
    const newCr = {
      id: form.numero,
      origen: form.origen,
      tipo: form.tipos,
      proyecto: form.proyecto,
      descripcion: form.descripcion,
      justificacion: form.justificacion,
      impactoCosto: Number(form.impactoCosto),
      impactoDias: Number(form.impactoDias),
      urgencia: form.urgencia,
      estado: 'Borrador',
      fecha: today(),
      recursos: form.recursos,
      riesgos: form.riesgos,
      pasos: [
        { nombre: 'Evaluación técnica', responsable: 'Ing. García', estado: 'Pendiente', fecha: null, comentario: '' },
        { nombre: 'Evaluación financiera', responsable: 'Fin. López', estado: 'Pendiente', fecha: null, comentario: '' },
        { nombre: 'Evaluación HSE', responsable: 'HSE. Martín', estado: 'Pendiente', fecha: null, comentario: '' },
        { nombre: 'Aprobación Director', responsable: 'Dir. Sánchez', estado: 'Pendiente', fecha: null, comentario: '' },
      ],
    };
    setCrs(prev => [...prev, newCr]);
    setShowModal(false);
    setForm({
      numero: 'CR-00' + (crs.length + 2),
      origen: '', proyecto: '', tipos: [], urgencia: 'Normal',
      descripcion: '', justificacion: '', impactoDias: 0, impactoCosto: 0,
      recursos: '', riesgos: '',
    });
  }

  function toggleTipo(t) {
    setForm(f => ({
      ...f,
      tipos: f.tipos.includes(t) ? f.tipos.filter(x => x !== t) : [...f.tipos, t],
    }));
  }

  const costoColor = kpi.totalCosto > 0 ? 'text-red-600 dark:text-red-400' : 'text-emerald-600 dark:text-emerald-400';
  const diasColor = kpi.totalDias > 0 ? 'text-amber-600 dark:text-amber-400' : 'text-emerald-600 dark:text-emerald-400';

  return (
    <div className="space-y-5">
      {/* KPI Cards */}
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
        <KpiCard label="Total CRs" value={kpi.total} sub="Solicitudes registradas" />
        <KpiCard label="Aprobados" value={kpi.aprobados} color="text-emerald-600 dark:text-emerald-400" sub="Aprobados / Implementados" />
        <KpiCard label="En proceso" value={kpi.enProceso} color="text-blue-600 dark:text-blue-400" sub="En evaluación" />
        <KpiCard label="Rechazados" value={kpi.rechazados} color="text-red-600 dark:text-red-400" sub="No aprobados" />
        <KpiCard label="Impacto costo" value={fmt$(kpi.totalCosto)} color={costoColor} sub="Suma neta de cambios" />
        <KpiCard label="Impacto días" value={fmtDays(kpi.totalDias)} color={diasColor} sub="Días netos acumulados" />
      </div>

      {/* Filters + Button */}
      <div className="flex flex-wrap items-center gap-3">
        <select value={filters.proyecto} onChange={e => setFilters(f => ({ ...f, proyecto: e.target.value }))} className={`${selectCls} w-36`}>
          <option value="">Todos los proyectos</option>
          {PROYECTOS.map(p => <option key={p}>{p}</option>)}
        </select>
        <select value={filters.tipo} onChange={e => setFilters(f => ({ ...f, tipo: e.target.value }))} className={`${selectCls} w-32`}>
          <option value="">Todos los tipos</option>
          {TIPOS.map(t => <option key={t}>{t}</option>)}
        </select>
        <select value={filters.origen} onChange={e => setFilters(f => ({ ...f, origen: e.target.value }))} className={`${selectCls} w-40`}>
          <option value="">Todos los orígenes</option>
          {ORIGENES.map(o => <option key={o}>{o}</option>)}
        </select>
        <select value={filters.estado} onChange={e => setFilters(f => ({ ...f, estado: e.target.value }))} className={`${selectCls} w-52`}>
          <option value="">Todos los estados</option>
          {ESTADOS.map(s => <option key={s}>{s}</option>)}
        </select>
        <div className="ml-auto">
          <button onClick={() => setShowModal(true)} className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-xl transition-colors">
            + Nueva Solicitud
          </button>
        </div>
      </div>

      {/* Table */}
      <div className="bg-white dark:bg-surface-800 rounded-2xl border border-slate-200 dark:border-surface-700 overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-slate-200 dark:border-surface-700">
                {['Número CR', 'Origen', 'Tipo', 'Proyecto', 'Descripción', 'Impacto Costo', 'Impacto Días', 'Urgencia', 'Estado', 'Fecha', 'Acciones'].map(h => (
                  <th key={h} className="px-5 py-2.5 text-left text-xs font-medium text-slate-400 dark:text-gray-500 uppercase tracking-wider whitespace-nowrap">{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {filtered.length === 0 && (
                <tr><td colSpan={11} className="px-5 py-8 text-center text-slate-400 dark:text-gray-500">No hay solicitudes que coincidan con los filtros</td></tr>
              )}
              {filtered.map(cr => {
                const cPos = cr.impactoCosto > 0;
                const dPos = cr.impactoDias > 0;
                return (
                  <tr key={cr.id} className="border-b border-slate-100 dark:border-surface-700 hover:bg-slate-50 dark:hover:bg-surface-700/40 transition-colors">
                    <td className="px-5 py-3 font-mono font-semibold text-slate-800 dark:text-slate-100 whitespace-nowrap">{cr.id}</td>
                    <td className="px-5 py-3 text-slate-600 dark:text-gray-300 whitespace-nowrap">{cr.origen}</td>
                    <td className="px-5 py-3">
                      <div className="flex flex-wrap gap-1">
                        {cr.tipo.map(t => <Badge key={t} label={t} color={TIPO_COLORS[t] || ''} />)}
                      </div>
                    </td>
                    <td className="px-5 py-3 font-mono text-xs text-slate-600 dark:text-gray-300 whitespace-nowrap">{cr.proyecto}</td>
                    <td className="px-5 py-3 max-w-xs">
                      <span className="text-slate-700 dark:text-gray-300 line-clamp-2 text-xs">{cr.descripcion}</span>
                    </td>
                    <td className={`px-5 py-3 font-medium whitespace-nowrap ${cPos ? 'text-red-600 dark:text-red-400' : 'text-emerald-600 dark:text-emerald-400'}`}>
                      {fmt$(cr.impactoCosto)}
                    </td>
                    <td className={`px-5 py-3 font-medium whitespace-nowrap ${dPos ? 'text-amber-600 dark:text-amber-400' : cr.impactoDias < 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-slate-500 dark:text-gray-400'}`}>
                      {fmtDays(cr.impactoDias)}
                    </td>
                    <td className="px-5 py-3 whitespace-nowrap">
                      <Badge label={cr.urgencia} color={URGENCIA_COLORS[cr.urgencia] || ''} />
                    </td>
                    <td className="px-5 py-3 whitespace-nowrap">
                      <Badge label={cr.estado} color={ESTADO_COLORS[cr.estado] || ''} />
                    </td>
                    <td className="px-5 py-3 text-xs text-slate-500 dark:text-gray-400 whitespace-nowrap">{fmtDate(cr.fecha)}</td>
                    <td className="px-5 py-3 whitespace-nowrap">
                      <button onClick={() => setDetailCr(cr)} className="px-3 py-1.5 text-xs bg-slate-100 dark:bg-surface-700 text-slate-600 dark:text-gray-300 rounded-lg hover:bg-slate-200 dark:hover:bg-surface-600 transition-colors">
                        Ver
                      </button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {/* Detail Modal */}
      <Modal open={!!detailCr} onClose={() => setDetailCr(null)} title={detailCr ? `${detailCr.id} — Detalle` : ''}>
        {detailCr && (
          <div className="space-y-4 text-sm">
            <div className="flex flex-wrap gap-2">
              <Badge label={detailCr.estado} color={ESTADO_COLORS[detailCr.estado] || ''} />
              <Badge label={detailCr.urgencia} color={URGENCIA_COLORS[detailCr.urgencia] || ''} />
              {detailCr.tipo.map(t => <Badge key={t} label={t} color={TIPO_COLORS[t] || ''} />)}
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <p className={labelCls}>Proyecto</p>
                <p className="text-slate-700 dark:text-gray-300 font-mono">{detailCr.proyecto}</p>
              </div>
              <div>
                <p className={labelCls}>Origen</p>
                <p className="text-slate-700 dark:text-gray-300">{detailCr.origen}</p>
              </div>
              <div>
                <p className={labelCls}>Fecha registro</p>
                <p className="text-slate-700 dark:text-gray-300">{fmtDate(detailCr.fecha)}</p>
              </div>
              <div>
                <p className={labelCls}>Impactos</p>
                <p className={detailCr.impactoCosto > 0 ? 'text-red-600 dark:text-red-400 font-medium' : 'text-emerald-600 dark:text-emerald-400 font-medium'}>
                  {fmt$(detailCr.impactoCosto)} / {fmtDays(detailCr.impactoDias)}
                </p>
              </div>
            </div>
            <div>
              <p className={labelCls}>Descripción</p>
              <p className="text-slate-700 dark:text-gray-300">{detailCr.descripcion}</p>
            </div>
            <div>
              <p className={labelCls}>Justificación</p>
              <p className="text-slate-600 dark:text-gray-400">{detailCr.justificacion}</p>
            </div>
            <div>
              <p className={labelCls}>Recursos adicionales</p>
              <p className="text-slate-600 dark:text-gray-400">{detailCr.recursos}</p>
            </div>
            <div>
              <p className={labelCls}>Riesgos identificados</p>
              <p className="text-slate-600 dark:text-gray-400">{detailCr.riesgos}</p>
            </div>
          </div>
        )}
      </Modal>

      {/* New CR Modal */}
      <Modal open={showModal} onClose={() => setShowModal(false)} title="Nueva Solicitud de Cambio">
        <form onSubmit={handleSubmit} className="space-y-5">
          {/* Row 1 */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className={labelCls}>Número CR</label>
              <input className={inputCls + ' bg-slate-50 dark:bg-surface-700'} value={form.numero} readOnly />
            </div>
            <div>
              <label className={labelCls}>Origen *</label>
              <select required className={selectCls} value={form.origen} onChange={e => setForm(f => ({ ...f, origen: e.target.value }))}>
                <option value="">Seleccionar...</option>
                {ORIGENES.map(o => <option key={o}>{o}</option>)}
              </select>
            </div>
            <div>
              <label className={labelCls}>Proyecto *</label>
              <select required className={selectCls} value={form.proyecto} onChange={e => setForm(f => ({ ...f, proyecto: e.target.value }))}>
                <option value="">Seleccionar...</option>
                {PROYECTOS.map(p => <option key={p}>{p}</option>)}
              </select>
            </div>
            <div>
              <label className={labelCls}>Urgencia</label>
              <div className="flex gap-3 mt-1">
                {URGENCIAS.map(u => (
                  <label key={u} className="flex items-center gap-1.5 cursor-pointer">
                    <input type="radio" name="urgencia" value={u} checked={form.urgencia === u}
                      onChange={() => setForm(f => ({ ...f, urgencia: u }))}
                      className="accent-blue-600" />
                    <span className="text-sm text-slate-600 dark:text-gray-300">{u}</span>
                  </label>
                ))}
              </div>
            </div>
          </div>

          {/* Tipos */}
          <div>
            <label className={labelCls}>Tipo de cambio *</label>
            <div className="flex flex-wrap gap-3 mt-1">
              {TIPOS.map(t => (
                <label key={t} className="flex items-center gap-1.5 cursor-pointer">
                  <input type="checkbox" checked={form.tipos.includes(t)} onChange={() => toggleTipo(t)} className="accent-blue-600" />
                  <span className="text-sm text-slate-600 dark:text-gray-300">{t}</span>
                </label>
              ))}
            </div>
          </div>

          {/* Descripción */}
          <div>
            <label className={labelCls}>Descripción *</label>
            <textarea required rows={2} className={inputCls} placeholder="Describe el cambio solicitado..."
              value={form.descripcion} onChange={e => setForm(f => ({ ...f, descripcion: e.target.value }))} />
          </div>

          {/* Justificación */}
          <div>
            <label className={labelCls}>Justificación *</label>
            <textarea required rows={2} className={inputCls} placeholder="Por qué se requiere este cambio..."
              value={form.justificacion} onChange={e => setForm(f => ({ ...f, justificacion: e.target.value }))} />
          </div>

          {/* Impacts */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className={labelCls}>Impacto en días</label>
              <input type="number" className={inputCls} placeholder="0 (negativo = reducción)"
                value={form.impactoDias} onChange={e => setForm(f => ({ ...f, impactoDias: e.target.value }))} />
            </div>
            <div>
              <label className={labelCls}>Impacto en costo ($)</label>
              <input type="number" className={inputCls} placeholder="0 (negativo = ahorro)"
                value={form.impactoCosto} onChange={e => setForm(f => ({ ...f, impactoCosto: e.target.value }))} />
            </div>
          </div>

          {/* Recursos */}
          <div>
            <label className={labelCls}>Recursos adicionales</label>
            <textarea rows={2} className={inputCls} placeholder="Recursos necesarios para implementar el cambio..."
              value={form.recursos} onChange={e => setForm(f => ({ ...f, recursos: e.target.value }))} />
          </div>

          {/* Riesgos */}
          <div>
            <label className={labelCls}>Riesgos identificados</label>
            <textarea rows={2} className={inputCls} placeholder="Riesgos asociados al cambio..."
              value={form.riesgos} onChange={e => setForm(f => ({ ...f, riesgos: e.target.value }))} />
          </div>

          {/* Impact summary */}
          {(Number(form.impactoCosto) !== 0 || Number(form.impactoDias) !== 0) && (
            <div className="bg-slate-50 dark:bg-surface-700 rounded-xl p-4 border border-slate-200 dark:border-surface-600">
              <p className="text-xs font-medium text-slate-500 dark:text-gray-400 uppercase tracking-wide mb-2">Resumen de impacto</p>
              <div className="flex gap-6">
                <div>
                  <p className="text-xs text-slate-400 dark:text-gray-500">Costo</p>
                  <p className={`text-lg font-bold ${Number(form.impactoCosto) > 0 ? 'text-red-600 dark:text-red-400' : 'text-emerald-600 dark:text-emerald-400'}`}>
                    {fmt$(Number(form.impactoCosto))}
                  </p>
                </div>
                <div>
                  <p className="text-xs text-slate-400 dark:text-gray-500">Plazo</p>
                  <p className={`text-lg font-bold ${Number(form.impactoDias) > 0 ? 'text-amber-600 dark:text-amber-400' : 'text-emerald-600 dark:text-emerald-400'}`}>
                    {fmtDays(Number(form.impactoDias))}
                  </p>
                </div>
              </div>
            </div>
          )}

          <div className="flex justify-end gap-3 pt-2">
            <button type="button" onClick={() => setShowModal(false)} className="px-4 py-2 text-sm text-slate-600 dark:text-gray-300 hover:text-slate-800 dark:hover:text-white transition-colors">
              Cancelar
            </button>
            <button type="submit" className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-xl transition-colors">
              Crear Solicitud
            </button>
          </div>
        </form>
      </Modal>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// TAB 2 — FLUJO DE APROBACIÓN
// ─────────────────────────────────────────────────────────────
function TabFlujoAprobacion({ crs, setCrs }) {
  const [selectedCr, setSelectedCr] = useState('');
  const [actionState, setActionState] = useState({}); // { crId_pasoIdx: { showReject: bool, comment: string } }

  const displayCrs = useMemo(() => {
    if (selectedCr) return crs.filter(c => c.id === selectedCr);
    return crs;
  }, [crs, selectedCr]);

  function getActionKey(crId, idx) { return `${crId}_${idx}`; }

  function handleAprobar(crId, pasoIdx) {
    setCrs(prev => prev.map(cr => {
      if (cr.id !== crId) return cr;
      const pasos = cr.pasos.map((p, i) => {
        if (i !== pasoIdx) return p;
        return { ...p, estado: 'Aprobado', fecha: today() };
      });
      // Advance estado
      const estadoMap = ['En evaluación técnica', 'En evaluación financiera', 'Pendiente HSE', 'Pendiente aprobación Director', 'Aprobado'];
      const nextEstado = pasoIdx < 3 ? estadoMap[pasoIdx + 1] : 'Aprobado';
      return { ...cr, pasos, estado: nextEstado };
    }));
    setActionState(prev => ({ ...prev, [getActionKey(crId, pasoIdx)]: undefined }));
  }

  function handleRechazar(crId, pasoIdx, comment) {
    if (!comment.trim()) return;
    setCrs(prev => prev.map(cr => {
      if (cr.id !== crId) return cr;
      const pasos = cr.pasos.map((p, i) => {
        if (i !== pasoIdx) return p;
        return { ...p, estado: 'Rechazado', fecha: today(), comentario: comment };
      });
      return { ...cr, pasos, estado: 'Rechazado' };
    }));
    setActionState(prev => ({ ...prev, [getActionKey(crId, pasoIdx)]: undefined }));
  }

  function getStepCircle(paso) {
    const base = 'w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 ';
    if (paso.estado === 'Aprobado') return base + 'bg-emerald-500';
    if (paso.estado === 'Rechazado') return base + 'bg-red-500';
    if (paso.estado === 'En revisión') return base + 'bg-blue-500 animate-pulse';
    if (paso.estado === 'Omitido') return base + 'bg-slate-300 dark:bg-surface-600';
    return base + 'bg-slate-200 dark:bg-surface-600';
  }

  return (
    <div className="space-y-4">
      {/* CR Filter */}
      <div className="flex items-center gap-3">
        <select value={selectedCr} onChange={e => setSelectedCr(e.target.value)} className={`${selectCls} w-48`}>
          <option value="">Todos los CRs</option>
          {crs.map(c => <option key={c.id} value={c.id}>{c.id} — {c.proyecto}</option>)}
        </select>
      </div>

      {displayCrs.map(cr => (
        <div key={cr.id} className="bg-white dark:bg-surface-800 rounded-2xl border border-slate-200 dark:border-surface-700 p-5 space-y-5">
          {/* CR Header */}
          <div className="flex items-start gap-3 flex-wrap">
            <span className="font-mono font-bold text-slate-800 dark:text-slate-100">{cr.id}</span>
            <span className="text-xs text-slate-400 dark:text-gray-500 font-mono">{cr.proyecto}</span>
            <Badge label={cr.estado} color={ESTADO_COLORS[cr.estado] || ''} />
            <Badge label={cr.urgencia} color={URGENCIA_COLORS[cr.urgencia] || ''} />
            <span className="text-xs text-slate-600 dark:text-gray-300 flex-1 min-w-0 truncate">{cr.descripcion}</span>
          </div>

          {/* Stepper */}
          <div className="relative">
            {/* Connecting line */}
            <div className="absolute top-4 left-4 right-4 h-0.5 bg-slate-200 dark:bg-surface-600" style={{ zIndex: 0 }} />
            <div className="relative flex justify-between gap-2" style={{ zIndex: 1 }}>
              {cr.pasos.map((paso, idx) => {
                const key = getActionKey(cr.id, idx);
                const aState = actionState[key] || { showReject: false, comment: '' };
                const isActive = paso.estado === 'En revisión';
                return (
                  <div key={idx} className="flex flex-col items-center flex-1 min-w-0">
                    <div className={getStepCircle(paso)}>
                      {paso.estado === 'Aprobado' ? '✓' : paso.estado === 'Rechazado' ? '✕' : paso.estado === 'Omitido' ? '—' : idx + 1}
                    </div>
                    <div className="mt-2 text-center">
                      <p className="text-xs font-medium text-slate-700 dark:text-gray-200 leading-tight">{paso.nombre}</p>
                      <p className="text-xs text-slate-400 dark:text-gray-500 mt-0.5">{paso.responsable}</p>
                      {paso.fecha && <p className="text-xs text-slate-400 dark:text-gray-500">{fmtDate(paso.fecha)}</p>}
                      {paso.comentario && (
                        <p className="text-xs text-slate-500 dark:text-gray-400 mt-1 italic max-w-[120px] mx-auto">{paso.comentario}</p>
                      )}
                      <Badge label={paso.estado} color={
                        paso.estado === 'Aprobado' ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400' :
                          paso.estado === 'Rechazado' ? 'bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400' :
                            paso.estado === 'En revisión' ? 'bg-blue-100 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400' :
                              'bg-slate-100 text-slate-500 dark:bg-gray-500/10 dark:text-gray-400'
                      } />
                    </div>

                    {/* Actions for current step */}
                    {isActive && !['Aprobado', 'Rechazado', 'Implementado'].includes(cr.estado) && (
                      <div className="mt-3 w-full max-w-[160px] space-y-2">
                        <button onClick={() => handleAprobar(cr.id, idx)}
                          className="w-full px-3 py-1.5 text-xs bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg font-medium transition-colors">
                          Aprobar
                        </button>
                        <button onClick={() => setActionState(prev => ({ ...prev, [key]: { ...aState, showReject: !aState.showReject } }))}
                          className="w-full px-3 py-1.5 text-xs bg-red-100 hover:bg-red-200 text-red-700 dark:bg-red-500/10 dark:hover:bg-red-500/20 dark:text-red-400 rounded-lg font-medium transition-colors">
                          Rechazar
                        </button>
                        {aState.showReject && (
                          <div className="space-y-1.5">
                            <textarea rows={2} placeholder="Motivo del rechazo..."
                              value={aState.comment}
                              onChange={e => setActionState(prev => ({ ...prev, [key]: { ...aState, comment: e.target.value } }))}
                              className="w-full text-xs border border-slate-200 dark:border-surface-600 rounded-lg px-2 py-1.5 bg-white dark:bg-surface-700 text-slate-700 dark:text-gray-300 resize-none focus:outline-none focus:ring-1 focus:ring-red-400" />
                            <button onClick={() => handleRechazar(cr.id, idx, aState.comment)}
                              className="w-full px-3 py-1 text-xs bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors">
                              Confirmar rechazo
                            </button>
                          </div>
                        )}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// TAB 3 — LOG DE CAMBIOS
// ─────────────────────────────────────────────────────────────
function TabLogCambios({ crs }) {
  const [filterProy, setFilterProy] = useState('');

  const approved = useMemo(() =>
    crs
      .filter(c => ['Aprobado', 'Implementado'].includes(c.estado))
      .filter(c => !filterProy || c.proyecto === filterProy)
      .sort((a, b) => new Date(a.fecha) - new Date(b.fecha)),
    [crs, filterProy]);

  const totalCosto = approved.reduce((s, c) => s + c.impactoCosto, 0);
  const totalDias = approved.reduce((s, c) => s + c.impactoDias, 0);

  const baselineKey = filterProy || Object.keys(BASELINES)[0];
  const bl = BASELINES[baselineKey];

  return (
    <div className="space-y-5">
      {/* Filter */}
      <div className="flex items-center gap-3">
        <select value={filterProy} onChange={e => setFilterProy(e.target.value)} className={`${selectCls} w-48`}>
          <option value="">Todos los proyectos</option>
          {PROYECTOS.map(p => <option key={p}>{p}</option>)}
        </select>
      </div>

      {/* Timeline */}
      <div className="space-y-0">
        {approved.length === 0 && (
          <div className="bg-white dark:bg-surface-800 rounded-2xl border border-slate-200 dark:border-surface-700 p-8 text-center text-slate-400 dark:text-gray-500">
            No hay cambios aprobados para mostrar
          </div>
        )}
        {approved.map((cr, idx) => {
          const cPos = cr.impactoCosto > 0;
          const dPos = cr.impactoDias > 0;
          return (
            <div key={cr.id} className="flex gap-4">
              {/* Timeline line + dot */}
              <div className="flex flex-col items-center">
                <div className="w-3 h-3 rounded-full bg-emerald-500 flex-shrink-0 mt-5" />
                {idx < approved.length - 1 && <div className="w-0.5 flex-1 bg-slate-200 dark:bg-surface-600 min-h-4" />}
              </div>
              {/* Card */}
              <div className="flex-1 pb-4">
                <div className="bg-white dark:bg-surface-800 rounded-2xl border border-slate-200 dark:border-surface-700 p-4 space-y-2">
                  <div className="flex items-center gap-2 flex-wrap">
                    <span className="font-mono font-semibold text-slate-800 dark:text-slate-100 text-sm">{cr.id}</span>
                    <span className="text-xs text-slate-400 dark:text-gray-500">{fmtDate(cr.fecha)}</span>
                    <span className="text-xs font-mono text-slate-500 dark:text-gray-400">{cr.proyecto}</span>
                    {cr.tipo.map(t => <Badge key={t} label={t} color={TIPO_COLORS[t] || ''} />)}
                  </div>
                  <p className="text-sm text-slate-700 dark:text-gray-300">{cr.descripcion}</p>
                  <div className="flex gap-4">
                    <span className={`text-sm font-semibold ${cPos ? 'text-red-600 dark:text-red-400' : 'text-emerald-600 dark:text-emerald-400'}`}>{fmt$(cr.impactoCosto)}</span>
                    <span className={`text-sm font-semibold ${dPos ? 'text-amber-600 dark:text-amber-400' : cr.impactoDias < 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-slate-500 dark:text-gray-400'}`}>{fmtDays(cr.impactoDias)}</span>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Totals */}
      <div className="grid grid-cols-2 gap-4">
        <div className="bg-white dark:bg-surface-800 rounded-2xl border border-slate-200 dark:border-surface-700 px-5 py-4">
          <p className="text-xs text-slate-500 dark:text-slate-400 font-medium uppercase tracking-wide">Impacto costo acumulado</p>
          <p className={`text-2xl font-bold mt-1 ${totalCosto > 0 ? 'text-red-600 dark:text-red-400' : 'text-emerald-600 dark:text-emerald-400'}`}>{fmt$(totalCosto)}</p>
        </div>
        <div className="bg-white dark:bg-surface-800 rounded-2xl border border-slate-200 dark:border-surface-700 px-5 py-4">
          <p className="text-xs text-slate-500 dark:text-slate-400 font-medium uppercase tracking-wide">Impacto días acumulado</p>
          <p className={`text-2xl font-bold mt-1 ${totalDias > 0 ? 'text-amber-600 dark:text-amber-400' : 'text-emerald-600 dark:text-emerald-400'}`}>{fmtDays(totalDias)}</p>
        </div>
      </div>

      {/* Baseline comparison */}
      {bl && (
        <div className="bg-white dark:bg-surface-800 rounded-2xl border border-slate-200 dark:border-surface-700 overflow-hidden">
          <div className="px-5 py-3 border-b border-slate-100 dark:border-surface-700">
            <p className="text-base font-semibold text-slate-800 dark:text-slate-100">Baseline vs Actual — {baselineKey}</p>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-slate-100 dark:border-surface-700">
                  {['Métrica', 'Baseline original', 'Valor actual', 'Variación'].map(h => (
                    <th key={h} className="px-5 py-2.5 text-left text-xs font-medium text-slate-400 dark:text-gray-500 uppercase tracking-wider">{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                <tr className="border-b border-slate-100 dark:border-surface-700">
                  <td className="px-5 py-3 font-medium text-slate-700 dark:text-gray-300">Presupuesto</td>
                  <td className="px-5 py-3 text-slate-600 dark:text-gray-400">${bl.presupuestoOriginal.toLocaleString()}</td>
                  <td className="px-5 py-3 text-slate-600 dark:text-gray-400">${bl.presupuestoActual.toLocaleString()}</td>
                  <td className={`px-5 py-3 font-semibold ${bl.presupuestoActual > bl.presupuestoOriginal ? 'text-red-600 dark:text-red-400' : 'text-emerald-600 dark:text-emerald-400'}`}>
                    {fmt$(bl.presupuestoActual - bl.presupuestoOriginal)}
                  </td>
                </tr>
                <tr className="border-b border-slate-100 dark:border-surface-700">
                  <td className="px-5 py-3 font-medium text-slate-700 dark:text-gray-300">Fecha fin</td>
                  <td className="px-5 py-3 text-slate-600 dark:text-gray-400">{fmtDate(bl.fechaFinOriginal)}</td>
                  <td className="px-5 py-3 text-slate-600 dark:text-gray-400">{fmtDate(bl.fechaFinActual)}</td>
                  <td className={`px-5 py-3 font-semibold ${new Date(bl.fechaFinActual) > new Date(bl.fechaFinOriginal) ? 'text-amber-600 dark:text-amber-400' : 'text-emerald-600 dark:text-emerald-400'}`}>
                    {Math.round((new Date(bl.fechaFinActual) - new Date(bl.fechaFinOriginal)) / 86400000)}d
                  </td>
                </tr>
                <tr>
                  <td className="px-5 py-3 font-medium text-slate-700 dark:text-gray-300">Cambios aprobados</td>
                  <td className="px-5 py-3 text-slate-600 dark:text-gray-400">0</td>
                  <td className="px-5 py-3 text-slate-600 dark:text-gray-400">{approved.filter(c => !filterProy || c.proyecto === filterProy).length}</td>
                  <td className="px-5 py-3 text-slate-500 dark:text-gray-400">—</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// TAB 4 — IMPACTO ACUMULADO
// ─────────────────────────────────────────────────────────────
function TabImpactoAcumulado({ crs }) {
  const approvedCrs = useMemo(() =>
    crs.filter(c => ['Aprobado', 'Implementado'].includes(c.estado))
      .sort((a, b) => new Date(a.fecha) - new Date(b.fecha)),
    [crs]);

  const barData = approvedCrs.map(c => ({ id: c.id, value: c.impactoCosto, dias: c.impactoDias }));

  const lineData = useMemo(() => {
    let acc = 0;
    return approvedCrs.map(c => {
      acc += c.impactoCosto;
      return { fecha: fmtDate(c.fecha), acumulado: acc, id: c.id };
    });
  }, [approvedCrs]);

  const summaryByProject = useMemo(() => {
    return PROYECTOS.map(pry => {
      const pCrs = approvedCrs.filter(c => c.proyecto === pry);
      const totalCosto = pCrs.reduce((s, c) => s + c.impactoCosto, 0);
      const totalDias = pCrs.reduce((s, c) => s + c.impactoDias, 0);
      const bl = BASELINES[pry];
      const pctVar = bl ? ((totalCosto / bl.presupuestoOriginal) * 100) : 0;
      return { pry, count: pCrs.length, totalCosto, totalDias, pctVar, bl };
    });
  }, [approvedCrs]);

  const warnings = summaryByProject.filter(r => r.pctVar > 20);

  const CustomTooltipBar = ({ active, payload }) => {
    if (!active || !payload?.length) return null;
    return (
      <div style={TT} className="px-3 py-2">
        <p style={{ color: '#f1f5f9' }}>{payload[0]?.payload?.id}</p>
        <p style={{ color: payload[0].value > 0 ? '#f87171' : '#34d399' }}>{fmt$(payload[0].value)}</p>
      </div>
    );
  };

  const CustomTooltipLine = ({ active, payload }) => {
    if (!active || !payload?.length) return null;
    return (
      <div style={TT} className="px-3 py-2">
        <p style={{ color: '#94a3b8' }}>{payload[0]?.payload?.fecha}</p>
        <p style={{ color: '#f1f5f9' }}>{payload[0]?.payload?.id}</p>
        <p style={{ color: payload[0].value > 0 ? '#f87171' : '#34d399' }}>Acumulado: {fmt$(payload[0].value)}</p>
      </div>
    );
  };

  return (
    <div className="space-y-5">
      {/* Charts Row */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
        {/* Bar Chart */}
        <div className="bg-white dark:bg-surface-800 rounded-2xl border border-slate-200 dark:border-surface-700 p-5">
          <p className="text-base font-semibold text-slate-800 dark:text-slate-100 mb-4">Impacto por Cambio (Costo $)</p>
          {barData.length === 0 ? (
            <div className="h-48 flex items-center justify-center text-slate-400 dark:text-gray-500 text-sm">Sin cambios aprobados</div>
          ) : (
            <ResponsiveContainer width="100%" height={220}>
              <BarChart data={barData} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="#334155" opacity={0.3} />
                <XAxis dataKey="id" tick={{ fill: '#94a3b8', fontSize: 11 }} />
                <YAxis tick={{ fill: '#94a3b8', fontSize: 11 }} tickFormatter={v => `$${(v / 1000).toFixed(0)}k`} />
                <Tooltip content={<CustomTooltipBar />} />
                <ReferenceLine y={0} stroke="#475569" />
                <Bar dataKey="value" radius={[4, 4, 0, 0]}>
                  {barData.map((entry, index) => (
                    <Cell key={index} fill={entry.value > 0 ? '#ef4444' : '#10b981'} />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          )}
        </div>

        {/* Line Chart */}
        <div className="bg-white dark:bg-surface-800 rounded-2xl border border-slate-200 dark:border-surface-700 p-5">
          <p className="text-base font-semibold text-slate-800 dark:text-slate-100 mb-4">Impacto Acumulado en el Tiempo</p>
          {lineData.length === 0 ? (
            <div className="h-48 flex items-center justify-center text-slate-400 dark:text-gray-500 text-sm">Sin cambios aprobados</div>
          ) : (
            <ResponsiveContainer width="100%" height={220}>
              <LineChart data={lineData} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="#334155" opacity={0.3} />
                <XAxis dataKey="fecha" tick={{ fill: '#94a3b8', fontSize: 10 }} />
                <YAxis tick={{ fill: '#94a3b8', fontSize: 11 }} tickFormatter={v => `$${(v / 1000).toFixed(0)}k`} />
                <Tooltip content={<CustomTooltipLine />} />
                <ReferenceLine y={0} stroke="#475569" />
                <Line type="monotone" dataKey="acumulado" stroke="#3b82f6" strokeWidth={2} dot={{ fill: '#3b82f6', r: 4 }} />
              </LineChart>
            </ResponsiveContainer>
          )}
        </div>
      </div>

      {/* Warnings */}
      {warnings.map(w => (
        <div key={w.pry} className="flex items-start gap-3 bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/30 rounded-xl p-4">
          <span className="text-amber-500 text-lg">⚠</span>
          <p className="text-sm text-amber-700 dark:text-amber-300">
            <strong>{w.pry}</strong>: Variación presupuestaria del {w.pctVar.toFixed(1)}% supera el umbral del 20%. Revisar control de cambios y presupuesto contingente.
          </p>
        </div>
      ))}

      {/* Summary table */}
      <div className="bg-white dark:bg-surface-800 rounded-2xl border border-slate-200 dark:border-surface-700 overflow-hidden">
        <div className="px-5 py-3 border-b border-slate-100 dark:border-surface-700">
          <p className="text-base font-semibold text-slate-800 dark:text-slate-100">Resumen por Proyecto</p>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-slate-100 dark:border-surface-700">
                {['Proyecto', 'CRs Aprobados', 'Impacto Costo Total', 'Impacto Días Total', '% Variación Presupuesto'].map(h => (
                  <th key={h} className="px-5 py-2.5 text-left text-xs font-medium text-slate-400 dark:text-gray-500 uppercase tracking-wider whitespace-nowrap">{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {summaryByProject.map(row => {
                const isHighVar = row.pctVar > 20;
                const isSaving = row.pctVar < -5;
                return (
                  <tr key={row.pry} className={`border-b border-slate-100 dark:border-surface-700 ${isHighVar ? 'bg-red-50 dark:bg-red-500/5' : ''}`}>
                    <td className="px-5 py-3 font-mono font-semibold text-slate-800 dark:text-slate-100">{row.pry}</td>
                    <td className="px-5 py-3 text-slate-600 dark:text-gray-300">{row.count}</td>
                    <td className={`px-5 py-3 font-medium ${row.totalCosto > 0 ? 'text-red-600 dark:text-red-400' : row.totalCosto < 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-slate-500 dark:text-gray-400'}`}>
                      {fmt$(row.totalCosto)}
                    </td>
                    <td className={`px-5 py-3 font-medium ${row.totalDias > 0 ? 'text-amber-600 dark:text-amber-400' : row.totalDias < 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-slate-500 dark:text-gray-400'}`}>
                      {fmtDays(row.totalDias)}
                    </td>
                    <td className={`px-5 py-3 font-semibold ${isHighVar ? 'text-red-600 dark:text-red-400' : isSaving ? 'text-emerald-600 dark:text-emerald-400' : 'text-slate-600 dark:text-gray-300'}`}>
                      {row.pctVar > 0 ? '+' : ''}{row.pctVar.toFixed(1)}%
                      {isHighVar && <span className="ml-1 text-red-400 dark:text-red-500">⚠</span>}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {/* AI Insight */}
      <div className="bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/30 rounded-xl p-4 flex items-start gap-3">
        <span className="text-indigo-500 text-lg flex-shrink-0">✦</span>
        <div>
          <p className="text-xs font-semibold text-indigo-700 dark:text-indigo-300 uppercase tracking-wide mb-1">Insight IA</p>
          <p className="text-sm text-indigo-700 dark:text-indigo-300">
            IA detecta que la frecuencia de cambios en PRY-001 sugiere problemas en la definición inicial del alcance. Se recomienda revisar el EDT base y reforzar el proceso de control de cambios para las etapas restantes.
          </p>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// MAIN PAGE
// ─────────────────────────────────────────────────────────────
export default function ChangeManagementPage() {
  const [tab, setTab] = useState('solicitudes');
  const [crs, setCrs] = useState(MOCK_CRS);
  const { selectedProjectId } = useProject();
  const projectCrs = useMemo(() =>
    crs.filter(c => !selectedProjectId || c.projectId === selectedProjectId),
    [crs, selectedProjectId]
  );

  const TABS = [
    { id: 'solicitudes', label: 'Solicitudes' },
    { id: 'flujo', label: 'Flujo de Aprobación' },
    { id: 'log', label: 'Log de Cambios' },
    { id: 'impacto', label: 'Impacto Acumulado' },
  ];

  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">Gestión de Cambios</h1>
          <p className="text-sm text-slate-500 dark:text-gray-400 mt-0.5">Módulo 16 — Control de órdenes de cambio y su impacto</p>
        </div>
      </div>

      {/* Tabs */}
      <div className="flex gap-1 bg-slate-100 dark:bg-surface-800 p-1 rounded-xl w-fit">
        {TABS.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)}
            className={`px-4 py-1.5 rounded-lg text-sm font-medium transition-all cursor-pointer
              ${tab === t.id
                ? 'bg-white dark:bg-surface-700 text-slate-900 dark:text-white shadow-sm'
                : 'text-slate-500 dark:text-gray-400 hover:text-slate-700 dark:hover:text-gray-300'
              }`}>
            {t.label}
          </button>
        ))}
      </div>

      {/* Tab Content */}
      {tab === 'solicitudes' && <TabSolicitudes crs={projectCrs} setCrs={setCrs} />}
      {tab === 'flujo' && <TabFlujoAprobacion crs={projectCrs} setCrs={setCrs} />}
      {tab === 'log' && <TabLogCambios crs={projectCrs} />}
      {tab === 'impacto' && <TabImpactoAcumulado crs={projectCrs} />}
    </div>
  );
}
