import React, { useState, useMemo } from 'react';
import { useProject } from '../../context/ProjectContext';

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

const CONTRACT_TYPES = [
  'Contrato principal',
  'Contrato de subcontratista',
  'Contrato de suministro',
  'Contrato de servicio',
  'Orden de compra',
  'Carta de intención',
  'Acuerdo de confidencialidad (NDA)',
];

const CONTRACT_STATUSES = [
  'Borrador',
  'En revisión legal',
  'Firmado',
  'En ejecución',
  'Suspendido',
  'Terminado',
  'Liquidado',
];

const MODALIDADES = [
  'Precio fijo',
  'Administración delegada',
  'Precio unitario',
  'Mixto',
];

const GARANTIAS_OPTIONS = [
  { key: 'cumplimiento', label: 'Garantía de cumplimiento' },
  { key: 'anticipo', label: 'Garantía de anticipo' },
  { key: 'calidad', label: 'Garantía de calidad' },
  { key: 'estabilidad', label: 'Garantía de estabilidad' },
];

const MOCK_PROJECTS = ['PRY-2026-004', 'PRY-2026-004', 'PRY-2026-004', 'PRY-2026-004'];

const MOCK_TEAM = [
  'Carlos Mendoza',
  'Paula Soto',
  'Luis García',
  'María López',
  'Jorge Rivas',
];

const CURRENCIES = ['COP', 'USD', 'EUR'];

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

const today = new Date('2026-06-26');
const addDays = (date, days) => {
  const d = new Date(date);
  d.setDate(d.getDate() + days);
  return d.toISOString().slice(0, 10);
};
const fmtDate = (iso) => {
  if (!iso) return '—';
  const [y, m, d] = iso.split('-');
  return `${d}/${m}/${y}`;
};
const daysUntil = (iso) => {
  if (!iso) return null;
  const diff = new Date(iso) - today;
  return Math.ceil(diff / 86400000);
};

const INITIAL_CONTRACTS = [
  {
    id: 'cnt1',
    numero: 'CNT-001',
    tipo: 'Contrato principal',
    proyecto: 'PRY-2026-004', projectId: 'p4',
    contratante: 'AR Constructora S.A.S.',
    contratado: 'Grupo Andino Edificaciones Ltda.',
    objeto: 'Construcción de edificio de apartamentos de 12 pisos en el sector norte de la ciudad, incluye obra civil, acabados e instalaciones.',
    valorTotal: 4800000000,
    moneda: 'COP',
    formaPago: 'Hitos',
    fechaFirma: '2026-01-15',
    fechaInicio: '2026-02-01',
    fechaFin: '2027-02-01',
    vigenciaGarantias: addDays('2027-02-01', 365),
    modalidad: 'Precio fijo',
    penalizacionTipo: '%',
    penalizacionValor: 0.5,
    garantias: { cumplimiento: true, anticipo: true, calidad: false, estabilidad: true },
    estado: 'En ejecución',
    responsable: 'Carlos Mendoza',
  },
  {
    id: 'cnt2',
    numero: 'CNT-002',
    tipo: 'Contrato de subcontratista',
    proyecto: 'PRY-2026-004', projectId: 'p4',
    contratante: 'Grupo Andino Edificaciones Ltda.',
    contratado: 'ElectroPower Instalaciones S.A.',
    objeto: 'Subcontrato para instalaciones eléctricas de alta y baja tensión en el proyecto edificio norte, incluye tableros, cableado y luminarias.',
    valorTotal: 380000000,
    moneda: 'COP',
    formaPago: 'Mensual',
    fechaFirma: '2026-02-10',
    fechaInicio: '2026-03-01',
    fechaFin: addDays(today.toISOString().slice(0, 10), 18),
    vigenciaGarantias: addDays(today.toISOString().slice(0, 10), 200),
    modalidad: 'Precio unitario',
    penalizacionTipo: 'por día',
    penalizacionValor: 500000,
    garantias: { cumplimiento: true, anticipo: false, calidad: true, estabilidad: false },
    estado: 'En ejecución',
    responsable: 'Paula Soto',
  },
  {
    id: 'cnt3',
    numero: 'CNT-003',
    tipo: 'Contrato de suministro',
    proyecto: 'PRY-2026-004', projectId: 'p4',
    contratante: 'AR Constructora S.A.S.',
    contratado: 'Aceros del Norte S.A.',
    objeto: 'Suministro de acero estructural, varillas corrugadas y mallas electrosoldadas para el proyecto de infraestructura vial PRY-002.',
    valorTotal: 920000000,
    moneda: 'COP',
    formaPago: 'Contra entrega',
    fechaFirma: '2026-03-05',
    fechaInicio: '2026-03-15',
    fechaFin: addDays(today.toISOString().slice(0, 10), 8),
    vigenciaGarantias: addDays(today.toISOString().slice(0, 10), 90),
    modalidad: 'Precio unitario',
    penalizacionTipo: 'valor fijo',
    penalizacionValor: 5000000,
    garantias: { cumplimiento: true, anticipo: false, calidad: true, estabilidad: false },
    estado: 'En ejecución',
    responsable: 'Luis García',
  },
  {
    id: 'cnt4',
    numero: 'CNT-004',
    tipo: 'Contrato de servicio',
    proyecto: 'PRY-2026-004', projectId: 'p4',
    contratante: 'AR Constructora S.A.S.',
    contratado: 'TechSoft Soluciones S.A.S.',
    objeto: 'Prestación de servicios de desarrollo e implementación del sistema de gestión de proyectos ERP para la empresa.',
    valorTotal: 250000000,
    moneda: 'COP',
    formaPago: 'Mensual',
    fechaFirma: '2026-04-01',
    fechaInicio: '2026-04-15',
    fechaFin: addDays(today.toISOString().slice(0, 10), 45),
    vigenciaGarantias: addDays(today.toISOString().slice(0, 10), 180),
    modalidad: 'Precio fijo',
    penalizacionTipo: '%',
    penalizacionValor: 1,
    garantias: { cumplimiento: false, anticipo: false, calidad: false, estabilidad: false },
    estado: 'En ejecución',
    responsable: 'María López',
  },
  {
    id: 'cnt5',
    numero: 'CNT-005',
    tipo: 'Orden de compra',
    proyecto: 'PRY-2026-004', projectId: 'p4',
    contratante: 'AR Constructora S.A.S.',
    contratado: 'Ferretería La Torre S.A.',
    objeto: 'Compra de herramientas y equipos menores para obra: taladros, andamios portátiles, elementos de seguridad industrial.',
    valorTotal: 48000000,
    moneda: 'COP',
    formaPago: '30 días',
    fechaFirma: '2026-05-01',
    fechaInicio: '2026-05-05',
    fechaFin: addDays(today.toISOString().slice(0, 10), -5),
    vigenciaGarantias: addDays(today.toISOString().slice(0, 10), 60),
    modalidad: 'Precio fijo',
    penalizacionTipo: 'valor fijo',
    penalizacionValor: 1000000,
    garantias: { cumplimiento: false, anticipo: false, calidad: false, estabilidad: false },
    estado: 'Terminado',
    responsable: 'Jorge Rivas',
  },
  {
    id: 'cnt6',
    numero: 'CNT-006',
    tipo: 'Acuerdo de confidencialidad (NDA)',
    proyecto: 'PRY-2026-004', projectId: 'p4',
    contratante: 'AR Constructora S.A.S.',
    contratado: 'Inversiones Horizonte S.A.',
    objeto: 'Acuerdo de no divulgación de información confidencial durante el proceso de due diligence para posible joint venture en proyecto PRY-004.',
    valorTotal: 0,
    moneda: 'COP',
    formaPago: 'N/A',
    fechaFirma: '2026-06-01',
    fechaInicio: '2026-06-01',
    fechaFin: addDays(today.toISOString().slice(0, 10), 25),
    vigenciaGarantias: null,
    modalidad: 'Precio fijo',
    penalizacionTipo: 'valor fijo',
    penalizacionValor: 100000000,
    garantias: { cumplimiento: false, anticipo: false, calidad: false, estabilidad: false },
    estado: 'Firmado',
    responsable: 'Carlos Mendoza',
  },
];

const INITIAL_ADENDAS = [
  {
    id: 'adn1',
    numero: 'ADN-001',
    contratoPadreId: 'cnt1',
    descripcion: 'Ampliación de plazo por lluvias extraordinarias en el primer trimestre. Se extiende el plazo de entrega en 45 días y se ajusta el cronograma de pagos.',
    tipoCambio: 'plazo',
    impactoPresupuesto: 0,
    impactoDias: 45,
    estado: 'Aprobada',
    fecha: '2026-04-10',
    aprobadoPor: 'Carlos Mendoza',
  },
  {
    id: 'adn2',
    numero: 'ADN-002',
    contratoPadreId: 'cnt1',
    descripcion: 'Ampliación de alcance: inclusión de acabados premium en pisos 10-12 (mármol importado) y fachada en vidrio estructural. Incremento de valor del contrato.',
    tipoCambio: 'todos',
    impactoPresupuesto: 320000000,
    impactoDias: 30,
    estado: 'Aprobada',
    fecha: '2026-05-20',
    aprobadoPor: 'Carlos Mendoza',
  },
  {
    id: 'adn3',
    numero: 'ADN-003',
    contratoPadreId: 'cnt3',
    descripcion: 'Ajuste de precios unitarios por incremento del precio del acero en mercado internacional. Solicitud del proveedor con justificación técnica.',
    tipoCambio: 'valor',
    impactoPresupuesto: 85000000,
    impactoDias: 0,
    estado: 'Pendiente',
    fecha: '2026-06-15',
    aprobadoPor: null,
  },
];

