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

// ── Mock Data ──────────────────────────────────────────────────────────────────
const INITIAL_VENDORS = [
  {
    id: 1,
    razonSocial: 'Constructora Andina S.A.S.',
    nit: '900.123.456-7',
    representanteLegal: 'Carlos Herrera Ospina',
    categoria: 'Contratista',
    especialidades: ['Obras Civiles', 'Excavaciones', 'Concreto'],
    contactoComercial: { nombre: 'Ana Martínez', email: 'ana@constructoraandina.co', tel: '310-555-0101' },
    contactoTecnico: { nombre: 'Luis Pérez', email: 'luis@constructoraandina.co', tel: '310-555-0102' },
    ciudades: ['Bogotá', 'Medellín'],
    estadoHomologacion: 'Homologado',
    score: 88,
    documentos: [
      { nombre: 'Cámara de Comercio', estado: 'ok', vencimiento: '2025-08-15' },
      { nombre: 'RUT', estado: 'ok', vencimiento: null },
      { nombre: 'Póliza Todo Riesgo', estado: 'por_vencer', vencimiento: '2025-02-10' },
      { nombre: 'Certificación ISO 9001', estado: 'ok', vencimiento: '2025-12-01' },
    ],
    evaluaciones: [
      { proyecto: 'Torre Empresarial Norte', fecha: '2024-06-15', scoreTotal: 85, evaluador: 'Juan Gómez' },
      { proyecto: 'Bodega Logística Sur', fecha: '2024-11-20', scoreTotal: 88, evaluador: 'María Torres' },
    ],
    pasoHomologacion: 5,
    projectId: 'p4',
  },
  {
    id: 2,
    razonSocial: 'Electrotécnica del Valle Ltda.',
    nit: '800.987.654-3',
    representanteLegal: 'Jorge Ramírez Luna',
    categoria: 'Contratista',
    especialidades: ['Electricidad', 'Automatización', 'BMS'],
    contactoComercial: { nombre: 'Sofía Ruiz', email: 'sofia@electrotecnica.co', tel: '315-555-0201' },
    contactoTecnico: { nombre: 'Pedro Álvarez', email: 'pedro@electrotecnica.co', tel: '315-555-0202' },
    ciudades: ['Cali', 'Bogotá'],
    estadoHomologacion: 'Homologado',
    score: 75,
    documentos: [
      { nombre: 'Cámara de Comercio', estado: 'ok', vencimiento: '2025-09-30' },
      { nombre: 'RUT', estado: 'ok', vencimiento: null },
      { nombre: 'Póliza RC Extracontractual', estado: 'ok', vencimiento: '2025-06-01' },
      { nombre: 'Licencia RETIE', estado: 'ok', vencimiento: '2025-05-15' },
    ],
    evaluaciones: [
      { proyecto: 'Torre Empresarial Norte', fecha: '2024-07-10', scoreTotal: 72, evaluador: 'Juan Gómez' },
      { proyecto: 'Centro Comercial Meridiano', fecha: '2024-12-05', scoreTotal: 75, evaluador: 'Laura Sánchez' },
    ],
    pasoHomologacion: 5,
    projectId: 'p4',
  },
  {
    id: 3,
    razonSocial: 'Hidráulica & Servicios S.A.',
    nit: '901.456.789-1',
    representanteLegal: 'Marcela Jiménez Caro',
    categoria: 'Contratista',
    especialidades: ['Plomería', 'HVAC', 'Redes Hidrosanitarias'],
    contactoComercial: { nombre: 'Ricardo Mora', email: 'rmora@hidraulica.co', tel: '301-555-0301' },
    contactoTecnico: { nombre: 'Camila Vargas', email: 'cvargas@hidraulica.co', tel: '301-555-0302' },
    ciudades: ['Medellín', 'Barranquilla'],
    estadoHomologacion: 'En evaluación',
    score: 0,
    documentos: [
      { nombre: 'Cámara de Comercio', estado: 'ok', vencimiento: '2025-07-20' },
      { nombre: 'RUT', estado: 'ok', vencimiento: null },
      { nombre: 'Póliza Todo Riesgo', estado: 'pendiente', vencimiento: null },
      { nombre: 'Certificación ICONTEC', estado: 'pendiente', vencimiento: null },
    ],
    evaluaciones: [],
    pasoHomologacion: 2,
    projectId: 'p4',
  },
  {
    id: 4,
    razonSocial: 'Tech Consultores BIM S.A.S.',
    nit: '900.654.321-9',
    representanteLegal: 'Andrés Castellanos',
    categoria: 'Consultoría',
    especialidades: ['BIM', 'Gerencia de Proyectos', 'Diseño Estructural'],
    contactoComercial: { nombre: 'Valentina Cruz', email: 'vcruz@techbim.co', tel: '318-555-0401' },
    contactoTecnico: { nombre: 'Felipe Díaz', email: 'fdiaz@techbim.co', tel: '318-555-0402' },
    ciudades: ['Bogotá'],
    estadoHomologacion: 'Homologado',
    score: 92,
    documentos: [
      { nombre: 'Cámara de Comercio', estado: 'ok', vencimiento: '2025-10-10' },
      { nombre: 'RUT', estado: 'ok', vencimiento: null },
      { nombre: 'Póliza Responsabilidad Civil', estado: 'ok', vencimiento: '2025-08-01' },
      { nombre: 'Certificación PMP', estado: 'ok', vencimiento: '2026-01-15' },
    ],
    evaluaciones: [
      { proyecto: 'Bodega Logística Sur', fecha: '2024-09-01', scoreTotal: 90, evaluador: 'María Torres' },
      { proyecto: 'Torre Empresarial Norte', fecha: '2024-03-15', scoreTotal: 92, evaluador: 'Juan Gómez' },
    ],
    pasoHomologacion: 5,
    projectId: 'p4',
  },
  {
    id: 5,
    razonSocial: 'Suministros Industriales del Norte S.A.',
    nit: '800.321.654-5',
    representanteLegal: 'Hernán Castro Ríos',
    categoria: 'Suministro',
    especialidades: ['Acero Estructural', 'Tubería Industrial', 'Equipos HVAC'],
    contactoComercial: { nombre: 'Natalia Pedraza', email: 'npedraza@suminorte.co', tel: '320-555-0501' },
    contactoTecnico: { nombre: 'Gustavo Leal', email: 'gleal@suminorte.co', tel: '320-555-0502' },
    ciudades: ['Bucaramanga', 'Bogotá', 'Medellín'],
    estadoHomologacion: 'Suspendido',
    score: 48,
    documentos: [
      { nombre: 'Cámara de Comercio', estado: 'vencido', vencimiento: '2024-06-30' },
      { nombre: 'RUT', estado: 'ok', vencimiento: null },
      { nombre: 'Póliza Todo Riesgo', estado: 'vencido', vencimiento: '2024-09-15' },
    ],
    evaluaciones: [
      { proyecto: 'Centro Comercial Meridiano', fecha: '2024-01-20', scoreTotal: 50, evaluador: 'Laura Sánchez' },
      { proyecto: 'Bodega Logística Sur', fecha: '2024-05-10', scoreTotal: 48, evaluador: 'María Torres' },
    ],
    pasoHomologacion: 5,
    projectId: 'p4',
  },
  {
    id: 6,
    razonSocial: 'Pinturas & Acabados Premium Ltda.',
    nit: '900.789.012-3',
    representanteLegal: 'Diana Morales Vega',
    categoria: 'Servicios',
    especialidades: ['Pintura Industrial', 'Impermeabilización', 'Acabados'],
    contactoComercial: { nombre: 'Sebastián Nieto', email: 'snieto@pintpremium.co', tel: '316-555-0601' },
    contactoTecnico: { nombre: 'Isabel Rojas', email: 'irojas@pintpremium.co', tel: '316-555-0602' },
    ciudades: ['Bogotá', 'Cali'],
    estadoHomologacion: 'En evaluación',
    score: 0,
    documentos: [
      { nombre: 'Cámara de Comercio', estado: 'ok', vencimiento: '2025-11-30' },
      { nombre: 'RUT', estado: 'ok', vencimiento: null },
      { nombre: 'Póliza Todo Riesgo', estado: 'ok', vencimiento: '2025-05-20' },
      { nombre: 'Certificación Ambiental', estado: 'pendiente', vencimiento: null },
    ],
    evaluaciones: [],
    pasoHomologacion: 3,
    projectId: 'p4',
  },
  {
    id: 7,
    razonSocial: 'Arquitectura e Ingeniería Integral S.A.S.',
    nit: '901.234.567-8',
    representanteLegal: 'Roberto Lozano Prada',
    categoria: 'Consultoría',
    especialidades: ['Diseño Arquitectónico', 'Ingeniería Civil', 'Licencias'],
    contactoComercial: { nombre: 'Carolina Suárez', email: 'csuarez@arqintegral.co', tel: '313-555-0701' },
    contactoTecnico: { nombre: 'David Ospina', email: 'dospina@arqintegral.co', tel: '313-555-0702' },
    ciudades: ['Bogotá', 'Manizales'],
    estadoHomologacion: 'Lista negra',
    score: 30,
    documentos: [
      { nombre: 'Cámara de Comercio', estado: 'ok', vencimiento: '2025-03-15' },
      { nombre: 'RUT', estado: 'ok', vencimiento: null },
    ],
    evaluaciones: [
      { proyecto: 'Torre Empresarial Norte', fecha: '2023-11-10', scoreTotal: 30, evaluador: 'Juan Gómez' },
    ],
    pasoHomologacion: 5,
    projectId: 'p4',
  },
];

const SCORE_DIMENSIONS = [
  { key: 'calidad', label: 'Calidad del trabajo (NCRs)', peso: 30 },
  { key: 'plazos', label: 'Cumplimiento de plazos', peso: 25 },
  { key: 'presupuesto', label: 'Cumplimiento de presupuesto', peso: 20 },
  { key: 'noConformidades', label: 'Respuesta ante no conformidades', peso: 15 },
  { key: 'documental', label: 'Cumplimiento documental', peso: 10 },
];

const MOCK_PROJECTS = [
  { id: 1, nombre: 'Torre Empresarial Norte' },
  { id: 2, nombre: 'Centro Comercial Meridiano' },
  { id: 3, nombre: 'Bodega Logística Sur' },
  { id: 4, nombre: 'Parque Industrial Omega' },
];

const ESPECIALIDADES_OPTIONS = [
  'Obras Civiles', 'Excavaciones', 'Concreto', 'Electricidad', 'Automatización', 'BMS',
  'Plomería', 'HVAC', 'Redes Hidrosanitarias', 'Acero Estructural', 'Tubería Industrial',
  'Pintura Industrial', 'Impermeabilización', 'BIM', 'Gerencia de Proyectos',
  'Diseño Estructural', 'Diseño Arquitectónico', 'Ingeniería Civil', 'Acabados', 'Licencias',
  'Equipos HVAC',
];

const CATEGORIAS = ['Contratista', 'Consultoría', 'Suministro', 'Servicios'];
const ESTADOS_HOMOLOGACION = ['Homologado', 'En evaluación', 'Suspendido', 'Lista negra', 'No registrado'];

// ── Helpers ────────────────────────────────────────────────────────────────────
function estadoBadgeClasses(estado) {
  switch (estado) {
    case 'Homologado':   return 'bg-green-900/50 text-green-400 border border-green-700';
    case 'En evaluación': return 'bg-blue-900/50 text-blue-400 border border-blue-700';
    case 'Suspendido':   return 'bg-amber-900/50 text-amber-400 border border-amber-700';
    case 'Lista negra':  return 'bg-red-900/50 text-red-400 border border-red-700';
    default:             return 'bg-surface-700 text-slate-400 border border-surface-600';
  }
}

function scoreColor(score) {
  if (score === 0) return 'text-slate-500';
  if (score >= 80) return 'text-green-400';
  if (score >= 60) return 'text-amber-400';
  return 'text-red-400';
}