const INITIAL_MILESTONES = [
  // CNT-001 milestones
  { id: 'hto1', contratoPadreId: 'cnt1', nombre: 'Anticipo inicial (20%)', valor: 960000000, fechaProgramada: '2026-02-01', estado: 'Pagado' },
  { id: 'hto2', contratoPadreId: 'cnt1', nombre: 'Cimentación terminada (15%)', valor: 720000000, fechaProgramada: '2026-04-01', estado: 'Pagado' },
  { id: 'hto3', contratoPadreId: 'cnt1', nombre: 'Estructura hasta piso 6 (20%)', valor: 960000000, fechaProgramada: '2026-07-01', estado: 'Habilitado' },
  { id: 'hto4', contratoPadreId: 'cnt1', nombre: 'Estructura hasta piso 12 (20%)', valor: 960000000, fechaProgramada: '2026-10-01', estado: 'Pendiente' },
  { id: 'hto5', contratoPadreId: 'cnt1', nombre: 'Acabados interiores (15%)', valor: 720000000, fechaProgramada: '2027-01-01', estado: 'Pendiente' },
  { id: 'hto6', contratoPadreId: 'cnt1', nombre: 'Entrega y recibo final (10%)', valor: 480000000, fechaProgramada: '2027-02-01', estado: 'Pendiente' },
  // CNT-002 milestones
  { id: 'hto7', contratoPadreId: 'cnt2', nombre: 'Anticipo (30%)', valor: 114000000, fechaProgramada: '2026-03-01', estado: 'Pagado' },
  { id: 'hto8', contratoPadreId: 'cnt2', nombre: 'Tableros eléctricos instalados (40%)', valor: 152000000, fechaProgramada: '2026-05-15', estado: 'Pagado' },
  { id: 'hto9', contratoPadreId: 'cnt2', nombre: 'Instalaciones completas y pruebas (30%)', valor: 114000000, fechaProgramada: addDays(today.toISOString().slice(0, 10), 18), estado: 'Pendiente' },
  // CNT-004 milestones
  { id: 'hto10', contratoPadreId: 'cnt4', nombre: 'Diseño y arquitectura (25%)', valor: 62500000, fechaProgramada: '2026-05-15', estado: 'Pagado' },
  { id: 'hto11', contratoPadreId: 'cnt4', nombre: 'Módulos core implementados (40%)', valor: 100000000, fechaProgramada: '2026-06-30', estado: 'Habilitado' },
  { id: 'hto12', contratoPadreId: 'cnt4', nombre: 'Entrega final y capacitación (35%)', valor: 87500000, fechaProgramada: addDays(today.toISOString().slice(0, 10), 45), estado: 'Pendiente' },
];

// ── Helpers ────────────────────────────────────────────────────────────────────

const fmtCurrency = (val, cur = 'COP') => {
  if (!val || val === 0) return '$ 0';
  return new Intl.NumberFormat('es-CO', {
    style: 'currency',
    currency: cur,
    maximumFractionDigits: 0,
  }).format(val);
};

const TYPE_COLORS = {
  'Contrato principal': 'bg-blue-100 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400',
  'Contrato de subcontratista': 'bg-purple-100 text-purple-700 dark:bg-purple-500/10 dark:text-purple-400',
  'Contrato de suministro': 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400',
  'Contrato de servicio': 'bg-cyan-100 text-cyan-700 dark:bg-cyan-500/10 dark:text-cyan-400',
  'Orden de compra': 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400',
  'Carta de intención': 'bg-orange-100 text-orange-700 dark:bg-orange-500/10 dark:text-orange-400',
  'Acuerdo de confidencialidad (NDA)': 'bg-slate-100 text-slate-700 dark:bg-gray-500/10 dark:text-gray-400',
};

const STATUS_COLORS = {
  'Borrador': 'bg-slate-100 text-slate-600 dark:bg-gray-500/10 dark:text-gray-400',
  'En revisión legal': 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400',
  'Firmado': 'bg-blue-100 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400',
  'En ejecución': 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400',
  'Suspendido': 'bg-orange-100 text-orange-700 dark:bg-orange-500/10 dark:text-orange-400',
  'Terminado': 'bg-purple-100 text-purple-700 dark:bg-purple-500/10 dark:text-purple-400',
  'Liquidado': 'bg-gray-100 text-gray-600 dark:bg-gray-500/10 dark:text-gray-500',
};

const ADENDA_STATUS_COLORS = {
  'Pendiente': 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400',
  'Aprobada': 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400',
  'Rechazada': 'bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400',
};

const MILESTONE_STATUS_COLORS = {
  'Pendiente': 'bg-slate-100 text-slate-600 dark:bg-gray-500/10 dark:text-gray-400',
  'Habilitado': 'bg-blue-100 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400',
  'Pagado': 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400',
};

const TIPO_CAMBIO_LABELS = {
  valor: 'Valor',
  plazo: 'Plazo',
  alcance: 'Alcance',
  todos: 'Valor + Plazo + Alcance',
};

// ── Modal Base ─────────────────────────────────────────────────────────────────

function Modal({ title, onClose, children, wide = false }) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
      <div
        className={`bg-white dark:bg-surface-800 rounded-2xl shadow-2xl border border-slate-200 dark:border-surface-700 flex flex-col max-h-[92vh] ${wide ? 'w-full max-w-3xl' : 'w-full max-w-xl'}`}
      >
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-200 dark:border-surface-700 shrink-0">
          <h2 className="text-base font-semibold text-slate-800 dark:text-white">{title}</h2>
          <button
            onClick={onClose}
            className="text-slate-400 hover:text-slate-600 dark:hover:text-white transition-colors text-xl leading-none"
          >
            ×
          </button>
        </div>
        {/* Body */}
        <div className="overflow-y-auto px-6 py-5 flex-1">{children}</div>
      </div>
    </div>
  );
}

// ── Input helpers ──────────────────────────────────────────────────────────────

const inputCls =
  'w-full rounded-lg border border-slate-200 dark:border-surface-700 bg-white dark:bg-surface-900 text-sm text-slate-800 dark:text-slate-200 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 placeholder-slate-400';
const labelCls = 'block text-xs font-medium text-slate-500 dark:text-gray-400 mb-1';
const selectCls = inputCls + ' cursor-pointer';

function Field({ label, children, className = '' }) {
  return (
    <div className={className}>
      <label className={labelCls}>{label}</label>
      {children}
    </div>
  );
}

// ── Contract Modal ─────────────────────────────────────────────────────────────

const EMPTY_CONTRACT = {
  numero: '',
  tipo: CONTRACT_TYPES[0],
  proyecto: MOCK_PROJECTS[0],
  contratante: '',
  contratado: '',
  objeto: '',
  valorTotal: '',
  moneda: 'COP',
  formaPago: '',
  fechaFirma: '',
  fechaInicio: '',
  fechaFin: '',
  vigenciaGarantias: '',
  modalidad: MODALIDADES[0],
  penalizacionTipo: '%',
  penalizacionValor: '',
  garantias: { cumplimiento: false, anticipo: false, calidad: false, estabilidad: false },
  estado: 'Borrador',
  responsable: MOCK_TEAM[0],
};