function scoreBadge(score) {
  if (score >= 90) return { label: 'Proveedor Preferido', cls: 'bg-green-900/50 text-green-400 border border-green-700' };
  if (score >= 70) return { label: 'Estándar', cls: 'bg-blue-900/50 text-blue-400 border border-blue-700' };
  if (score >= 60) return { label: 'En Observación', cls: 'bg-amber-900/50 text-amber-400 border border-amber-700' };
  return { label: 'Suspensión Automática', cls: 'bg-red-900/50 text-red-400 border border-red-700' };
}

function docEstadoIcon(estado) {
  if (estado === 'ok') return <span className="text-green-400 font-bold text-sm">✓</span>;
  if (estado === 'por_vencer') return <span className="text-amber-400 font-bold text-sm">⚠</span>;
  return <span className="text-red-400 font-bold text-sm">✗</span>;
}

function shortName(razonSocial) {
  const words = razonSocial.split(' ');
  return words.slice(0, 2).join(' ');
}

function calcScore(evaluaciones) {
  if (!evaluaciones || evaluaciones.length === 0) return 0;
  const sum = evaluaciones.reduce((acc, e) => acc + e.scoreTotal, 0);
  return Math.round(sum / evaluaciones.length);
}

// ── Icons ──────────────────────────────────────────────────────────────────────
function IconEdit() {
  return (
    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
    </svg>
  );
}
function IconClose() {
  return (
    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
    </svg>
  );
}
function IconPlus() {
  return (
    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
    </svg>
  );
}
function IconBuilding() {
  return (
    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
    </svg>
  );
}
function IconChartBar() {
  return (
    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
    </svg>
  );
}
function IconClipboard() {
  return (
    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
    </svg>
  );
}
function IconShield() {
  return (
    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
    </svg>
  );
}

// ── Vendor Modal ──────────────────────────────────────────────────────────────
function VendorModal({ vendor, onClose, onSave }) {
  const isEdit = Boolean(vendor?.id);
  const emptyForm = {
    razonSocial: '', nit: '', representanteLegal: '', categoria: 'Contratista',
    especialidades: [],
    contactoComercial: { nombre: '', email: '', tel: '' },
    ciudades: '',
    estadoHomologacion: 'En evaluación',
  };

  const [form, setForm] = useState(() => {
    if (!isEdit) return emptyForm;
    return {
      razonSocial: vendor.razonSocial,
      nit: vendor.nit,
      representanteLegal: vendor.representanteLegal,
      categoria: vendor.categoria,
      especialidades: [...vendor.especialidades],
      contactoComercial: { ...vendor.contactoComercial },
      ciudades: vendor.ciudades.join(', '),
      estadoHomologacion: vendor.estadoHomologacion,
    };
  });

  function toggleEsp(esp) {
    setForm(f => ({
      ...f,
      especialidades: f.especialidades.includes(esp)
        ? f.especialidades.filter(e => e !== esp)
        : [...f.especialidades, esp],
    }));
  }

  function handleSave() {
    if (!form.razonSocial.trim() || !form.nit.trim()) return;
    const ciudadesArr = form.ciudades.split(',').map(c => c.trim()).filter(Boolean);
    onSave({
      ...(isEdit ? vendor : { id: Date.now(), evaluaciones: [], documentos: [], pasoHomologacion: 1, score: 0, contactoTecnico: { nombre: '', email: '', tel: '' } }),
      razonSocial: form.razonSocial,
      nit: form.nit,
      representanteLegal: form.representanteLegal,
      categoria: form.categoria,
      especialidades: form.especialidades,
      contactoComercial: form.contactoComercial,
      ciudades: ciudadesArr,
      estadoHomologacion: form.estadoHomologacion,
    });
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4" onClick={onClose}>
      <div
        className="w-full max-w-2xl bg-surface-800 rounded-2xl shadow-2xl border border-surface-700 flex flex-col max-h-[90vh]"
        onClick={e => e.stopPropagation()}
      >
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-surface-700">
          <h2 className="text-base font-bold text-slate-100">
            {isEdit ? 'Editar Proveedor' : 'Nuevo Proveedor'}
          </h2>
          <button onClick={onClose} className="p-2 rounded-lg text-slate-400 hover:text-slate-200 hover:bg-surface-700 transition cursor-pointer">
            <IconClose />
          </button>
        </div>

        {/* Body */}
        <div className="flex-1 overflow-y-auto px-6 py-5 space-y-5">
          {/* Basic info */}
          <div className="grid grid-cols-2 gap-4">
            <div className="col-span-2">
              <label className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 block">Razón Social *</label>
              <input
                className="w-full bg-surface-700 border border-surface-600 rounded-lg px-3 py-2 text-slate-100 text-sm focus:outline-none focus:border-blue-500"
                value={form.razonSocial}
                onChange={e => setForm(f => ({ ...f, razonSocial: e.target.value }))}
                placeholder="Ej: Constructora ABC S.A.S."
              />
            </div>
            <div>
              <label className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 block">NIT / RUT *</label>
              <input
                className="w-full bg-surface-700 border border-surface-600 rounded-lg px-3 py-2 text-slate-100 text-sm focus:outline-none focus:border-blue-500"
                value={form.nit}
                onChange={e => setForm(f => ({ ...f, nit: e.target.value }))}
                placeholder="900.000.000-0"
              />
            </div>
            <div>
              <label className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 block">Representante Legal</label>
              <input
                className="w-full bg-surface-700 border border-surface-600 rounded-lg px-3 py-2 text-slate-100 text-sm focus:outline-none focus:border-blue-500"
                value={form.representanteLegal}
                onChange={e => setForm(f => ({ ...f, representanteLegal: e.target.value }))}
                placeholder="Nombre completo"
              />
            </div>
            <div>
              <label className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 block">Categoría</label>
              <select
                className="w-full bg-surface-700 border border-surface-600 rounded-lg px-3 py-2 text-slate-100 text-sm focus:outline-none focus:border-blue-500"
                value={form.categoria}
                onChange={e => setForm(f => ({ ...f, categoria: e.target.value }))}
              >
                {CATEGORIAS.map(c => <option key={c} value={c}>{c}</option>)}
              </select>
            </div>
            <div>
              <label className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 block">Estado Homologación</label>
              <select
                className="w-full bg-surface-700 border border-surface-600 rounded-lg px-3 py-2 text-slate-100 text-sm focus:outline-none focus:border-blue-500"
                value={form.estadoHomologacion}
                onChange={e => setForm(f => ({ ...f, estadoHomologacion: e.target.value }))}
              >
                {ESTADOS_HOMOLOGACION.map(e => <option key={e} value={e}>{e}</option>)}
              </select>
            </div>
          </div>

          {/* Especialidades */}
          <div>
            <label className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 block">Especialidades</label>
            <div className="flex flex-wrap gap-2">
              {ESPECIALIDADES_OPTIONS.map(esp => {
                const selected = form.especialidades.includes(esp);
                return (
                  <button
                    key={esp}
                    onClick={() => toggleEsp(esp)}
                    className={`text-xs px-2.5 py-1 rounded-full border transition cursor-pointer ${
                      selected
                        ? 'bg-blue-600 border-blue-500 text-white'
                        : 'bg-surface-700 border-surface-600 text-slate-400 hover:border-blue-500 hover:text-slate-200'
                    }`}
                  >
                    {esp}
                  </button>
                );
              })}
            </div>
          </div>

          {/* Contacto Comercial */}
          <div>
            <label className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 block">Contacto Comercial</label>
            <div className="grid grid-cols-3 gap-3">
              <input
                className="bg-surface-700 border border-surface-600 rounded-lg px-3 py-2 text-slate-100 text-sm focus:outline-none focus:border-blue-500"
                placeholder="Nombre"
                value={form.contactoComercial.nombre}
                onChange={e => setForm(f => ({ ...f, contactoComercial: { ...f.contactoComercial, nombre: e.target.value } }))}
              />
              <input
                className="bg-surface-700 border border-surface-600 rounded-lg px-3 py-2 text-slate-100 text-sm focus:outline-none focus:border-blue-500"
                placeholder="Email"
                value={form.contactoComercial.email}
                onChange={e => setForm(f => ({ ...f, contactoComercial: { ...f.contactoComercial, email: e.target.value } }))}
              />
              <input
                className="bg-surface-700 border border-surface-600 rounded-lg px-3 py-2 text-slate-100 text-sm focus:outline-none focus:border-blue-500"
                placeholder="Teléfono"
                value={form.contactoComercial.tel}
                onChange={e => setForm(f => ({ ...f, contactoComercial: { ...f.contactoComercial, tel: e.target.value } }))}
              />
            </div>
          </div>

          {/* Ciudades */}
          <div>
            <label className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 block">Ciudades (separadas por coma)</label>
            <input
              className="w-full bg-surface-700 border border-surface-600 rounded-lg px-3 py-2 text-slate-100 text-sm focus:outline-none focus:border-blue-500"
              placeholder="Bogotá, Medellín, Cali"
              value={form.ciudades}
              onChange={e => setForm(f => ({ ...f, ciudades: e.target.value }))}
            />
          </div>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-surface-700">
          <button onClick={onClose} className="px-4 py-2 text-sm rounded-lg text-slate-400 hover:text-slate-200 hover:bg-surface-700 transition cursor-pointer">
            Cancelar
          </button>
          <button
            onClick={handleSave}
            className="px-4 py-2 text-sm rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition cursor-pointer"
          >
            {isEdit ? 'Guardar cambios' : 'Crear proveedor'}
          </button>
        </div>
      </div>
    </div>
  );
}