function ContractModal({ contract, onSave, onClose, nextNum }) {
  const isEdit = !!contract?.id;
  const [form, setForm] = useState(
    contract && contract.id
      ? { ...contract }
      : { ...EMPTY_CONTRACT, numero: nextNum }
  );
  const [errors, setErrors] = useState({});

  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));
  const setGarantia = (k) =>
    setForm((f) => ({ ...f, garantias: { ...f.garantias, [k]: !f.garantias[k] } }));

  const validate = () => {
    const e = {};
    if (!form.contratante.trim()) e.contratante = 'Requerido';
    if (!form.contratado.trim()) e.contratado = 'Requerido';
    if (!form.objeto.trim()) e.objeto = 'Requerido';
    if (!form.fechaInicio) e.fechaInicio = 'Requerido';
    if (!form.fechaFin) e.fechaFin = 'Requerido';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const handleSave = () => {
    if (!validate()) return;
    onSave({ ...form, valorTotal: Number(form.valorTotal) || 0 });
  };

  return (
    <Modal title={isEdit ? `Editar ${form.numero}` : 'Nuevo Contrato'} onClose={onClose} wide>
      <div className="grid grid-cols-2 gap-4">
        {/* Número */}
        <Field label="Número de contrato">
          <input className={inputCls} value={form.numero} onChange={(e) => set('numero', e.target.value)} />
        </Field>
        {/* Tipo */}
        <Field label="Tipo de contrato">
          <select className={selectCls} value={form.tipo} onChange={(e) => set('tipo', e.target.value)}>
            {CONTRACT_TYPES.map((t) => <option key={t}>{t}</option>)}
          </select>
        </Field>
        {/* Proyecto */}
        <Field label="Proyecto asociado">
          <select className={selectCls} value={form.proyecto} onChange={(e) => set('proyecto', e.target.value)}>
            {MOCK_PROJECTS.map((p) => <option key={p}>{p}</option>)}
          </select>
        </Field>
        {/* Estado */}
        <Field label="Estado">
          <select className={selectCls} value={form.estado} onChange={(e) => set('estado', e.target.value)}>
            {CONTRACT_STATUSES.map((s) => <option key={s}>{s}</option>)}
          </select>
        </Field>
        {/* Contratante */}
        <Field label="Contratante *" className="col-span-2">
          <input
            className={inputCls + (errors.contratante ? ' border-red-400' : '')}
            value={form.contratante}
            onChange={(e) => set('contratante', e.target.value)}
            placeholder="Nombre empresa o persona contratante"
          />
          {errors.contratante && <p className="text-xs text-red-500 mt-0.5">{errors.contratante}</p>}
        </Field>
        {/* Contratado */}
        <Field label="Contratado *" className="col-span-2">
          <input
            className={inputCls + (errors.contratado ? ' border-red-400' : '')}
            value={form.contratado}
            onChange={(e) => set('contratado', e.target.value)}
            placeholder="Nombre empresa o persona contratada"
          />
          {errors.contratado && <p className="text-xs text-red-500 mt-0.5">{errors.contratado}</p>}
        </Field>
        {/* Objeto */}
        <Field label="Objeto del contrato *" className="col-span-2">
          <textarea
            rows={3}
            className={inputCls + (errors.objeto ? ' border-red-400' : '')}
            value={form.objeto}
            onChange={(e) => set('objeto', e.target.value)}
            placeholder="Descripción del objeto del contrato..."
          />
          {errors.objeto && <p className="text-xs text-red-500 mt-0.5">{errors.objeto}</p>}
        </Field>
        {/* Valor */}
        <Field label="Valor total">
          <input
            type="number"
            className={inputCls}
            value={form.valorTotal}
            onChange={(e) => set('valorTotal', e.target.value)}
            placeholder="0"
          />
        </Field>
        {/* Moneda */}
        <Field label="Moneda">
          <select className={selectCls} value={form.moneda} onChange={(e) => set('moneda', e.target.value)}>
            {CURRENCIES.map((c) => <option key={c}>{c}</option>)}
          </select>
        </Field>
        {/* Forma de pago */}
        <Field label="Forma de pago" className="col-span-2">
          <input className={inputCls} value={form.formaPago} onChange={(e) => set('formaPago', e.target.value)} placeholder="Ej: Mensual, Hitos, Contra entrega..." />
        </Field>
        {/* Fechas */}
        <Field label="Fecha de firma">
          <input type="date" className={inputCls} value={form.fechaFirma} onChange={(e) => set('fechaFirma', e.target.value)} />
        </Field>
        <Field label="Modalidad">
          <select className={selectCls} value={form.modalidad} onChange={(e) => set('modalidad', e.target.value)}>
            {MODALIDADES.map((m) => <option key={m}>{m}</option>)}
          </select>
        </Field>
        <Field label="Fecha inicio *">
          <input
            type="date"
            className={inputCls + (errors.fechaInicio ? ' border-red-400' : '')}
            value={form.fechaInicio}
            onChange={(e) => set('fechaInicio', e.target.value)}
          />
          {errors.fechaInicio && <p className="text-xs text-red-500 mt-0.5">{errors.fechaInicio}</p>}
        </Field>
        <Field label="Fecha fin *">
          <input
            type="date"
            className={inputCls + (errors.fechaFin ? ' border-red-400' : '')}
            value={form.fechaFin}
            onChange={(e) => set('fechaFin', e.target.value)}
          />
          {errors.fechaFin && <p className="text-xs text-red-500 mt-0.5">{errors.fechaFin}</p>}
        </Field>
        <Field label="Vigencia de garantías" className="col-span-2">
          <input type="date" className={inputCls} value={form.vigenciaGarantias || ''} onChange={(e) => set('vigenciaGarantias', e.target.value)} />
        </Field>
        {/* Penalizaciones */}
        <div className="col-span-2">
          <p className={labelCls}>Penalización por incumplimiento</p>
          <div className="flex gap-2">
            <select className={selectCls + ' w-40'} value={form.penalizacionTipo} onChange={(e) => set('penalizacionTipo', e.target.value)}>
              <option value="%">Porcentaje (%)</option>
              <option value="valor fijo">Valor fijo</option>
              <option value="por día">Por día</option>
            </select>
            <input type="number" className={inputCls} value={form.penalizacionValor} onChange={(e) => set('penalizacionValor', e.target.value)} placeholder="0" />
          </div>
        </div>
        {/* Garantías */}
        <div className="col-span-2">
          <p className={labelCls}>Garantías requeridas</p>
          <div className="grid grid-cols-2 gap-2 mt-1">
            {GARANTIAS_OPTIONS.map(({ key, label }) => (
              <label key={key} className="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300 cursor-pointer select-none">
                <input
                  type="checkbox"
                  className="rounded text-indigo-500"
                  checked={form.garantias[key]}
                  onChange={() => setGarantia(key)}
                />
                {label}
              </label>
            ))}
          </div>
        </div>
        {/* Responsable */}
        <Field label="Responsable interno" className="col-span-2">
          <select className={selectCls} value={form.responsable} onChange={(e) => set('responsable', e.target.value)}>
            {MOCK_TEAM.map((m) => <option key={m}>{m}</option>)}
          </select>
        </Field>
      </div>

      <div className="flex justify-end gap-3 mt-6 pt-4 border-t border-slate-200 dark:border-surface-700">
        <button onClick={onClose} className="px-4 py-2 text-sm text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-surface-700 rounded-lg transition-colors">
          Cancelar
        </button>
        <button onClick={handleSave} className="px-5 py-2 text-sm font-medium bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors">
          {isEdit ? 'Guardar cambios' : 'Crear contrato'}
        </button>
      </div>
    </Modal>
  );
}

// ── Contract Detail Modal ──────────────────────────────────────────────────────