// ── Evaluation Modal ───────────────────────────────────────────────────────────
function EvaluacionModal({ vendors, onClose, onSave }) {
  const homologados = vendors.filter(v => v.estadoHomologacion === 'Homologado');
  const [selectedVendorId, setSelectedVendorId] = useState(homologados[0]?.id ?? '');
  const [selectedProyecto, setSelectedProyecto] = useState(MOCK_PROJECTS[0].nombre);
  const [evaluador, setEvaluador] = useState('');
  const [comentarios, setComentarios] = useState('');
  const [scores, setScores] = useState(() =>
    Object.fromEntries(SCORE_DIMENSIONS.map(d => [d.key, 5]))
  );

  const totalScore = useMemo(() => {
    return Math.round(
      SCORE_DIMENSIONS.reduce((acc, d) => acc + (scores[d.key] * d.peso / 10), 0)
    );
  }, [scores]);

  function handleSave() {
    if (!selectedVendorId || !evaluador.trim()) return;
    onSave({
      vendorId: Number(selectedVendorId),
      evaluacion: {
        proyecto: selectedProyecto,
        fecha: new Date().toISOString().split('T')[0],
        scoreTotal: totalScore,
        evaluador: evaluador.trim(),
        comentarios,
        desglose: { ...scores },
      },
    });
  }

  const totalColor = totalScore >= 80 ? 'text-green-400' : totalScore >= 60 ? 'text-amber-400' : 'text-red-400';

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4" onClick={onClose}>
      <div
        className="w-full max-w-xl bg-surface-800 rounded-2xl shadow-2xl border border-surface-700 flex flex-col max-h-[90vh]"
        onClick={e => e.stopPropagation()}
      >
        <div className="flex items-center justify-between px-6 py-4 border-b border-surface-700">
          <h2 className="text-base font-bold text-slate-100">Nueva Evaluación</h2>
          <button onClick={onClose} className="p-2 rounded-lg text-slate-400 hover:text-slate-200 hover:bg-surface-700 transition cursor-pointer">
            <IconClose />
          </button>
        </div>

        <div className="flex-1 overflow-y-auto px-6 py-5 space-y-5">
          {/* Proveedor + Proyecto */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 block">Proveedor</label>
              <select
                className="w-full bg-surface-700 border border-surface-600 rounded-lg px-3 py-2 text-slate-100 text-sm focus:outline-none focus:border-blue-500"
                value={selectedVendorId}
                onChange={e => setSelectedVendorId(e.target.value)}
              >
                {homologados.map(v => (
                  <option key={v.id} value={v.id}>{v.razonSocial}</option>
                ))}
              </select>
            </div>
            <div>
              <label className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 block">Proyecto</label>
              <select
                className="w-full bg-surface-700 border border-surface-600 rounded-lg px-3 py-2 text-slate-100 text-sm focus:outline-none focus:border-blue-500"
                value={selectedProyecto}
                onChange={e => setSelectedProyecto(e.target.value)}
              >
                {MOCK_PROJECTS.map(p => <option key={p.id} value={p.nombre}>{p.nombre}</option>)}
              </select>
            </div>
          </div>

          {/* Evaluador */}
          <div>
            <label className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 block">Evaluador *</label>
            <input
              className="w-full bg-surface-700 border border-surface-600 rounded-lg px-3 py-2 text-slate-100 text-sm focus:outline-none focus:border-blue-500"
              placeholder="Nombre del evaluador"
              value={evaluador}
              onChange={e => setEvaluador(e.target.value)}
            />
          </div>

          {/* Score sliders */}
          <div>
            <label className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3 block">Calificación por dimensión (1–10)</label>
            <div className="space-y-4">
              {SCORE_DIMENSIONS.map(dim => (
                <div key={dim.key}>
                  <div className="flex items-center justify-between mb-1">
                    <span className="text-sm text-slate-300">{dim.label}</span>
                    <div className="flex items-center gap-2">
                      <span className="text-xs text-slate-500">peso {dim.peso}%</span>
                      <span className="text-sm font-bold text-slate-100 w-5 text-right">{scores[dim.key]}</span>
                    </div>
                  </div>
                  <input
                    type="range" min={1} max={10} step={1}
                    value={scores[dim.key]}
                    onChange={e => setScores(s => ({ ...s, [dim.key]: Number(e.target.value) }))}
                    className="w-full accent-blue-500 h-1.5 cursor-pointer"
                  />
                </div>
              ))}
            </div>
          </div>

          {/* Live score */}
          <div className="bg-surface-700 rounded-xl p-4 border border-surface-600 text-center">
            <p className="text-xs text-slate-500 mb-1">Score total calculado</p>
            <p className={`text-4xl font-black ${totalColor}`}>{totalScore}</p>
            <p className="text-xs text-slate-500 mt-1">/ 100</p>
          </div>

          {/* Comentarios */}
          <div>
            <label className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 block">Comentarios</label>
            <textarea
              className="w-full bg-surface-700 border border-surface-600 rounded-lg px-3 py-2 text-slate-100 text-sm focus:outline-none focus:border-blue-500 resize-none"
              rows={3}
              placeholder="Observaciones adicionales..."
              value={comentarios}
              onChange={e => setComentarios(e.target.value)}
            />
          </div>
        </div>

        <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-surface-700">
          <button onClick={onClose} className="px-4 py-2 text-sm rounded-lg text-slate-400 hover:text-slate-200 hover:bg-surface-700 transition cursor-pointer">
            Cancelar
          </button>
          <button
            onClick={handleSave}
            disabled={!selectedVendorId || !evaluador.trim()}
            className="px-4 py-2 text-sm rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
          >
            Guardar evaluación
          </button>
        </div>
      </div>
    </div>
  );
}

// ── Tab: Proveedores ───────────────────────────────────────────────────────────
function TabProveedores({ vendors, onEdit, onAdd }) {
  const [filterCat, setFilterCat] = useState('');
  const [filterEstado, setFilterEstado] = useState('');

  const filtered = useMemo(() => vendors.filter(v => {
    if (filterCat && v.categoria !== filterCat) return false;
    if (filterEstado && v.estadoHomologacion !== filterEstado) return false;
    return true;
  }), [vendors, filterCat, filterEstado]);

  // KPIs
  const total = vendors.length;
  const homologados = vendors.filter(v => v.estadoHomologacion === 'Homologado').length;
  const enEval = vendors.filter(v => v.estadoHomologacion === 'En evaluación').length;
  const suspListaNegra = vendors.filter(v => v.estadoHomologacion === 'Suspendido' || v.estadoHomologacion === 'Lista negra').length;

  const kpis = [
    { label: 'Total Proveedores', value: total, color: 'text-slate-100', bg: 'bg-surface-700' },
    { label: 'Homologados Activos', value: homologados, color: 'text-green-400', bg: 'bg-green-900/20' },
    { label: 'En Evaluación', value: enEval, color: 'text-blue-400', bg: 'bg-blue-900/20' },
    { label: 'Suspendidos / Lista Negra', value: suspListaNegra, color: 'text-red-400', bg: 'bg-red-900/20' },
  ];

  return (
    <div className="space-y-6">
      {/* KPI cards */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        {kpis.map(k => (
          <div key={k.label} className={`${k.bg} rounded-xl border border-surface-700 p-4`}>
            <p className="text-xs text-slate-500 mb-1">{k.label}</p>
            <p className={`text-3xl font-black ${k.color}`}>{k.value}</p>
          </div>
        ))}
      </div>

      {/* Filters + Add */}
      <div className="flex flex-wrap items-center gap-3">
        <select
          className="bg-surface-700 border border-surface-600 rounded-lg px-3 py-2 text-slate-100 text-sm focus:outline-none focus:border-blue-500"
          value={filterCat}
          onChange={e => setFilterCat(e.target.value)}
        >
          <option value="">Todas las categorías</option>
          {CATEGORIAS.map(c => <option key={c} value={c}>{c}</option>)}
        </select>
        <select
          className="bg-surface-700 border border-surface-600 rounded-lg px-3 py-2 text-slate-100 text-sm focus:outline-none focus:border-blue-500"
          value={filterEstado}
          onChange={e => setFilterEstado(e.target.value)}
        >
          <option value="">Todos los estados</option>
          {ESTADOS_HOMOLOGACION.map(e => <option key={e} value={e}>{e}</option>)}
        </select>
        <button
          onClick={onAdd}
          className="ml-auto flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-lg transition cursor-pointer"
        >
          <IconPlus />
          Nuevo Proveedor
        </button>
      </div>

      {/* Table */}
      <div className="rounded-xl border border-surface-700 overflow-hidden">
        <table className="w-full text-sm">
          <thead>
            <tr className="bg-surface-900 border-b border-surface-700">
              <th className="text-left px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Proveedor</th>
              <th className="text-left px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Categoría</th>
              <th className="text-left px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Especialidades</th>
              <th className="text-left px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Contacto</th>
              <th className="text-left px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Estado</th>
              <th className="text-left px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Score</th>
              <th className="px-4 py-3"></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(v => {
              const espShown = v.especialidades.slice(0, 2);
              const espExtra = v.especialidades.length - 2;
              return (
                <tr key={v.id} className="hover:bg-surface-700 border-b border-surface-700 transition">
                  <td className="px-4 py-3">
                    <p className="text-slate-100 font-semibold text-sm leading-tight">{v.razonSocial}</p>
                    <p className="text-xs text-slate-500 mt-0.5">{v.nit}</p>
                  </td>
                  <td className="px-4 py-3">
                    <span className="text-xs px-2 py-0.5 rounded-full bg-surface-700 text-slate-300 border border-surface-600 whitespace-nowrap">
                      {v.categoria}
                    </span>
                  </td>
                  <td className="px-4 py-3">
                    <div className="flex flex-wrap gap-1">
                      {espShown.map(e => (
                        <span key={e} className="text-xs px-2 py-0.5 rounded-full bg-blue-900/30 text-blue-300 border border-blue-800/50">{e}</span>
                      ))}
                      {espExtra > 0 && (
                        <span className="text-xs px-2 py-0.5 rounded-full bg-surface-700 text-slate-400 border border-surface-600">+{espExtra}</span>
                      )}
                    </div>
                  </td>
                  <td className="px-4 py-3">
                    <p className="text-slate-300 text-xs font-medium">{v.contactoComercial.nombre}</p>
                    <p className="text-slate-500 text-xs">{v.contactoComercial.tel}</p>
                  </td>
                  <td className="px-4 py-3">
                    <span className={`text-xs px-2.5 py-0.5 rounded-full font-medium whitespace-nowrap ${estadoBadgeClasses(v.estadoHomologacion)}`}>
                      {v.estadoHomologacion}
                    </span>
                  </td>
                  <td className="px-4 py-3">
                    <span className={`text-sm font-bold ${scoreColor(v.score)}`}>
                      {v.score > 0 ? v.score : '—'}
                    </span>
                  </td>
                  <td className="px-4 py-3">
                    <button
                      onClick={() => onEdit(v)}
                      className="p-1.5 rounded-lg text-slate-500 hover:text-blue-400 hover:bg-blue-900/20 transition cursor-pointer"
                      title="Editar proveedor"
                    >
                      <IconEdit />
                    </button>
                  </td>
                </tr>
              );
            })}
            {filtered.length === 0 && (
              <tr>
                <td colSpan={7} className="px-4 py-10 text-center text-slate-500 text-sm">
                  No se encontraron proveedores con los filtros seleccionados.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ── Tab: Homologación ──────────────────────────────────────────────────────────
function TabHomologacion({ vendors, onUpdateVendor }) {
  const enEval = vendors.filter(v => v.estadoHomologacion === 'En evaluación');

  const STEPS = [
    { label: 'Registro', key: 1 },
    { label: 'Documentos', key: 2 },
    { label: 'Evaluación técnica', key: 3 },
    { label: 'Visita técnica', key: 4, opcional: true },
    { label: 'Aprobación final', key: 5 },
  ];

  function aprobar(v) {
    onUpdateVendor({ ...v, estadoHomologacion: 'Homologado', pasoHomologacion: 5 });
  }
  function rechazar(v) {
    onUpdateVendor({ ...v, estadoHomologacion: 'Suspendido' });
  }

  if (enEval.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-20 text-slate-500">
        <IconShield />
        <p className="mt-3 text-sm">No hay proveedores en proceso de homologación.</p>
      </div>
    );
  }

  return (
    <div className="space-y-5">
      {enEval.map(v => (
        <div key={v.id} className="bg-surface-800 rounded-xl border border-surface-700 p-5">
          {/* Vendor header */}
          <div className="flex items-start justify-between mb-5">
            <div>
              <h3 className="text-sm font-bold text-slate-100">{v.razonSocial}</h3>
              <p className="text-xs text-slate-500 mt-0.5">{v.categoria} · {v.nit}</p>
            </div>
            <span className={`text-xs px-2.5 py-0.5 rounded-full font-medium ${estadoBadgeClasses(v.estadoHomologacion)}`}>
              {v.estadoHomologacion}
            </span>
          </div>

          {/* Stepper */}
          <div className="mb-5">
            <div className="flex items-start gap-0">
              {STEPS.map((step, idx) => {
                const done = v.pasoHomologacion >= step.key;
                const active = v.pasoHomologacion === step.key;
                const isLast = idx === STEPS.length - 1;
                return (
                  <div key={step.key} className="flex-1 flex flex-col items-center relative">
                    {/* Connector line */}
                    {!isLast && (
                      <div className={`absolute top-3 left-1/2 w-full h-0.5 ${done ? 'bg-blue-500' : 'bg-surface-600'}`} style={{ left: '50%' }} />
                    )}
                    {/* Circle */}
                    <div className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold border-2 relative z-10 flex-shrink-0 ${
                      done ? 'bg-blue-600 border-blue-500 text-white' : active ? 'bg-surface-700 border-blue-500 text-blue-400' : 'bg-surface-700 border-surface-600 text-slate-500'
                    }`}>
                      {done ? '✓' : step.key}
                    </div>
                    {/* Label */}
                    <p className={`text-xs mt-1.5 text-center leading-tight px-1 ${done ? 'text-blue-400' : 'text-slate-500'}`}>
                      {step.label}
                      {step.opcional && <span className="block text-slate-600">(opcional)</span>}
                    </p>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Documents */}
          <div className="bg-surface-900 rounded-lg p-4 mb-4 border border-surface-700">
            <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">Documentos</p>
            <div className="space-y-2">
              {v.documentos.map((doc, i) => (
                <div key={i} className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    {docEstadoIcon(doc.estado)}
                    <span className="text-sm text-slate-300">{doc.nombre}</span>
                    {doc.estado === 'por_vencer' && (
                      <span className="text-xs px-1.5 py-0.5 rounded bg-amber-900/40 text-amber-400 border border-amber-800/50">Por vencer</span>
                    )}
                    {doc.estado === 'pendiente' && (
                      <span className="text-xs px-1.5 py-0.5 rounded bg-red-900/40 text-red-400 border border-red-800/50">Pendiente</span>
                    )}
                    {doc.estado === 'vencido' && (
                      <span className="text-xs px-1.5 py-0.5 rounded bg-red-900/40 text-red-400 border border-red-800/50">Vencido</span>
                    )}
                  </div>
                  {doc.vencimiento && (
                    <span className="text-xs text-slate-600">Vence: {doc.vencimiento}</span>
                  )}
                </div>
              ))}
            </div>
          </div>

          {/* Actions */}
          <div className="flex items-center gap-2">
            <button
              onClick={() => aprobar(v)}
              className="px-3 py-1.5 text-xs font-semibold rounded-lg bg-green-700 hover:bg-green-600 text-white transition cursor-pointer"
            >
              Aprobar
            </button>
            <button
              onClick={() => rechazar(v)}
              className="px-3 py-1.5 text-xs font-semibold rounded-lg bg-red-700 hover:bg-red-600 text-white transition cursor-pointer"
            >
              Rechazar
            </button>
            <button
              className="px-3 py-1.5 text-xs font-semibold rounded-lg bg-blue-700 hover:bg-blue-600 text-white transition cursor-pointer"
            >
              Solicitar documentos
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}

// ── Tab: Score ─────────────────────────────────────────────────────────────────
function TabScore({ vendors }) {
  const withScore = vendors.filter(v => v.score > 0).sort((a, b) => b.score - a.score);

  const chartData = withScore.map(v => ({
    name: shortName(v.razonSocial),
    score: v.score,
    fill: v.score >= 80 ? '#4ade80' : v.score >= 60 ? '#fbbf24' : '#f87171',
  }));

  const CustomBar = (props) => {
    const { fill, x, y, width, height } = props;
    return <rect x={x} y={y} width={width} height={height} fill={fill} rx={4} />;
  };

  return (
    <div className="space-y-6">
      {/* Bar chart */}
      <div className="bg-surface-800 rounded-xl border border-surface-700 p-5">
        <h3 className="text-sm font-bold text-slate-300 mb-4">Score por proveedor</h3>
        <ResponsiveContainer width="100%" height={220}>
          <BarChart data={chartData} margin={{ top: 5, right: 10, left: -20, bottom: 40 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#334155" vertical={false} />
            <XAxis
              dataKey="name"
              tick={{ fill: '#94a3b8', fontSize: 11 }}
              angle={-25}
              textAnchor="end"
              interval={0}
            />
            <YAxis domain={[0, 100]} tick={{ fill: '#64748b', fontSize: 11 }} />
            <Tooltip
              contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: 8, color: '#e2e8f0', fontSize: 12 }}
              cursor={{ fill: 'rgba(255,255,255,0.04)' }}
            />
            <Bar dataKey="score" shape={<CustomBar />} />
          </BarChart>
        </ResponsiveContainer>
      </div>

      {/* Vendor score cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
        {withScore.map(v => {
          const badge = scoreBadge(v.score);
          const evals = v.evaluaciones;
          const lastTwo = evals.slice(-2);
          const trend = lastTwo.length >= 2
            ? (lastTwo[1].scoreTotal >= lastTwo[0].scoreTotal ? 'up' : 'down')
            : null;

          return (
            <div key={v.id} className="bg-surface-800 rounded-xl border border-surface-700 p-5 space-y-4">
              {/* Header */}
              <div className="flex items-start justify-between gap-2">
                <div>
                  <p className="text-sm font-bold text-slate-100 leading-tight">{v.razonSocial}</p>
                  <p className="text-xs text-slate-500 mt-0.5">{v.categoria}</p>
                </div>
                <span className={`text-xs px-2 py-0.5 rounded-full font-medium whitespace-nowrap ${badge.cls}`}>
                  {badge.label}
                </span>
              </div>

              {/* Score ring (big number) */}
              <div className="flex items-center gap-4">
                <div className={`w-16 h-16 rounded-full border-4 flex items-center justify-center flex-shrink-0 ${
                  v.score >= 80 ? 'border-green-500' : v.score >= 60 ? 'border-amber-500' : 'border-red-500'
                }`}>
                  <span className={`text-xl font-black ${scoreColor(v.score)}`}>{v.score}</span>
                </div>
                <div className="flex-1 space-y-1">
                  {trend && (
                    <div className="flex items-center gap-1">
                      <span className={`text-xs font-semibold ${trend === 'up' ? 'text-green-400' : 'text-red-400'}`}>
                        {trend === 'up' ? '▲' : '▼'} {lastTwo[1].scoreTotal} vs {lastTwo[0].scoreTotal}
                      </span>
                    </div>
                  )}
                  <p className="text-xs text-slate-500">{evals.length} evaluaciones</p>
                </div>
              </div>

              {/* Dimension bars */}
              <div className="space-y-2">
                {SCORE_DIMENSIONS.map(dim => {
                  const pct = Math.min(100, (v.score / 100) * 100);
                  return (
                    <div key={dim.key}>
                      <div className="flex items-center justify-between mb-0.5">
                        <span className="text-xs text-slate-400">{dim.label}</span>
                        <span className="text-xs text-slate-500">{dim.peso}%</span>
                      </div>
                      <div className="h-1.5 bg-surface-700 rounded-full overflow-hidden">
                        <div
                          className={`h-full rounded-full ${v.score >= 80 ? 'bg-green-500' : v.score >= 60 ? 'bg-amber-500' : 'bg-red-500'}`}
                          style={{ width: `${pct}%` }}
                        />
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ── Tab: Evaluaciones ──────────────────────────────────────────────────────────
function TabEvaluaciones({ vendors, onNewEval }) {
  // Flatten all evaluaciones
  const allEvals = useMemo(() => {
    const rows = [];
    vendors.forEach(v => {
      (v.evaluaciones || []).forEach(e => {
        rows.push({ ...e, vendorName: v.razonSocial, vendorId: v.id });
      });
    });
    return rows.sort((a, b) => b.fecha.localeCompare(a.fecha));
  }, [vendors]);

  return (
    <div className="space-y-5">
      {/* Action bar */}
      <div className="flex justify-end">
        <button
          onClick={onNewEval}
          className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-lg transition cursor-pointer"
        >
          <IconPlus />
          Nueva Evaluación
        </button>
      </div>

      {/* Table */}
      <div className="rounded-xl border border-surface-700 overflow-hidden">
        <table className="w-full text-sm">
          <thead>
            <tr className="bg-surface-900 border-b border-surface-700">
              <th className="text-left px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Proveedor</th>
              <th className="text-left px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Proyecto</th>
              <th className="text-left px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Fecha</th>
              <th className="text-left px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Score</th>
              <th className="text-left px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Evaluador</th>
            </tr>
          </thead>
          <tbody>
            {allEvals.map((row, i) => (
              <tr key={i} className="hover:bg-surface-700 border-b border-surface-700 transition">
                <td className="px-4 py-3 text-slate-200 font-medium">{row.vendorName}</td>
                <td className="px-4 py-3 text-slate-400">{row.proyecto}</td>
                <td className="px-4 py-3 text-slate-500 text-xs">{row.fecha}</td>
                <td className="px-4 py-3">
                  <span className={`text-sm font-bold ${scoreColor(row.scoreTotal)}`}>{row.scoreTotal}</span>
                </td>
                <td className="px-4 py-3 text-slate-400 text-xs">{row.evaluador}</td>
              </tr>
            ))}
            {allEvals.length === 0 && (
              <tr>
                <td colSpan={5} className="px-4 py-10 text-center text-slate-500 text-sm">
                  No hay evaluaciones registradas.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ── Main Component ─────────────────────────────────────────────────────────────
export default function VendorsPage() {
  const { selectedProjectId } = useProject();
  const [vendors, setVendors] = useState(INITIAL_VENDORS);
  const [activeTab, setActiveTab] = useState('proveedores');
  const [vendorModal, setVendorModal] = useState(null); // null | { mode: 'new'|'edit', vendor }
  const [evalModal, setEvalModal] = useState(false);

  const projectVendors = useMemo(() =>
    vendors.filter(v => !selectedProjectId || v.projectId === selectedProjectId),
    [vendors, selectedProjectId]
  );

  // ── Vendor CRUD ──
  function handleSaveVendor(data) {
    setVendors(vs => {
      const idx = vs.findIndex(v => v.id === data.id);
      if (idx >= 0) {
        const updated = [...vs];
        updated[idx] = data;
        return updated;
      }
      return [...vs, data];
    });
    setVendorModal(null);
  }

  function handleUpdateVendor(data) {
    setVendors(vs => vs.map(v => v.id === data.id ? data : v));
  }

  // ── New Evaluation ──
  function handleSaveEval({ vendorId, evaluacion }) {
    setVendors(vs => vs.map(v => {
      if (v.id !== vendorId) return v;
      const newEvals = [...v.evaluaciones, evaluacion];
      const newScore = calcScore(newEvals);
      return { ...v, evaluaciones: newEvals, score: newScore };
    }));
    setEvalModal(false);
  }

  const TABS = [
    { key: 'proveedores', label: 'Proveedores', icon: <IconBuilding /> },
    { key: 'homologacion', label: 'Homologación', icon: <IconShield /> },
    { key: 'score', label: 'Score', icon: <IconChartBar /> },
    { key: 'evaluaciones', label: 'Evaluaciones', icon: <IconClipboard /> },
  ];

  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-xl font-black text-slate-100">Gestión de Proveedores</h1>
        <p className="text-sm text-slate-500 mt-0.5">Homologación, scoring y evaluación de contratistas y suministros</p>
      </div>

      {/* Tabs */}
      <div className="flex items-center gap-1 border-b border-surface-700 pb-0">
        {TABS.map(tab => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            className={`flex items-center gap-2 px-4 py-2.5 text-sm font-semibold rounded-t-lg transition cursor-pointer border-b-2 -mb-px ${
              activeTab === tab.key
                ? 'text-blue-400 border-blue-500 bg-blue-900/10'
                : 'text-slate-500 border-transparent hover:text-slate-300 hover:border-surface-600'
            }`}
          >
            {tab.icon}
            {tab.label}
          </button>
        ))}
      </div>

      {/* Tab content */}
      <div>
        {activeTab === 'proveedores' && (
          <TabProveedores
            vendors={projectVendors}
            onEdit={v => setVendorModal({ mode: 'edit', vendor: v })}
            onAdd={() => setVendorModal({ mode: 'new', vendor: null })}
          />
        )}
        {activeTab === 'homologacion' && (
          <TabHomologacion vendors={projectVendors} onUpdateVendor={handleUpdateVendor} />
        )}
        {activeTab === 'score' && (
          <TabScore vendors={projectVendors} />
        )}
        {activeTab === 'evaluaciones' && (
          <TabEvaluaciones vendors={projectVendors} onNewEval={() => setEvalModal(true)} />
        )}
      </div>

      {/* Vendor modal */}
      {vendorModal && (
        <VendorModal
          vendor={vendorModal.mode === 'edit' ? vendorModal.vendor : null}
          onClose={() => setVendorModal(null)}
          onSave={handleSaveVendor}
        />
      )}

      {/* Evaluation modal */}
      {evalModal && (
        <EvaluacionModal
          vendors={vendors}
          onClose={() => setEvalModal(false)}
          onSave={handleSaveEval}
        />
      )}
    </div>
  );
}