function ContractDetailModal({ contract, onClose }) {
  const garantiasActivas = GARANTIAS_OPTIONS.filter((g) => contract.garantias?.[g.key]);
  return (
    <Modal title={`Detalle — ${contract.numero}`} onClose={onClose} wide>
      <div className="space-y-5">
        {/* Header info */}
        <div className="grid grid-cols-3 gap-3">
          <div className="bg-slate-50 dark:bg-surface-900 rounded-xl p-3">
            <p className="text-xs text-slate-500 dark:text-gray-400">Tipo</p>
            <p className="text-sm font-medium text-slate-800 dark:text-white mt-0.5">{contract.tipo}</p>
          </div>
          <div className="bg-slate-50 dark:bg-surface-900 rounded-xl p-3">
            <p className="text-xs text-slate-500 dark:text-gray-400">Estado</p>
            <span className={`inline-block text-xs font-medium px-2 py-0.5 rounded-full mt-0.5 ${STATUS_COLORS[contract.estado]}`}>{contract.estado}</span>
          </div>
          <div className="bg-slate-50 dark:bg-surface-900 rounded-xl p-3">
            <p className="text-xs text-slate-500 dark:text-gray-400">Proyecto</p>
            <p className="text-sm font-medium text-slate-800 dark:text-white mt-0.5">{contract.proyecto}</p>
          </div>
        </div>

        {/* Partes */}
        <div>
          <p className="text-xs font-semibold text-slate-400 dark:text-gray-500 uppercase tracking-wider mb-2">Partes</p>
          <div className="grid grid-cols-2 gap-3">
            <div className="bg-slate-50 dark:bg-surface-900 rounded-xl p-3">
              <p className="text-xs text-slate-500 dark:text-gray-400">Contratante</p>
              <p className="text-sm font-medium text-slate-800 dark:text-white mt-0.5">{contract.contratante}</p>
            </div>
            <div className="bg-slate-50 dark:bg-surface-900 rounded-xl p-3">
              <p className="text-xs text-slate-500 dark:text-gray-400">Contratado</p>
              <p className="text-sm font-medium text-slate-800 dark:text-white mt-0.5">{contract.contratado}</p>
            </div>
          </div>
        </div>

        {/* Objeto */}
        <div>
          <p className="text-xs font-semibold text-slate-400 dark:text-gray-500 uppercase tracking-wider mb-2">Objeto del contrato</p>
          <p className="text-sm text-slate-700 dark:text-slate-300 leading-relaxed bg-slate-50 dark:bg-surface-900 rounded-xl p-3">
            {contract.objeto}
          </p>
        </div>

        {/* Económico */}
        <div>
          <p className="text-xs font-semibold text-slate-400 dark:text-gray-500 uppercase tracking-wider mb-2">Condiciones económicas</p>
          <div className="grid grid-cols-3 gap-3">
            <div className="bg-slate-50 dark:bg-surface-900 rounded-xl p-3">
              <p className="text-xs text-slate-500 dark:text-gray-400">Valor total</p>
              <p className="text-sm font-semibold text-slate-800 dark:text-white mt-0.5">{fmtCurrency(contract.valorTotal, contract.moneda)}</p>
            </div>
            <div className="bg-slate-50 dark:bg-surface-900 rounded-xl p-3">
              <p className="text-xs text-slate-500 dark:text-gray-400">Modalidad</p>
              <p className="text-sm font-medium text-slate-800 dark:text-white mt-0.5">{contract.modalidad}</p>
            </div>
            <div className="bg-slate-50 dark:bg-surface-900 rounded-xl p-3">
              <p className="text-xs text-slate-500 dark:text-gray-400">Forma de pago</p>
              <p className="text-sm font-medium text-slate-800 dark:text-white mt-0.5">{contract.formaPago}</p>
            </div>
          </div>
        </div>

        {/* Fechas */}
        <div>
          <p className="text-xs font-semibold text-slate-400 dark:text-gray-500 uppercase tracking-wider mb-2">Fechas</p>
          <div className="grid grid-cols-4 gap-3">
            {[
              ['Firma', contract.fechaFirma],
              ['Inicio', contract.fechaInicio],
              ['Fin', contract.fechaFin],
              ['Venc. garantías', contract.vigenciaGarantias],
            ].map(([label, val]) => (
              <div key={label} className="bg-slate-50 dark:bg-surface-900 rounded-xl p-3">
                <p className="text-xs text-slate-500 dark:text-gray-400">{label}</p>
                <p className="text-sm font-medium text-slate-800 dark:text-white mt-0.5">{fmtDate(val)}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Penalización y garantías */}
        <div className="grid grid-cols-2 gap-4">
          <div>
            <p className="text-xs font-semibold text-slate-400 dark:text-gray-500 uppercase tracking-wider mb-2">Penalización</p>
            <div className="bg-slate-50 dark:bg-surface-900 rounded-xl p-3">
              <p className="text-sm text-slate-700 dark:text-slate-300">
                {contract.penalizacionValor} {contract.penalizacionTipo === '%' ? '%' : contract.penalizacionTipo === 'por día' ? '/ día' : fmtCurrency(contract.penalizacionValor, contract.moneda)}
                {contract.penalizacionTipo !== '%' && contract.penalizacionTipo !== 'por día' ? '' : ''}
              </p>
            </div>
          </div>
          <div>
            <p className="text-xs font-semibold text-slate-400 dark:text-gray-500 uppercase tracking-wider mb-2">Garantías requeridas</p>
            <div className="bg-slate-50 dark:bg-surface-900 rounded-xl p-3">
              {garantiasActivas.length === 0 ? (
                <p className="text-sm text-slate-400">Ninguna</p>
              ) : (
                <ul className="space-y-1">
                  {garantiasActivas.map((g) => (
                    <li key={g.key} className="text-sm text-slate-700 dark:text-slate-300 flex items-center gap-1.5">
                      <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 inline-block" />
                      {g.label}
                    </li>
                  ))}
                </ul>
              )}
            </div>
          </div>
        </div>

        {/* Responsable */}
        <div className="flex items-center justify-between text-sm">
          <span className="text-slate-500 dark:text-gray-400">Responsable interno:</span>
          <span className="font-medium text-slate-800 dark:text-white">{contract.responsable}</span>
        </div>
      </div>
      <div className="flex justify-end mt-6 pt-4 border-t border-slate-200 dark:border-surface-700">
        <button onClick={onClose} className="px-5 py-2 text-sm font-medium bg-slate-100 dark:bg-surface-700 text-slate-700 dark:text-slate-200 rounded-lg hover:bg-slate-200 dark:hover:bg-surface-600 transition-colors">
          Cerrar
        </button>
      </div>
    </Modal>
  );
}

// ── Adenda Modal ───────────────────────────────────────────────────────────────

const EMPTY_ADENDA = {
  contratoPadreId: '',
  descripcion: '',
  tipoCambio: 'valor',
  impactoPresupuesto: '',
  impactoDias: '',
  estado: 'Pendiente',
  fecha: today.toISOString().slice(0, 10),
};

function AdendaModal({ contracts, adenda, onSave, onClose, nextNum }) {
  const isEdit = !!adenda?.id;
  const [form, setForm] = useState(
    adenda?.id
      ? { ...adenda, impactoPresupuesto: String(adenda.impactoPresupuesto), impactoDias: String(adenda.impactoDias) }
      : { ...EMPTY_ADENDA, contratoPadreId: contracts[0]?.id || '', numero: nextNum }
  );
  const [errors, setErrors] = useState({});

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

  const validate = () => {
    const e = {};
    if (!form.contratoPadreId) e.contratoPadreId = 'Requerido';
    if (!form.descripcion.trim()) e.descripcion = 'Requerido';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const handleSave = () => {
    if (!validate()) return;
    onSave({
      ...form,
      impactoPresupuesto: Number(form.impactoPresupuesto) || 0,
      impactoDias: Number(form.impactoDias) || 0,
    });
  };

  return (
    <Modal title={isEdit ? `Editar ${form.numero}` : 'Nueva Adenda'} onClose={onClose} wide>
      <div className="space-y-4">
        <Field label="Contrato padre *">
          <select
            className={selectCls + (errors.contratoPadreId ? ' border-red-400' : '')}
            value={form.contratoPadreId}
            onChange={(e) => set('contratoPadreId', e.target.value)}
          >
            <option value="">— Seleccionar —</option>
            {contracts.map((c) => (
              <option key={c.id} value={c.id}>{c.numero} — {c.tipo} ({c.proyecto})</option>
            ))}
          </select>
          {errors.contratoPadreId && <p className="text-xs text-red-500 mt-0.5">{errors.contratoPadreId}</p>}
        </Field>
        <Field label="Descripción del cambio *">
          <textarea
            rows={3}
            className={inputCls + (errors.descripcion ? ' border-red-400' : '')}
            value={form.descripcion}
            onChange={(e) => set('descripcion', e.target.value)}
            placeholder="Describe el cambio o modificación..."
          />
          {errors.descripcion && <p className="text-xs text-red-500 mt-0.5">{errors.descripcion}</p>}
        </Field>
        <Field label="Tipo de cambio">
          <select className={selectCls} value={form.tipoCambio} onChange={(e) => set('tipoCambio', e.target.value)}>
            <option value="valor">Valor</option>
            <option value="plazo">Plazo</option>
            <option value="alcance">Alcance</option>
            <option value="todos">Valor + Plazo + Alcance</option>
          </select>
        </Field>
        <div className="grid grid-cols-2 gap-4">
          <Field label="Impacto en presupuesto (±$)">
            <input type="number" className={inputCls} value={form.impactoPresupuesto} onChange={(e) => set('impactoPresupuesto', e.target.value)} placeholder="0" />
          </Field>
          <Field label="Impacto en plazo (±días)">
            <input type="number" className={inputCls} value={form.impactoDias} onChange={(e) => set('impactoDias', e.target.value)} placeholder="0" />
          </Field>
        </div>
        <div className="grid grid-cols-2 gap-4">
          <Field label="Estado aprobación">
            <select className={selectCls} value={form.estado} onChange={(e) => set('estado', e.target.value)}>
              <option>Pendiente</option>
              <option>Aprobada</option>
              <option>Rechazada</option>
            </select>
          </Field>
          <Field label="Fecha">
            <input type="date" className={inputCls} value={form.fecha} onChange={(e) => set('fecha', e.target.value)} />
          </Field>
        </div>
      </div>
      <div className="flex justify-end gap-3 mt-6 pt-4 border-t border-slate-200 dark:border-surface-700">
        <button onClick={onClose} className="px-4 py-2 text-sm text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-surface-700 rounded-lg transition-colors">
          Cancelar
        </button>
        <button onClick={handleSave} className="px-5 py-2 text-sm font-medium bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors">
          {isEdit ? 'Guardar cambios' : 'Crear adenda'}
        </button>
      </div>
    </Modal>
  );
}

// ── Milestone Modal ────────────────────────────────────────────────────────────

function MilestoneModal({ contracts, milestone, onSave, onClose }) {
  const isEdit = !!milestone?.id;
  const [form, setForm] = useState(
    milestone?.id
      ? { ...milestone, valor: String(milestone.valor) }
      : { contratoPadreId: contracts[0]?.id || '', nombre: '', valor: '', fechaProgramada: today.toISOString().slice(0, 10), estado: 'Pendiente' }
  );
  const [errors, setErrors] = useState({});

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

  const validate = () => {
    const e = {};
    if (!form.contratoPadreId) e.contratoPadreId = 'Requerido';
    if (!form.nombre.trim()) e.nombre = 'Requerido';
    if (!form.fechaProgramada) e.fechaProgramada = 'Requerido';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const handleSave = () => {
    if (!validate()) return;
    onSave({ ...form, valor: Number(form.valor) || 0 });
  };

  const selectedContract = contracts.find((c) => c.id === form.contratoPadreId);

  return (
    <Modal title={isEdit ? 'Editar Hito' : 'Nuevo Hito de Pago'} onClose={onClose}>
      <div className="space-y-4">
        <Field label="Contrato *">
          <select
            className={selectCls + (errors.contratoPadreId ? ' border-red-400' : '')}
            value={form.contratoPadreId}
            onChange={(e) => set('contratoPadreId', e.target.value)}
          >
            <option value="">— Seleccionar —</option>
            {contracts.map((c) => (
              <option key={c.id} value={c.id}>{c.numero} — {c.proyecto}</option>
            ))}
          </select>
          {errors.contratoPadreId && <p className="text-xs text-red-500 mt-0.5">{errors.contratoPadreId}</p>}
        </Field>
        <Field label="Nombre del hito *">
          <input
            className={inputCls + (errors.nombre ? ' border-red-400' : '')}
            value={form.nombre}
            onChange={(e) => set('nombre', e.target.value)}
            placeholder="Ej: Anticipo inicial (20%)"
          />
          {errors.nombre && <p className="text-xs text-red-500 mt-0.5">{errors.nombre}</p>}
        </Field>
        <div className="grid grid-cols-2 gap-4">
          <Field label="Valor del hito">
            <input type="number" className={inputCls} value={form.valor} onChange={(e) => set('valor', e.target.value)} placeholder="0" />
          </Field>
          <Field label="Fecha programada *">
            <input
              type="date"
              className={inputCls + (errors.fechaProgramada ? ' border-red-400' : '')}
              value={form.fechaProgramada}
              onChange={(e) => set('fechaProgramada', e.target.value)}
            />
            {errors.fechaProgramada && <p className="text-xs text-red-500 mt-0.5">{errors.fechaProgramada}</p>}
          </Field>
        </div>
        <Field label="Estado">
          <select className={selectCls} value={form.estado} onChange={(e) => set('estado', e.target.value)}>
            <option>Pendiente</option>
            <option>Habilitado</option>
            <option>Pagado</option>
          </select>
        </Field>
        {selectedContract && form.valor && (
          <div className="bg-blue-50 dark:bg-blue-500/10 rounded-xl p-3 text-sm text-blue-700 dark:text-blue-400">
            {((Number(form.valor) / selectedContract.valorTotal) * 100).toFixed(1)}% del valor total del contrato
          </div>
        )}
      </div>
      <div className="flex justify-end gap-3 mt-6 pt-4 border-t border-slate-200 dark:border-surface-700">
        <button onClick={onClose} className="px-4 py-2 text-sm text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-surface-700 rounded-lg transition-colors">
          Cancelar
        </button>
        <button onClick={handleSave} className="px-5 py-2 text-sm font-medium bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors">
          {isEdit ? 'Guardar' : 'Crear hito'}
        </button>
      </div>
    </Modal>
  );
}

// ── KPI Card ───────────────────────────────────────────────────────────────────

function KPICard({ label, value, sub, color = 'indigo', icon }) {
  const colorMap = {
    indigo: 'from-indigo-500/10 to-indigo-500/5 border-indigo-500/20 text-indigo-600 dark:text-indigo-400',
    emerald: 'from-emerald-500/10 to-emerald-500/5 border-emerald-500/20 text-emerald-600 dark:text-emerald-400',
    amber: 'from-amber-500/10 to-amber-500/5 border-amber-500/20 text-amber-600 dark:text-amber-400',
    red: 'from-red-500/10 to-red-500/5 border-red-500/20 text-red-600 dark:text-red-400',
  };
  return (
    <div className={`bg-gradient-to-br ${colorMap[color]} border rounded-2xl p-4`}>
      <div className="flex items-center gap-2 mb-1">
        <span className="text-lg">{icon}</span>
        <p className="text-xs font-medium text-slate-500 dark:text-gray-400">{label}</p>
      </div>
      <p className="text-2xl font-bold text-slate-800 dark:text-white">{value}</p>
      {sub && <p className="text-xs text-slate-500 dark:text-gray-400 mt-0.5">{sub}</p>}
    </div>
  );
}

// ── Tab 1: Contratos ───────────────────────────────────────────────────────────

function ContratosTab({ contracts, adendas, onNew, onEdit, onDetail, onNewAdenda, onViewMilestones }) {
  const { selectedProjectId } = useProject();
  const [filterProyecto, setFilterProyecto] = useState('');
  const [filterTipo, setFilterTipo] = useState('');
  const [filterEstado, setFilterEstado] = useState('');
  const [search, setSearch] = useState('');

  const filtered = useMemo(() => {
    return contracts.filter((c) => {
      if (selectedProjectId && c.projectId !== selectedProjectId) return false;
      if (filterProyecto && c.proyecto !== filterProyecto) return false;
      if (filterTipo && c.tipo !== filterTipo) return false;
      if (filterEstado && c.estado !== filterEstado) return false;
      if (search) {
        const q = search.toLowerCase();
        return (
          c.numero.toLowerCase().includes(q) ||
          c.contratante.toLowerCase().includes(q) ||
          c.contratado.toLowerCase().includes(q) ||
          c.objeto.toLowerCase().includes(q)
        );
      }
      return true;
    });
  }, [contracts, filterProyecto, filterTipo, filterEstado, search, selectedProjectId]);

  const totalValor = contracts.reduce((s, c) => s + (c.valorTotal || 0), 0);
  const activos = contracts.filter((c) => c.estado === 'En ejecución').length;
  const proxVencer = contracts.filter((c) => {
    const d = daysUntil(c.fechaFin);
    return d !== null && d >= 0 && d <= 30;
  }).length;

  return (
    <div className="space-y-6">
      {/* KPIs */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <KPICard label="Total contratos" value={contracts.length} icon="📋" color="indigo" />
        <KPICard label="Valor comprometido" value={fmtCurrency(totalValor)} sub="Todos los contratos" icon="💰" color="emerald" />
        <KPICard label="Contratos activos" value={activos} sub="En ejecución" icon="✅" color="emerald" />
        <KPICard label="Próximos a vencer" value={proxVencer} sub="Dentro de 30 días" icon="⚠️" color={proxVencer > 0 ? 'red' : 'indigo'} />
      </div>

      {/* Filters + New */}
      <div className="bg-white dark:bg-surface-800 rounded-2xl border border-slate-200 dark:border-surface-700 p-4">
        <div className="flex flex-wrap gap-3 items-center">
          <input
            className={inputCls + ' flex-1 min-w-48'}
            placeholder="Buscar por número, partes u objeto..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />
          <select className={selectCls + ' w-44'} value={filterProyecto} onChange={(e) => setFilterProyecto(e.target.value)}>
            <option value="">Todos los proyectos</option>
            {MOCK_PROJECTS.map((p) => <option key={p}>{p}</option>)}
          </select>
          <select className={selectCls + ' w-44'} value={filterTipo} onChange={(e) => setFilterTipo(e.target.value)}>
            <option value="">Todos los tipos</option>
            {CONTRACT_TYPES.map((t) => <option key={t}>{t}</option>)}
          </select>
          <select className={selectCls + ' w-40'} value={filterEstado} onChange={(e) => setFilterEstado(e.target.value)}>
            <option value="">Todos los estados</option>
            {CONTRACT_STATUSES.map((s) => <option key={s}>{s}</option>)}
          </select>
          <button
            onClick={onNew}
            className="px-4 py-2 text-sm font-medium bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors flex items-center gap-1.5 shrink-0"
          >
            <span className="text-base leading-none">+</span> Nuevo Contrato
          </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 bg-slate-50 dark:bg-surface-900/50">
                {['Número', 'Tipo', 'Proyecto', 'Partes', 'Valor', 'Estado', 'Vencimiento', 'Acciones'].map((h) => (
                  <th key={h} className="text-left px-4 py-3 text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-wider whitespace-nowrap">{h}</th>
                ))}
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100 dark:divide-surface-700">
              {filtered.length === 0 && (
                <tr>
                  <td colSpan={8} className="text-center py-10 text-slate-400 dark:text-gray-500">
                    No se encontraron contratos
                  </td>
                </tr>
              )}
              {filtered.map((c) => {
                const days = daysUntil(c.fechaFin);
                const isExpiringSoon = days !== null && days >= 0 && days <= 30;
                const isOverdue = days !== null && days < 0 && !['Terminado', 'Liquidado'].includes(c.estado);
                return (
                  <tr key={c.id} className="hover:bg-slate-50 dark:hover:bg-surface-700/50 transition-colors">
                    <td className="px-4 py-3 font-mono text-xs font-semibold text-indigo-600 dark:text-indigo-400">{c.numero}</td>
                    <td className="px-4 py-3">
                      <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${TYPE_COLORS[c.tipo] || 'bg-slate-100 text-slate-600'}`}>
                        {c.tipo.replace('Acuerdo de confidencialidad', 'NDA')}
                      </span>
                    </td>
                    <td className="px-4 py-3 text-slate-700 dark:text-slate-300 font-medium">{c.proyecto}</td>
                    <td className="px-4 py-3">
                      <p className="text-slate-700 dark:text-slate-300 truncate max-w-40" title={c.contratante}>{c.contratante}</p>
                      <p className="text-slate-400 dark:text-gray-500 text-xs truncate max-w-40" title={c.contratado}>↳ {c.contratado}</p>
                    </td>
                    <td className="px-4 py-3 font-semibold text-slate-800 dark:text-white whitespace-nowrap">
                      {c.valorTotal === 0 ? '—' : fmtCurrency(c.valorTotal, c.moneda)}
                    </td>
                    <td className="px-4 py-3">
                      <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${STATUS_COLORS[c.estado]}`}>{c.estado}</span>
                    </td>
                    <td className="px-4 py-3 whitespace-nowrap">
                      <span className={isOverdue ? 'text-red-500 font-semibold' : isExpiringSoon ? 'text-amber-500 font-semibold' : 'text-slate-600 dark:text-slate-300'}>
                        {fmtDate(c.fechaFin)}
                      </span>
                      {isOverdue && <span className="ml-1 text-xs text-red-500">(vencido)</span>}
                      {isExpiringSoon && !isOverdue && <span className="ml-1 text-xs text-amber-500">({days}d)</span>}
                    </td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-1">
                        <button
                          onClick={() => onDetail(c)}
                          className="text-xs px-2 py-1 rounded-lg bg-slate-100 dark:bg-surface-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-surface-600 transition-colors"
                          title="Ver detalle"
                        >
                          Ver
                        </button>
                        <button
                          onClick={() => onEdit(c)}
                          className="text-xs px-2 py-1 rounded-lg bg-slate-100 dark:bg-surface-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-surface-600 transition-colors"
                          title="Editar"
                        >
                          Editar
                        </button>
                        <button
                          onClick={() => onNewAdenda(c)}
                          className="text-xs px-2 py-1 rounded-lg bg-purple-100 dark:bg-purple-500/10 text-purple-600 dark:text-purple-400 hover:bg-purple-200 dark:hover:bg-purple-500/20 transition-colors"
                          title="Agregar Adenda"
                        >
                          Adenda
                        </button>
                        <button
                          onClick={() => onViewMilestones(c)}
                          className="text-xs px-2 py-1 rounded-lg bg-emerald-100 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-200 dark:hover:bg-emerald-500/20 transition-colors"
                          title="Ver Hitos"
                        >
                          Hitos
                        </button>
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
        {filtered.length > 0 && (
          <div className="px-4 py-2 border-t border-slate-100 dark:border-surface-700 text-xs text-slate-400 dark:text-gray-500">
            Mostrando {filtered.length} de {contracts.length} contratos
          </div>
        )}
      </div>
    </div>
  );
}

// ── Tab 2: Adendas ─────────────────────────────────────────────────────────────

function AdendasTab({ adendas, contracts, onNew, onEdit }) {
  const contractMap = Object.fromEntries(contracts.map((c) => [c.id, c]));

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-base font-semibold text-slate-800 dark:text-white">Adendas y Modificaciones</h2>
          <p className="text-sm text-slate-500 dark:text-gray-400 mt-0.5">{adendas.length} adenda{adendas.length !== 1 ? 's' : ''} registrada{adendas.length !== 1 ? 's' : ''}</p>
        </div>
        <button
          onClick={onNew}
          className="px-4 py-2 text-sm font-medium bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors flex items-center gap-1.5"
        >
          <span className="text-base leading-none">+</span> Nueva Adenda
        </button>
      </div>

      <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 bg-slate-50 dark:bg-surface-900/50">
                {['N° Adenda', 'Contrato original', 'Descripción del cambio', 'Tipo cambio', 'Impacto $', 'Impacto días', 'Estado', 'Fecha', 'Acciones'].map((h) => (
                  <th key={h} className="text-left px-4 py-3 text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-wider whitespace-nowrap">{h}</th>
                ))}
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100 dark:divide-surface-700">
              {adendas.length === 0 && (
                <tr><td colSpan={9} className="text-center py-10 text-slate-400 dark:text-gray-500">No hay adendas registradas</td></tr>
              )}
              {adendas.map((a) => {
                const parent = contractMap[a.contratoPadreId];
                return (
                  <tr key={a.id} className="hover:bg-slate-50 dark:hover:bg-surface-700/50 transition-colors">
                    <td className="px-4 py-3 font-mono text-xs font-semibold text-purple-600 dark:text-purple-400">{a.numero}</td>
                    <td className="px-4 py-3">
                      {parent ? (
                        <div>
                          <p className="font-medium text-slate-700 dark:text-slate-300">{parent.numero}</p>
                          <p className="text-xs text-slate-400 dark:text-gray-500">{parent.proyecto}</p>
                        </div>
                      ) : <span className="text-slate-400">—</span>}
                    </td>
                    <td className="px-4 py-3 max-w-64">
                      <p className="text-slate-700 dark:text-slate-300 line-clamp-2">{a.descripcion}</p>
                    </td>
                    <td className="px-4 py-3">
                      <span className="text-xs bg-slate-100 dark:bg-surface-700 text-slate-600 dark:text-slate-300 px-2 py-0.5 rounded-full">
                        {TIPO_CAMBIO_LABELS[a.tipoCambio] || a.tipoCambio}
                      </span>
                    </td>
                    <td className="px-4 py-3 font-semibold whitespace-nowrap">
                      {a.impactoPresupuesto === 0 ? (
                        <span className="text-slate-400">—</span>
                      ) : (
                        <span className={a.impactoPresupuesto > 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-500'}>
                          {a.impactoPresupuesto > 0 ? '+' : ''}{fmtCurrency(a.impactoPresupuesto)}
                        </span>
                      )}
                    </td>
                    <td className="px-4 py-3 font-semibold whitespace-nowrap">
                      {a.impactoDias === 0 ? (
                        <span className="text-slate-400">—</span>
                      ) : (
                        <span className={a.impactoDias > 0 ? 'text-amber-600 dark:text-amber-400' : 'text-emerald-600 dark:text-emerald-400'}>
                          {a.impactoDias > 0 ? '+' : ''}{a.impactoDias} días
                        </span>
                      )}
                    </td>
                    <td className="px-4 py-3">
                      <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${ADENDA_STATUS_COLORS[a.estado]}`}>{a.estado}</span>
                    </td>
                    <td className="px-4 py-3 text-slate-500 dark:text-gray-400 whitespace-nowrap">{fmtDate(a.fecha)}</td>
                    <td className="px-4 py-3">
                      <button
                        onClick={() => onEdit(a)}
                        className="text-xs px-2 py-1 rounded-lg bg-slate-100 dark:bg-surface-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-surface-600 transition-colors"
                      >
                        Editar
                      </button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// ── Tab 3: Hitos de Pago ───────────────────────────────────────────────────────

function MilestonesProgressBar({ milestones }) {
  const total = milestones.length;
  const paid = milestones.filter((m) => m.estado === 'Pagado').length;
  const enabled = milestones.filter((m) => m.estado === 'Habilitado').length;
  const paidPct = total > 0 ? (paid / total) * 100 : 0;
  const enabledPct = total > 0 ? (enabled / total) * 100 : 0;

  return (
    <div>
      <div className="flex items-center justify-between text-xs mb-1">
        <span className="text-slate-500 dark:text-gray-400">{paid}/{total} hitos pagados</span>
        <span className="text-slate-500 dark:text-gray-400">{Math.round(paidPct)}%</span>
      </div>
      <div className="h-2 rounded-full bg-slate-200 dark:bg-surface-700 overflow-hidden flex">
        <div className="h-full bg-emerald-500 transition-all" style={{ width: `${paidPct}%` }} />
        <div className="h-full bg-blue-400 transition-all" style={{ width: `${enabledPct}%` }} />
      </div>
      <div className="flex gap-3 mt-1 text-xs text-slate-400">
        <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-full bg-emerald-500 inline-block" />Pagado</span>
        <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-full bg-blue-400 inline-block" />Habilitado</span>
        <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-full bg-slate-300 inline-block" />Pendiente</span>
      </div>
    </div>
  );
}

function HitosPagoTab({ milestones, contracts, onNew, onEdit }) {
  const contractMap = Object.fromEntries(contracts.map((c) => [c.id, c]));
  const [filterContrato, setFilterContrato] = useState('');

  const contractsWithMilestones = useMemo(() => {
    const ids = [...new Set(milestones.map((m) => m.contratoPadreId))];
    return ids.filter((id) => !filterContrato || id === filterContrato);
  }, [milestones, filterContrato]);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between flex-wrap gap-3">
        <div>
          <h2 className="text-base font-semibold text-slate-800 dark:text-white">Hitos de Pago</h2>
          <p className="text-sm text-slate-500 dark:text-gray-400 mt-0.5">{milestones.length} hitos registrados</p>
        </div>
        <div className="flex items-center gap-3">
          <select className={selectCls + ' w-52'} value={filterContrato} onChange={(e) => setFilterContrato(e.target.value)}>
            <option value="">Todos los contratos</option>
            {contracts.map((c) => <option key={c.id} value={c.id}>{c.numero} — {c.proyecto}</option>)}
          </select>
          <button
            onClick={onNew}
            className="px-4 py-2 text-sm font-medium bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors flex items-center gap-1.5"
          >
            <span className="text-base leading-none">+</span> Nuevo Hito
          </button>
        </div>
      </div>

      {contractsWithMilestones.length === 0 && (
        <div className="bg-white dark:bg-surface-800 rounded-2xl border border-slate-200 dark:border-surface-700 p-12 text-center text-slate-400 dark:text-gray-500">
          No hay hitos registrados
        </div>
      )}

      {contractsWithMilestones.map((cId) => {
        const c = contractMap[cId];
        if (!c) return null;
        const cMilestones = milestones.filter((m) => m.contratoPadreId === cId);
        const totalPaid = cMilestones.filter((m) => m.estado === 'Pagado').reduce((s, m) => s + m.valor, 0);

        return (
          <div key={cId} className="bg-white dark:bg-surface-800 rounded-2xl border border-slate-200 dark:border-surface-700 overflow-hidden">
            {/* Contract header */}
            <div className="px-5 py-4 border-b border-slate-200 dark:border-surface-700 bg-slate-50 dark:bg-surface-900/50">
              <div className="flex items-center justify-between flex-wrap gap-3">
                <div className="flex items-center gap-3">
                  <span className="font-mono text-sm font-bold text-indigo-600 dark:text-indigo-400">{c.numero}</span>
                  <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${TYPE_COLORS[c.tipo]}`}>{c.tipo}</span>
                  <span className="text-sm text-slate-600 dark:text-slate-300">{c.proyecto}</span>
                </div>
                <div className="text-right">
                  <p className="text-xs text-slate-500 dark:text-gray-400">Pagado vs Total</p>
                  <p className="text-sm font-semibold text-slate-800 dark:text-white">
                    {fmtCurrency(totalPaid, c.moneda)} / {fmtCurrency(c.valorTotal, c.moneda)}
                  </p>
                </div>
              </div>
              <div className="mt-3">
                <MilestonesProgressBar milestones={cMilestones} />
              </div>
            </div>

            {/* Milestones timeline */}
            <div className="p-5">
              <div className="relative">
                {/* Timeline line */}
                <div className="absolute left-3.5 top-0 bottom-0 w-px bg-slate-200 dark:bg-surface-700" />

                <div className="space-y-4">
                  {cMilestones.map((m, idx) => {
                    const isPaid = m.estado === 'Pagado';
                    const isEnabled = m.estado === 'Habilitado';
                    const pct = c.valorTotal > 0 ? ((m.valor / c.valorTotal) * 100).toFixed(1) : 0;
                    const mDays = daysUntil(m.fechaProgramada);
                    const isLate = mDays !== null && mDays < 0 && !isPaid;

                    return (
                      <div key={m.id} className="relative flex items-start gap-4 pl-8">
                        {/* Dot */}
                        <div
                          className={`absolute left-1.5 w-4 h-4 rounded-full border-2 flex items-center justify-center shrink-0 mt-0.5
                            ${isPaid ? 'bg-emerald-500 border-emerald-500' : isEnabled ? 'bg-blue-500 border-blue-500' : 'bg-white dark:bg-surface-800 border-slate-300 dark:border-surface-600'}`}
                        >
                          {isPaid && <span className="text-white text-xs">✓</span>}
                          {isEnabled && <span className="text-white text-xs">!</span>}
                        </div>

                        {/* Content */}
                        <div className="flex-1 flex items-center justify-between flex-wrap gap-2">
                          <div>
                            <p className={`text-sm font-medium ${isPaid ? 'text-slate-500 dark:text-gray-400 line-through' : 'text-slate-800 dark:text-white'}`}>
                              {m.nombre}
                            </p>
                            <p className={`text-xs mt-0.5 ${isLate ? 'text-red-500' : 'text-slate-400 dark:text-gray-500'}`}>
                              {isLate ? `⚠ Vencido — ` : ''}{fmtDate(m.fechaProgramada)}
                            </p>
                          </div>
                          <div className="flex items-center gap-3">
                            <div className="text-right">
                              <p className="text-sm font-semibold text-slate-800 dark:text-white">{fmtCurrency(m.valor, c.moneda)}</p>
                              <p className="text-xs text-slate-400 dark:text-gray-500">{pct}% del contrato</p>
                            </div>
                            <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${MILESTONE_STATUS_COLORS[m.estado]}`}>{m.estado}</span>
                            <button
                              onClick={() => onEdit(m)}
                              className="text-xs px-2 py-1 rounded-lg bg-slate-100 dark:bg-surface-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-surface-600 transition-colors"
                            >
                              Editar
                            </button>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ── Tab 4: Alertas ─────────────────────────────────────────────────────────────

function AlertasTab({ contracts }) {
  const alerts = useMemo(() => {
    const critical = [];
    const warning = [];
    const info = [];

    contracts.forEach((c) => {
      if (['Terminado', 'Liquidado'].includes(c.estado)) return;

      const dFin = daysUntil(c.fechaFin);
      const dGar = daysUntil(c.vigenciaGarantias);

      // Overdue
      if (dFin !== null && dFin < 0) {
        critical.push({
          id: `${c.id}-fin-overdue`,
          contract: c,
          type: 'Contrato vencido',
          detail: `Venció hace ${Math.abs(dFin)} día(s)`,
          days: dFin,
          action: 'Revisar estado',
        });
      } else if (dFin !== null && dFin <= 7) {
        critical.push({
          id: `${c.id}-fin-critical`,
          contract: c,
          type: 'Vencimiento inminente',
          detail: `Vence en ${dFin} día(s)`,
          days: dFin,
          action: 'Renovar o cerrar',
        });
      } else if (dFin !== null && dFin <= 30) {
        warning.push({
          id: `${c.id}-fin-warn`,
          contract: c,
          type: 'Próximo a vencer',
          detail: `Vence en ${dFin} día(s)`,
          days: dFin,
          action: 'Planificar renovación',
        });
      }

      // Garantías
      if (dGar !== null && dGar < 0) {
        critical.push({
          id: `${c.id}-gar-overdue`,
          contract: c,
          type: 'Garantías vencidas',
          detail: `Vencieron hace ${Math.abs(dGar)} día(s)`,
          days: dGar,
          action: 'Renovar garantías',
        });
      } else if (dGar !== null && dGar <= 30) {
        warning.push({
          id: `${c.id}-gar-warn`,
          contract: c,
          type: 'Garantías por vencer',
          detail: `Vencen en ${dGar} día(s)`,
          days: dGar,
          action: 'Solicitar renovación',
        });
      } else if (dFin !== null && dFin > 30 && dFin <= 60) {
        info.push({
          id: `${c.id}-info`,
          contract: c,
          type: 'Seguimiento',
          detail: `Vence en ${dFin} días`,
          days: dFin,
          action: 'Monitorear avance',
        });
      }
    });

    return { critical, warning, info };
  }, [contracts]);

  const AlertCard = ({ alert, colorCls, iconBg }) => (
    <div className={`flex items-start gap-4 p-4 rounded-xl border ${colorCls}`}>
      <div className={`w-9 h-9 rounded-xl flex items-center justify-center shrink-0 ${iconBg}`}>
        <span className="text-base">{alert.days < 0 ? '🔴' : alert.days <= 7 ? '🚨' : alert.days <= 30 ? '⚠️' : 'ℹ️'}</span>
      </div>
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 flex-wrap">
          <span className="font-mono text-xs font-bold text-slate-600 dark:text-slate-300">{alert.contract.numero}</span>
          <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${TYPE_COLORS[alert.contract.tipo]}`}>
            {alert.contract.tipo.replace('Acuerdo de confidencialidad', 'NDA')}
          </span>
        </div>
        <p className="text-sm font-semibold text-slate-800 dark:text-white mt-0.5">{alert.type}</p>
        <p className="text-xs text-slate-500 dark:text-gray-400">{alert.detail} · {alert.contract.proyecto} · {alert.contract.contratado}</p>
      </div>
      <button className="shrink-0 text-xs px-3 py-1.5 rounded-lg bg-white dark:bg-surface-700 border border-slate-200 dark:border-surface-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-surface-600 transition-colors font-medium whitespace-nowrap">
        {alert.action}
      </button>
    </div>
  );

  const totalAlerts = alerts.critical.length + alerts.warning.length + alerts.info.length;

  return (
    <div className="space-y-6">
      {/* Summary */}
      <div className="grid grid-cols-3 gap-4">
        <div className="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 rounded-2xl p-4">
          <p className="text-xs font-medium text-red-600 dark:text-red-400 mb-1">Crítico</p>
          <p className="text-3xl font-bold text-red-600 dark:text-red-400">{alerts.critical.length}</p>
          <p className="text-xs text-red-500/70 dark:text-red-400/60 mt-0.5">Requieren acción inmediata</p>
        </div>
        <div className="bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20 rounded-2xl p-4">
          <p className="text-xs font-medium text-amber-600 dark:text-amber-400 mb-1">Advertencia</p>
          <p className="text-3xl font-bold text-amber-600 dark:text-amber-400">{alerts.warning.length}</p>
          <p className="text-xs text-amber-500/70 dark:text-amber-400/60 mt-0.5">Vencen en menos de 30 días</p>
        </div>
        <div className="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 rounded-2xl p-4">
          <p className="text-xs font-medium text-blue-600 dark:text-blue-400 mb-1">Informativo</p>
          <p className="text-3xl font-bold text-blue-600 dark:text-blue-400">{alerts.info.length}</p>
          <p className="text-xs text-blue-500/70 dark:text-blue-400/60 mt-0.5">Para seguimiento</p>
        </div>
      </div>

      {totalAlerts === 0 && (
        <div className="bg-white dark:bg-surface-800 rounded-2xl border border-slate-200 dark:border-surface-700 p-12 text-center">
          <p className="text-2xl mb-2">✅</p>
          <p className="text-slate-600 dark:text-slate-300 font-medium">Sin alertas activas</p>
          <p className="text-sm text-slate-400 dark:text-gray-500 mt-1">Todos los contratos están dentro de los plazos</p>
        </div>
      )}

      {/* Critical */}
      {alerts.critical.length > 0 && (
        <div>
          <h3 className="text-sm font-semibold text-red-600 dark:text-red-400 flex items-center gap-2 mb-3">
            <span>🔴</span> Crítico — Requiere atención inmediata ({alerts.critical.length})
          </h3>
          <div className="space-y-3">
            {alerts.critical.map((a) => (
              <AlertCard
                key={a.id}
                alert={a}
                colorCls="bg-red-50 dark:bg-red-500/5 border-red-200 dark:border-red-500/20"
                iconBg="bg-red-100 dark:bg-red-500/10"
              />
            ))}
          </div>
        </div>
      )}

      {/* Warning */}
      {alerts.warning.length > 0 && (
        <div>
          <h3 className="text-sm font-semibold text-amber-600 dark:text-amber-400 flex items-center gap-2 mb-3">
            <span>🟡</span> Advertencia — Próximos a vencer ({alerts.warning.length})
          </h3>
          <div className="space-y-3">
            {alerts.warning.map((a) => (
              <AlertCard
                key={a.id}
                alert={a}
                colorCls="bg-amber-50 dark:bg-amber-500/5 border-amber-200 dark:border-amber-500/20"
                iconBg="bg-amber-100 dark:bg-amber-500/10"
              />
            ))}
          </div>
        </div>
      )}

      {/* Info */}
      {alerts.info.length > 0 && (
        <div>
          <h3 className="text-sm font-semibold text-blue-600 dark:text-blue-400 flex items-center gap-2 mb-3">
            <span>🔵</span> Informativo ({alerts.info.length})
          </h3>
          <div className="space-y-3">
            {alerts.info.map((a) => (
              <AlertCard
                key={a.id}
                alert={a}
                colorCls="bg-blue-50 dark:bg-blue-500/5 border-blue-200 dark:border-blue-500/20"
                iconBg="bg-blue-100 dark:bg-blue-500/10"
              />
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

// ── Main Component ─────────────────────────────────────────────────────────────

export default function ContractsPage() {
  const [activeTab, setActiveTab] = useState('contratos');
  const [contracts, setContracts] = useState(INITIAL_CONTRACTS);
  const [adendas, setAdendas] = useState(INITIAL_ADENDAS);
  const [milestones, setMilestones] = useState(INITIAL_MILESTONES);

  // Modal state
  const [contractModal, setContractModal] = useState(null); // null | { mode:'new'|'edit'|'detail', data? }
  const [adendaModal, setAdendaModal] = useState(null);     // null | { mode:'new'|'edit', data?, prefillContractId? }
  const [milestoneModal, setMilestoneModal] = useState(null); // null | { mode:'new'|'edit', data? }

  // Auto numbering
  const nextContractNum = () => {
    const nums = contracts.map((c) => parseInt(c.numero.replace('CNT-', '')) || 0);
    return `CNT-${String(Math.max(0, ...nums) + 1).padStart(3, '0')}`;
  };
  const nextAdendaNum = () => {
    const nums = adendas.map((a) => parseInt(a.numero.replace('ADN-', '')) || 0);
    return `ADN-${String(Math.max(0, ...nums) + 1).padStart(3, '0')}`;
  };

  // Contract CRUD
  const saveContract = (data) => {
    if (data.id) {
      setContracts((prev) => prev.map((c) => c.id === data.id ? data : c));
    } else {
      setContracts((prev) => [...prev, { ...data, id: `cnt${Date.now()}` }]);
    }
    setContractModal(null);
  };

  // Adenda CRUD
  const saveAdenda = (data) => {
    if (data.id) {
      setAdendas((prev) => prev.map((a) => a.id === data.id ? data : a));
    } else {
      setAdendas((prev) => [...prev, { ...data, id: `adn${Date.now()}`, numero: nextAdendaNum() }]);
    }
    setAdendaModal(null);
  };

  // Milestone CRUD
  const saveMilestone = (data) => {
    if (data.id) {
      setMilestones((prev) => prev.map((m) => m.id === data.id ? data : m));
    } else {
      setMilestones((prev) => [...prev, { ...data, id: `hto${Date.now()}` }]);
    }
    setMilestoneModal(null);
  };

  const TABS = [
    { key: 'contratos', label: 'Contratos', count: contracts.length },
    { key: 'adendas', label: 'Adendas', count: adendas.length },
    { key: 'hitos', label: 'Hitos de Pago', count: milestones.length },
    { key: 'alertas', label: 'Alertas', count: null, alertCount: contracts.filter((c) => { const d = daysUntil(c.fechaFin); return d !== null && d <= 30 && !['Terminado', 'Liquidado'].includes(c.estado); }).length },
  ];

  return (
    <div className="flex flex-col h-full min-h-0 bg-slate-50 dark:bg-surface-900">
      {/* Page header */}
      <div className="bg-white dark:bg-surface-800 border-b border-slate-200 dark:border-surface-700 px-6 py-4 shrink-0">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-xl font-bold text-slate-800 dark:text-white">Contratos</h1>
            <p className="text-sm text-slate-500 dark:text-gray-400 mt-0.5">Módulo 13 — Gestión contractual integral</p>
          </div>
          <div className="flex items-center gap-2 text-xs text-slate-400 dark:text-gray-500">
            <span>📋</span>
            <span>{contracts.length} contratos · {adendas.length} adendas · {milestones.length} hitos</span>
          </div>
        </div>

        {/* Tabs */}
        <div className="flex gap-1 mt-4">
          {TABS.map((tab) => (
            <button
              key={tab.key}
              onClick={() => setActiveTab(tab.key)}
              className={`relative flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-t-lg transition-colors ${
                activeTab === tab.key
                  ? 'bg-slate-50 dark:bg-surface-900 text-indigo-600 dark:text-indigo-400 border border-b-0 border-slate-200 dark:border-surface-700'
                  : 'text-slate-500 dark:text-gray-400 hover:text-slate-700 dark:hover:text-slate-200'
              }`}
            >
              {tab.label}
              {tab.count !== null && (
                <span className={`text-xs px-1.5 py-0.5 rounded-full ${activeTab === tab.key ? 'bg-indigo-100 dark:bg-indigo-500/20 text-indigo-600 dark:text-indigo-400' : 'bg-slate-100 dark:bg-surface-700 text-slate-500 dark:text-gray-400'}`}>
                  {tab.count}
                </span>
              )}
              {tab.alertCount !== undefined && tab.alertCount > 0 && (
                <span className="text-xs px-1.5 py-0.5 rounded-full bg-red-100 dark:bg-red-500/20 text-red-600 dark:text-red-400">
                  {tab.alertCount}
                </span>
              )}
            </button>
          ))}
        </div>
      </div>

      {/* Tab content */}
      <div className="flex-1 overflow-y-auto p-6">
        {activeTab === 'contratos' && (
          <ContratosTab
            contracts={contracts}
            adendas={adendas}
            onNew={() => setContractModal({ mode: 'new' })}
            onEdit={(c) => setContractModal({ mode: 'edit', data: c })}
            onDetail={(c) => setContractModal({ mode: 'detail', data: c })}
            onNewAdenda={(c) => {
              setAdendaModal({ mode: 'new', prefillContractId: c.id });
              setActiveTab('adendas');
            }}
            onViewMilestones={(c) => setActiveTab('hitos')}
          />
        )}
        {activeTab === 'adendas' && (
          <AdendasTab
            adendas={adendas}
            contracts={contracts}
            onNew={() => setAdendaModal({ mode: 'new' })}
            onEdit={(a) => setAdendaModal({ mode: 'edit', data: a })}
          />
        )}
        {activeTab === 'hitos' && (
          <HitosPagoTab
            milestones={milestones}
            contracts={contracts}
            onNew={() => setMilestoneModal({ mode: 'new' })}
            onEdit={(m) => setMilestoneModal({ mode: 'edit', data: m })}
          />
        )}
        {activeTab === 'alertas' && (
          <AlertasTab contracts={contracts} />
        )}
      </div>

      {/* Modals */}
      {contractModal && contractModal.mode !== 'detail' && (
        <ContractModal
          contract={contractModal.data}
          onSave={saveContract}
          onClose={() => setContractModal(null)}
          nextNum={nextContractNum()}
        />
      )}
      {contractModal && contractModal.mode === 'detail' && (
        <ContractDetailModal
          contract={contractModal.data}
          onClose={() => setContractModal(null)}
        />
      )}
      {adendaModal && (
        <AdendaModal
          contracts={contracts}
          adenda={adendaModal.mode === 'edit' ? adendaModal.data : adendaModal.prefillContractId ? { contratoPadreId: adendaModal.prefillContractId } : null}
          onSave={saveAdenda}
          onClose={() => setAdendaModal(null)}
          nextNum={nextAdendaNum()}
        />
      )}
      {milestoneModal && (
        <MilestoneModal
          contracts={contracts}
          milestone={milestoneModal.mode === 'edit' ? milestoneModal.data : null}
          onSave={saveMilestone}
          onClose={() => setMilestoneModal(null)}
        />
      )}
    </div>
  );
}
