import React, { useState } from 'react';
import { MOCK_PROJECTS, MOCK_TEAM } from '../../services/mockData';
import { useProject } from '../../context/ProjectContext';

// ── Mock data ──────────────────────────────────────────────────────────────
const WORK_ORDERS = {
  p1: [
    { id:'OT-001', titulo:'Excavación de cimientos - Bloque A', tipo:'CONSTRUCCIÓN', estado:'COMPLETADA', prioridad:'ALTA',   recurso:'Carlos Ruiz',    tipoRecurso:'CONTRATISTA', costo:42000, fechaInicio:'2026-02-10', fechaFin:'2026-02-28', avance:100, proyectoRef:'PRY-2026-004', tareaRef:'1.2.1 - Movimiento de tierras',    descripcion:'Excavación y preparación del terreno para cimientos del Bloque A. Incluye retiro de escombros y compactación base.', notas:'Finalizada sin incidentes. Se requirió refuerzo adicional en sector noreste.' },
    { id:'OT-002', titulo:'Instalación de estructura metálica',  tipo:'CONSTRUCCIÓN', estado:'EN_PROCESO', prioridad:'ALTA',   recurso:'Luis Torres',    tipoRecurso:'CONTRATISTA', costo:85000, fechaInicio:'2026-03-01', fechaFin:'2026-04-15', avance:72,  proyectoRef:'PRY-2026-004', tareaRef:'1.3.1 - Estructura metálica',      descripcion:'Montaje e instalación de estructura metálica principal del edificio.', notas:'En proceso. Retraso de 3 días por lluvia. Se retomarán jornadas extendidas.' },
    { id:'OT-003', titulo:'Diseño de instalaciones eléctricas',  tipo:'INGENIERÍA',   estado:'COMPLETADA', prioridad:'MEDIA',  recurso:'María García',   tipoRecurso:'INTERNO',     costo:18000, fechaInicio:'2026-02-15', fechaFin:'2026-03-10', avance:100, proyectoRef:'PRY-2026-004', tareaRef:'1.4.2 - Planos eléctricos',       descripcion:'Diseño completo de planos eléctricos para todo el edificio.', notas:'Aprobado por inspección municipal el 15/03.' },
    { id:'OT-004', titulo:'Inspección de calidad - Fase 1',      tipo:'CALIDAD',      estado:'COMPLETADA', prioridad:'ALTA',   recurso:'Ana Morales',    tipoRecurso:'INTERNO',     costo:8500,  fechaInicio:'2026-03-05', fechaFin:'2026-03-08', avance:100, proyectoRef:'PRY-2026-004', tareaRef:'1.5.1 - Control calidad Fase 1',  descripcion:'Inspección y auditoría de calidad de trabajos de cimentación y estructura.', notas:'Se emitió informe con 2 observaciones menores resueltas.' },
    { id:'OT-005', titulo:'Prefabricado de ventanas y puertas',  tipo:'SUMINISTRO',   estado:'EN_PROCESO', prioridad:'MEDIA',  recurso:'Pedro Jiménez',  tipoRecurso:'PROVEEDOR',   costo:63000, fechaInicio:'2026-04-01', fechaFin:'2026-05-20', avance:45,  proyectoRef:'PRY-2026-004', tareaRef:'1.6.3 - Carpintería',             descripcion:'Fabricación e instalación de ventanas PVC y puertas de aluminio.', notas:'' },
    { id:'OT-006', titulo:'Instalación sistema contra incendios',tipo:'CONSTRUCCIÓN', estado:'PENDIENTE',  prioridad:'ALTA',   recurso:'Carlos Ruiz',    tipoRecurso:'CONTRATISTA', costo:31000, fechaInicio:'2026-05-01', fechaFin:'2026-06-15', avance:0,   proyectoRef:'PRY-2026-004', tareaRef:'1.7.1 - Sistemas de seguridad',   descripcion:'Instalación de sistema completo contra incendios según normas NFPA.', notas:'' },
    { id:'OT-007', titulo:'Auditoría HSE trimestral',            tipo:'SEGURIDAD',    estado:'PENDIENTE',  prioridad:'ALTA',   recurso:'Ana Morales',    tipoRecurso:'INTERNO',     costo:5000,  fechaInicio:'2026-06-01', fechaFin:'2026-06-03', avance:0,   proyectoRef:'PRY-2026-004', tareaRef:'1.8.1 - Auditoría de seguridad',  descripcion:'Auditoría trimestral de Salud, Seguridad y Medioambiente del proyecto.', notas:'' },
  ],
  p2: [
    { id:'OT-001', titulo:'Sesiones de grabación - Álbum vol. 1',tipo:'PRODUCCIÓN',   estado:'COMPLETADA', prioridad:'ALTA',   recurso:'Juan Pérez',     tipoRecurso:'INTERNO',     costo:28000, fechaInicio:'2026-03-15', fechaFin:'2026-04-10', avance:100, proyectoRef:'PRY-2026-004', tareaRef:'2.1.1 - Producción musical',      descripcion:'Grabación de todas las pistas del primer álbum en estudio profesional.', notas:'Grabadas 12 pistas. 2 requirieron re-toma.' },
    { id:'OT-002', titulo:'Mezcla y masterización pistas 1-5',   tipo:'PRODUCCIÓN',   estado:'EN_PROCESO', prioridad:'ALTA',   recurso:'María García',   tipoRecurso:'INTERNO',     costo:14000, fechaInicio:'2026-04-12', fechaFin:'2026-05-15', avance:60,  proyectoRef:'PRY-2026-004', tareaRef:'2.2.1 - Post-producción',         descripcion:'Mezcla y masterización profesional de las primeras 5 pistas del álbum.', notas:'' },
    { id:'OT-003', titulo:'Diseño de portada y material gráfico',tipo:'DISEÑO',       estado:'EN_PROCESO', prioridad:'MEDIA',  recurso:'Luis Torres',    tipoRecurso:'INTERNO',     costo:8500,  fechaInicio:'2026-04-20', fechaFin:'2026-05-30', avance:35,  proyectoRef:'PRY-2026-004', tareaRef:'2.3.1 - Identidad visual',        descripcion:'Diseño de portada, contraportada y material gráfico para el álbum.', notas:'' },
    { id:'OT-004', titulo:'Campaña digital redes sociales',      tipo:'MARKETING',    estado:'PENDIENTE',  prioridad:'MEDIA',  recurso:'Pedro Jiménez',  tipoRecurso:'CONTRATISTA', costo:12000, fechaInicio:'2026-06-01', fechaFin:'2026-07-15', avance:0,   proyectoRef:'PRY-2026-004', tareaRef:'2.4.2 - Marketing digital',       descripcion:'Campaña en Instagram, TikTok y YouTube para lanzamiento del álbum.', notas:'' },
  ],
  p3: [
    { id:'OT-001', titulo:'Auditoría de procesos actuales (AS-IS)',tipo:'CONSULTORÍA', estado:'COMPLETADA', prioridad:'ALTA',   recurso:'Juan Pérez',     tipoRecurso:'INTERNO',     costo:48000, fechaInicio:'2026-02-01', fechaFin:'2026-03-15', avance:100, proyectoRef:'PRY-2026-004', tareaRef:'3.1.1 - Diagnóstico AS-IS',      descripcion:'Levantamiento y documentación de todos los procesos actuales de la empresa.', notas:'Documentados 47 procesos. 12 identificados como críticos.' },
    { id:'OT-002', titulo:'Configuración módulo Finanzas ERP',   tipo:'DESARROLLO',   estado:'COMPLETADA', prioridad:'ALTA',   recurso:'María García',   tipoRecurso:'INTERNO',     costo:52000, fechaInicio:'2026-03-01', fechaFin:'2026-04-20', avance:100, proyectoRef:'PRY-2026-004', tareaRef:'3.2.1 - Módulo finanzas',        descripcion:'Configuración y parametrización del módulo financiero del ERP.', notas:'Completado con pruebas de integración exitosas.' },
    { id:'OT-003', titulo:'Desarrollo módulo RRHH personalizado',tipo:'DESARROLLO',   estado:'EN_PROCESO', prioridad:'ALTA',   recurso:'Luis Torres',    tipoRecurso:'INTERNO',     costo:68000, fechaInicio:'2026-04-01', fechaFin:'2026-06-30', avance:58,  proyectoRef:'PRY-2026-004', tareaRef:'3.2.2 - Módulo RRHH',            descripcion:'Desarrollo a medida del módulo de gestión de recursos humanos.', notas:'' },
    { id:'OT-004', titulo:'Migración de datos históricos',       tipo:'DATOS',        estado:'EN_PROCESO', prioridad:'ALTA',   recurso:'Carlos Ruiz',    tipoRecurso:'INTERNO',     costo:38000, fechaInicio:'2026-04-15', fechaFin:'2026-06-15', avance:42,  proyectoRef:'PRY-2026-004', tareaRef:'3.3.1 - Migración de datos',     descripcion:'Migración y validación de datos históricos al nuevo sistema ERP.', notas:'Migrados 6 de 14 módulos de datos.' },
    { id:'OT-005', titulo:'Capacitación grupo piloto (20 users)',tipo:'CAPACITACIÓN', estado:'PENDIENTE',  prioridad:'MEDIA',  recurso:'Ana Morales',    tipoRecurso:'INTERNO',     costo:19200, fechaInicio:'2026-07-01', fechaFin:'2026-07-15', avance:0,   proyectoRef:'PRY-2026-004', tareaRef:'3.4.1 - Capacitación usuarios',  descripcion:'Capacitación del grupo piloto de 20 usuarios en el nuevo sistema.', notas:'' },
  ],
  p4: [
    { id:'OT-001', titulo:'Arquitectura del sistema y API REST', tipo:'DESARROLLO',   estado:'COMPLETADA', prioridad:'ALTA',   recurso:'Juan Pérez',     tipoRecurso:'INTERNO',     costo:8800,  fechaInicio:'2026-05-15', fechaFin:'2026-06-10', avance:100, proyectoRef:'PRY-2026-004', tareaRef:'4.1.1 - Diseño de arquitectura', descripcion:'Diseño y documentación de la arquitectura del sistema y endpoints de la API REST.', notas:'Aprobado por comité técnico.' },
    { id:'OT-002', titulo:'Diseño de sistema de diseño UI/UX',   tipo:'DISEÑO',       estado:'EN_PROCESO', prioridad:'ALTA',   recurso:'María García',   tipoRecurso:'INTERNO',     costo:6600,  fechaInicio:'2026-06-01', fechaFin:'2026-07-15', avance:55,  proyectoRef:'PRY-2026-004', tareaRef:'4.1.2 - Design system',          descripcion:'Creación del sistema de diseño completo: tokens, componentes, guías de estilo.', notas:'' },
    { id:'OT-003', titulo:'Desarrollo módulo de autenticación',  tipo:'DESARROLLO',   estado:'PENDIENTE',  prioridad:'ALTA',   recurso:'Luis Torres',    tipoRecurso:'INTERNO',     costo:11000, fechaInicio:'2026-07-01', fechaFin:'2026-08-15', avance:0,   proyectoRef:'PRY-2026-004', tareaRef:'4.2.1 - Autenticación',          descripcion:'Implementación del sistema de autenticación JWT con roles y permisos.', notas:'' },
    { id:'OT-004', titulo:'Setup CI/CD y contenedores Docker',   tipo:'INFRAESTR.',   estado:'PENDIENTE',  prioridad:'MEDIA',  recurso:'Carlos Ruiz',    tipoRecurso:'INTERNO',     costo:4400,  fechaInicio:'2026-07-20', fechaFin:'2026-08-05', avance:0,   proyectoRef:'PRY-2026-004', tareaRef:'4.3.1 - DevOps',                 descripcion:'Configuración de pipeline CI/CD con GitHub Actions y contenedores Docker.', notas:'' },
  ],
};

const TIPO_COLORS = {
  'CONSTRUCCIÓN': 'bg-orange-100 dark:bg-orange-500/15 text-orange-700 dark:text-orange-400',
  'INGENIERÍA':   'bg-blue-100 dark:bg-blue-500/15 text-blue-700 dark:text-blue-400',
  'CALIDAD':      'bg-purple-100 dark:bg-purple-500/15 text-purple-700 dark:text-purple-400',
  'SUMINISTRO':   'bg-teal-100 dark:bg-teal-500/15 text-teal-700 dark:text-teal-400',
  'SEGURIDAD':    'bg-red-100 dark:bg-red-500/15 text-red-700 dark:text-red-400',
  'PRODUCCIÓN':   'bg-pink-100 dark:bg-pink-500/15 text-pink-700 dark:text-pink-400',
  'DISEÑO':       'bg-violet-100 dark:bg-violet-500/15 text-violet-700 dark:text-violet-400',
  'MARKETING':    'bg-cyan-100 dark:bg-cyan-500/15 text-cyan-700 dark:text-cyan-400',
  'CONSULTORÍA':  'bg-indigo-100 dark:bg-indigo-500/15 text-indigo-700 dark:text-indigo-400',
  'DESARROLLO':   'bg-blue-100 dark:bg-blue-500/15 text-blue-700 dark:text-blue-400',
  'DATOS':        'bg-slate-100 dark:bg-slate-500/15 text-slate-700 dark:text-slate-400',
  'CAPACITACIÓN': 'bg-green-100 dark:bg-green-500/15 text-green-700 dark:text-green-400',
  'INFRAESTR.':   'bg-gray-100 dark:bg-gray-500/15 text-gray-700 dark:text-gray-400',
};

const ESTADO_STYLES = {
  COMPLETADA:  { cls: 'bg-emerald-100 dark:bg-emerald-500/15 text-emerald-700 dark:text-emerald-400', label: 'Completada'  },
  EN_PROCESO:  { cls: 'bg-blue-100 dark:bg-blue-500/15 text-blue-700 dark:text-blue-400',             label: 'En proceso'  },
  PENDIENTE:   { cls: 'bg-slate-100 dark:bg-slate-500/15 text-slate-600 dark:text-slate-400',         label: 'Pendiente'   },
  PAUSADA:     { cls: 'bg-amber-100 dark:bg-amber-500/15 text-amber-700 dark:text-amber-400',         label: 'Pausada'     },
};

const TIPO_RECURSO_STYLES = {
  'INTERNO':     'bg-blue-50 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400',
  'CONTRATISTA': 'bg-orange-50 dark:bg-orange-500/10 text-orange-700 dark:text-orange-400',
  'PROVEEDOR':   'bg-teal-50 dark:bg-teal-500/10 text-teal-700 dark:text-teal-400',
};

const fmt = n => n >= 1_000_000 ? `$${(n/1_000_000).toFixed(2)}M` : n >= 1000 ? `$${(n/1000).toFixed(1)}K` : `$${n}`;

function ProgressBar({ pct }) {
  const color = pct === 100 ? '#10B981' : pct >= 70 ? '#3B82F6' : pct >= 30 ? '#F59E0B' : '#94a3b8';
  return (
    <div className="flex items-center gap-2 min-w-[110px]">
      <div className="flex-1 h-1.5 bg-slate-100 dark:bg-surface-700 rounded-full overflow-hidden">
        <div className="h-full rounded-full transition-all" style={{width:`${pct}%`, background:color}}/>
      </div>
      <span className="text-xs font-semibold tabular-nums w-8 text-right" style={{color}}>{pct}%</span>
    </div>
  );
}

// ── Detail / Edit Modal ─────────────────────────────────────────────────────
function OTDetailModal({ ot, onClose, onSave }) {
  const [form, setForm] = useState({ ...ot });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const es = ESTADO_STYLES[form.estado] || ESTADO_STYLES.PENDIENTE;

  return (
    <div className="fixed inset-0 bg-black/50 flex items-start justify-center z-50 p-4 pt-8 overflow-y-auto" onClick={onClose}>
      <div className="bg-white dark:bg-surface-800 rounded-2xl shadow-2xl w-full max-w-2xl border border-slate-200 dark:border-surface-700 mb-8" onClick={e=>e.stopPropagation()}>
        {/* Header */}
        <div className="flex items-start justify-between p-6 border-b border-slate-100 dark:border-surface-700">
          <div className="flex-1 pr-4">
            <div className="flex flex-wrap items-center gap-2 mb-2">
              <span className="text-xs font-mono font-bold text-slate-500 dark:text-gray-400 bg-slate-100 dark:bg-surface-700 px-2 py-0.5 rounded">{form.id}</span>
              <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${es.cls}`}>{es.label}</span>
              <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${TIPO_COLORS[form.tipo]||'bg-slate-100 text-slate-600'}`}>{form.tipo}</span>
            </div>
            <h2 className="text-base font-bold text-slate-900 dark:text-white leading-snug">{form.titulo}</h2>
          </div>
          <button onClick={onClose} className="text-slate-400 hover:text-slate-600 dark:hover:text-white cursor-pointer transition-colors flex-shrink-0 mt-0.5">
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
          </button>
        </div>

        <div className="p-6 space-y-5">
          {/* References — highlighted section */}
          <div className="bg-blue-50 dark:bg-blue-500/10 rounded-xl p-4 border border-blue-100 dark:border-blue-500/20">
            <p className="text-xs font-bold text-blue-700 dark:text-blue-400 uppercase tracking-wide mb-3">Referencias del proyecto</p>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-xs font-semibold text-slate-500 dark:text-gray-400 mb-1.5">Código de proyecto</label>
                <input value={form.proyectoRef||''} onChange={e=>set('proyectoRef',e.target.value)}
                  placeholder="PRY-2026-XXX"
                  className="w-full text-sm bg-white dark:bg-surface-700 border border-slate-200 dark:border-surface-600 rounded-lg px-3 py-2 text-slate-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono"/>
              </div>
              <div>
                <label className="block text-xs font-semibold text-slate-500 dark:text-gray-400 mb-1.5">Tarea / Entregable WBS</label>
                <input value={form.tareaRef||''} onChange={e=>set('tareaRef',e.target.value)}
                  placeholder="1.2.3 - Nombre de tarea"
                  className="w-full text-sm bg-white dark:bg-surface-700 border border-slate-200 dark:border-surface-600 rounded-lg px-3 py-2 text-slate-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500"/>
              </div>
            </div>
          </div>

          {/* Title + Type */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-xs font-semibold text-slate-400 dark:text-gray-500 mb-1.5">Título</label>
              <input value={form.titulo} onChange={e=>set('titulo',e.target.value)}
                className="w-full text-sm bg-slate-50 dark:bg-surface-700 border border-slate-200 dark:border-surface-600 rounded-lg px-3 py-2 text-slate-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500"/>
            </div>
            <div>
              <label className="block text-xs font-semibold text-slate-400 dark:text-gray-500 mb-1.5">Tipo de trabajo</label>
              <select value={form.tipo} onChange={e=>set('tipo',e.target.value)}
                className="w-full text-sm bg-slate-50 dark:bg-surface-700 border border-slate-200 dark:border-surface-600 rounded-lg px-3 py-2 text-slate-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
                {Object.keys(TIPO_COLORS).map(t=><option key={t}>{t}</option>)}
              </select>
            </div>
          </div>

          {/* Recurso + Tipo recurso */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-xs font-semibold text-slate-400 dark:text-gray-500 mb-1.5">Responsable / Ejecutor</label>
              <input value={form.recurso} onChange={e=>set('recurso',e.target.value)}
                className="w-full text-sm bg-slate-50 dark:bg-surface-700 border border-slate-200 dark:border-surface-600 rounded-lg px-3 py-2 text-slate-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500"/>
            </div>
            <div>
              <label className="block text-xs font-semibold text-slate-400 dark:text-gray-500 mb-1.5">Tipo de recurso</label>
              <select value={form.tipoRecurso||'INTERNO'} onChange={e=>set('tipoRecurso',e.target.value)}
                className="w-full text-sm bg-slate-50 dark:bg-surface-700 border border-slate-200 dark:border-surface-600 rounded-lg px-3 py-2 text-slate-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option>INTERNO</option>
                <option>CONTRATISTA</option>
                <option>PROVEEDOR</option>
              </select>
            </div>
          </div>

          {/* Estado + Prioridad + Costo */}
          <div className="grid grid-cols-3 gap-4">
            <div>
              <label className="block text-xs font-semibold text-slate-400 dark:text-gray-500 mb-1.5">Estado</label>
              <select value={form.estado} onChange={e=>set('estado',e.target.value)}
                className="w-full text-sm bg-slate-50 dark:bg-surface-700 border border-slate-200 dark:border-surface-600 rounded-lg px-3 py-2 text-slate-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
                {Object.entries(ESTADO_STYLES).map(([k,v])=><option key={k} value={k}>{v.label}</option>)}
              </select>
            </div>
            <div>
              <label className="block text-xs font-semibold text-slate-400 dark:text-gray-500 mb-1.5">Prioridad</label>
              <select value={form.prioridad} onChange={e=>set('prioridad',e.target.value)}
                className="w-full text-sm bg-slate-50 dark:bg-surface-700 border border-slate-200 dark:border-surface-600 rounded-lg px-3 py-2 text-slate-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option>ALTA</option><option>MEDIA</option><option>BAJA</option>
              </select>
            </div>
            <div>
              <label className="block text-xs font-semibold text-slate-400 dark:text-gray-500 mb-1.5">Costo ($)</label>
              <input type="number" value={form.costo} onChange={e=>set('costo',Number(e.target.value))}
                className="w-full text-sm bg-slate-50 dark:bg-surface-700 border border-slate-200 dark:border-surface-600 rounded-lg px-3 py-2 text-slate-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono"/>
            </div>
          </div>

          {/* Fechas + Avance */}
          <div className="grid grid-cols-3 gap-4">
            <div>
              <label className="block text-xs font-semibold text-slate-400 dark:text-gray-500 mb-1.5">Fecha inicio</label>
              <input type="date" value={form.fechaInicio} onChange={e=>set('fechaInicio',e.target.value)}
                className="w-full text-sm bg-slate-50 dark:bg-surface-700 border border-slate-200 dark:border-surface-600 rounded-lg px-3 py-2 text-slate-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500"/>
            </div>
            <div>
              <label className="block text-xs font-semibold text-slate-400 dark:text-gray-500 mb-1.5">Fecha fin</label>
              <input type="date" value={form.fechaFin} onChange={e=>set('fechaFin',e.target.value)}
                className="w-full text-sm bg-slate-50 dark:bg-surface-700 border border-slate-200 dark:border-surface-600 rounded-lg px-3 py-2 text-slate-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500"/>
            </div>
            <div>
              <label className="block text-xs font-semibold text-slate-400 dark:text-gray-500 mb-1.5">Avance: {form.avance}%</label>
              <input type="range" min="0" max="100" value={form.avance} onChange={e=>set('avance',Number(e.target.value))}
                className="w-full mt-2 accent-blue-600"/>
            </div>
          </div>

          {/* Descripción + Notas */}
          <div>
            <label className="block text-xs font-semibold text-slate-400 dark:text-gray-500 mb-1.5">Descripción</label>
            <textarea rows={3} value={form.descripcion||''} onChange={e=>set('descripcion',e.target.value)}
              className="w-full text-sm bg-slate-50 dark:bg-surface-700 border border-slate-200 dark:border-surface-600 rounded-lg px-3 py-2 text-slate-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"/>
          </div>
          <div>
            <label className="block text-xs font-semibold text-slate-400 dark:text-gray-500 mb-1.5">Notas / Observaciones</label>
            <textarea rows={2} value={form.notas||''} onChange={e=>set('notas',e.target.value)}
              className="w-full text-sm bg-slate-50 dark:bg-surface-700 border border-slate-200 dark:border-surface-600 rounded-lg px-3 py-2 text-slate-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"/>
          </div>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-slate-100 dark:border-surface-700 bg-slate-50 dark:bg-surface-900/40 rounded-b-2xl">
          <button onClick={onClose} className="px-4 py-2 text-sm text-slate-600 dark:text-gray-300 hover:bg-slate-100 dark:hover:bg-surface-700 rounded-lg transition-colors cursor-pointer">Cancelar</button>
          <button onClick={()=>{ onSave(form); onClose(); }}
            className="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors cursor-pointer">
            Guardar cambios
          </button>
        </div>
      </div>
    </div>
  );
}

export default function WorkOrdersPage() {
  const { selectedProjectId } = useProject();
  const selected = selectedProjectId || MOCK_PROJECTS[0]?.id || 'p4';
  const project  = MOCK_PROJECTS.find(p=>p.id===selected);

  const [filterEstado, setFilterEstado] = useState('TODOS');
  const [search, setSearch]             = useState('');
  const [showModal, setShowModal]       = useState(false);
  const [selectedOT, setSelectedOT]     = useState(null);
  const [localOrders, setLocalOrders]   = useState({});

  const baseOrders = WORK_ORDERS[selected] || [];
  const allOrders  = localOrders[selected] || baseOrders;

  const orders = allOrders
    .filter(o => filterEstado === 'TODOS' || o.estado === filterEstado)
    .filter(o => !search || [o.titulo, o.id, o.proyectoRef||'', o.tareaRef||'', o.recurso].some(s => s.toLowerCase().includes(search.toLowerCase())));

  const completadas = allOrders.filter(o=>o.estado==='COMPLETADA').length;
  const enProceso   = allOrders.filter(o=>o.estado==='EN_PROCESO').length;
  const totalCosto  = allOrders.reduce((s,o)=>s+o.costo,0);

  const handleSave = (updated) => {
    setLocalOrders(prev => ({
      ...prev,
      [selected]: (prev[selected] || baseOrders).map(o => o.id === updated.id ? updated : o)
    }));
  };

  return (
    <div className="space-y-5 pb-6">
      {/* Header */}
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h1 className="text-lg font-bold text-slate-900 dark:text-white">Órdenes de Trabajo</h1>
          <p className="text-sm text-slate-400 dark:text-gray-500 mt-0.5">Gestión y seguimiento de OTs por proyecto</p>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-sm bg-white dark:bg-surface-800 border border-slate-200 dark:border-surface-700 rounded-lg px-3 py-2 text-slate-700 dark:text-gray-300 shadow-sm font-medium">
            {project?.code}
          </span>
          <button onClick={()=>setShowModal(true)}
            className="flex items-center gap-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-3 py-2 rounded-lg transition-colors cursor-pointer shadow-sm">
            <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>
            Nueva OT
          </button>
        </div>
      </div>

      {/* KPIs */}
      <div className="grid grid-cols-2 xl:grid-cols-4 gap-3">
        {[
          { label:'Total OTs',          value: allOrders.length, color:'text-slate-900 dark:text-white'         },
          { label:'Completadas',         value: completadas,       color:'text-emerald-600 dark:text-emerald-400' },
          { label:'En proceso',          value: enProceso,         color:'text-blue-600 dark:text-blue-400'       },
          { label:'Costo comprometido',  value: fmt(totalCosto),   color:'text-slate-900 dark:text-white'         },
        ].map(({label,value,color})=>(
          <div key={label} className="bg-white dark:bg-surface-800 rounded-2xl p-5 border border-slate-200 dark:border-surface-700 shadow-sm">
            <p className="text-xs font-semibold text-slate-400 dark:text-gray-500 uppercase tracking-widest mb-2">{label}</p>
            <p className={`text-2xl font-bold tabular-nums ${color}`}>{value}</p>
          </div>
        ))}
      </div>

      {/* Filter bar */}
      <div className="flex flex-wrap items-center gap-3">
        <div className="flex gap-1 bg-slate-100 dark:bg-surface-800 p-1 rounded-xl">
          {['TODOS','COMPLETADA','EN_PROCESO','PENDIENTE'].map(f=>(
            <button key={f} onClick={()=>setFilterEstado(f)}
              className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all cursor-pointer ${filterEstado===f?'bg-white dark:bg-surface-700 text-slate-900 dark:text-white shadow-sm':'text-slate-500 dark:text-gray-400 hover:text-slate-700 dark:hover:text-gray-300'}`}>
              {f === 'TODOS' ? 'Todas' : ESTADO_STYLES[f]?.label || f}
            </button>
          ))}
        </div>
        <input value={search} onChange={e=>setSearch(e.target.value)} placeholder="Buscar OT, proyecto, tarea, recurso..."
          className="px-3 py-1.5 text-sm bg-white dark:bg-surface-800 border border-slate-200 dark:border-surface-700 rounded-lg text-slate-800 dark:text-gray-200 placeholder-slate-400 dark:placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 w-64"/>
        <span className="text-xs text-slate-400 dark:text-gray-500 ml-auto">{orders.length} resultado{orders.length!==1?'s':''} · doble clic para editar</span>
      </div>

      {/* Table */}
      <div className="bg-white dark:bg-surface-800 rounded-2xl border border-slate-200 dark:border-surface-700 shadow-sm overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-slate-100 dark:border-surface-700">
                {['ID','Título','Tipo','Proyecto','Tarea / WBS','Recurso','Tipo Recurso','Costo','Avance','Estado'].map(h=>(
                  <th key={h} className="px-4 py-3 text-left text-xs font-medium text-slate-400 dark:text-gray-500 uppercase tracking-wider whitespace-nowrap">{h}</th>
                ))}
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-50 dark:divide-surface-700">
              {orders.length === 0 && (
                <tr><td colSpan={10} className="px-5 py-10 text-center text-sm text-slate-400 dark:text-gray-500">Sin órdenes de trabajo para este filtro.</td></tr>
              )}
              {orders.map(o=>{
                const es   = ESTADO_STYLES[o.estado] || ESTADO_STYLES.PENDIENTE;
                const trCls = TIPO_RECURSO_STYLES[o.tipoRecurso] || TIPO_RECURSO_STYLES.INTERNO;
                return (
                  <tr key={o.id}
                    onDoubleClick={()=>setSelectedOT(o)}
                    title="Doble clic para editar"
                    className="hover:bg-blue-50/40 dark:hover:bg-blue-500/5 transition-colors cursor-pointer">
                    <td className="px-4 py-3.5">
                      <span className="text-xs font-mono font-semibold text-slate-700 dark:text-gray-300">{o.id}</span>
                    </td>
                    <td className="px-4 py-3.5 text-sm text-slate-800 dark:text-gray-200 max-w-[180px] font-medium">
                      <span className="truncate block" title={o.titulo}>{o.titulo}</span>
                    </td>
                    <td className="px-4 py-3.5">
                      <span className={`text-xs font-semibold px-2 py-0.5 rounded-full whitespace-nowrap ${TIPO_COLORS[o.tipo]||'bg-slate-100 text-slate-600'}`}>{o.tipo}</span>
                    </td>
                    <td className="px-4 py-3.5">
                      <span className="text-xs font-mono text-slate-600 dark:text-gray-400 bg-slate-50 dark:bg-surface-700 px-1.5 py-0.5 rounded whitespace-nowrap">{o.proyectoRef||'—'}</span>
                    </td>
                    <td className="px-4 py-3.5 text-xs text-slate-500 dark:text-gray-400 max-w-[180px]">
                      <span className="truncate block" title={o.tareaRef}>{o.tareaRef||'—'}</span>
                    </td>
                    <td className="px-4 py-3.5 text-sm text-slate-600 dark:text-gray-300 whitespace-nowrap">{o.recurso}</td>
                    <td className="px-4 py-3.5">
                      <span className={`text-xs font-semibold px-2 py-0.5 rounded-full whitespace-nowrap ${trCls}`}>{o.tipoRecurso||'INTERNO'}</span>
                    </td>
                    <td className="px-4 py-3.5 text-sm tabular-nums font-mono text-slate-700 dark:text-gray-300 whitespace-nowrap">{fmt(o.costo)}</td>
                    <td className="px-4 py-3.5"><ProgressBar pct={o.avance}/></td>
                    <td className="px-4 py-3.5">
                      <span className={`text-xs font-semibold px-2 py-0.5 rounded-full whitespace-nowrap ${es.cls}`}>{es.label}</span>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {/* Detail modal (double-click) */}
      {selectedOT && (
        <OTDetailModal ot={selectedOT} onClose={()=>setSelectedOT(null)} onSave={handleSave}/>
      )}

      {/* New OT modal */}
      {showModal && (
        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4" onClick={()=>setShowModal(false)}>
          <div className="bg-white dark:bg-surface-800 rounded-2xl shadow-2xl w-full max-w-lg border border-slate-200 dark:border-surface-700 p-6 max-h-[90vh] overflow-y-auto" onClick={e=>e.stopPropagation()}>
            <div className="flex items-center justify-between mb-5">
              <h2 className="text-base font-bold text-slate-900 dark:text-white">Nueva Orden de Trabajo</h2>
              <button onClick={()=>setShowModal(false)} className="text-slate-400 hover:text-slate-600 dark:hover:text-white cursor-pointer transition-colors">
                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
              </button>
            </div>
            <div className="space-y-4">
              {/* References */}
              <div className="bg-blue-50 dark:bg-blue-500/10 rounded-xl p-3 border border-blue-100 dark:border-blue-500/20 space-y-3">
                <p className="text-xs font-bold text-blue-700 dark:text-blue-400 uppercase tracking-wide">Referencias del proyecto</p>
                {[
                  { label:'Código de proyecto', placeholder: project?.code || 'PRY-2026-XXX' },
                  { label:'Tarea / Entregable WBS', placeholder: 'Ej: 1.2.3 - Nombre de tarea' },
                ].map(f=>(
                  <div key={f.label}>
                    <label className="block text-xs font-semibold text-slate-500 dark:text-gray-400 mb-1">{f.label}</label>
                    <input type="text" placeholder={f.placeholder}
                      className="w-full text-sm bg-white dark:bg-surface-700 border border-slate-200 dark:border-surface-600 rounded-lg px-3 py-2 text-slate-800 dark:text-gray-200 placeholder-slate-400 dark:placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"/>
                  </div>
                ))}
              </div>

              {[
                { label:'Título de la OT', type:'text', placeholder:'Descripción de la orden de trabajo' },
                { label:'Tipo de trabajo', type:'select', options:Object.keys(TIPO_COLORS) },
                { label:'Tipo de recurso', type:'select', options:['INTERNO','CONTRATISTA','PROVEEDOR'] },
                { label:'Recurso / Responsable', type:'text', placeholder:'Nombre o empresa' },
                { label:'Costo estimado ($)', type:'number', placeholder:'0' },
                { label:'Fecha inicio', type:'date' },
                { label:'Fecha fin',    type:'date' },
              ].map(f=>(
                <div key={f.label}>
                  <label className="block text-xs font-semibold text-slate-500 dark:text-gray-400 mb-1">{f.label}</label>
                  {f.type === 'select'
                    ? <select className="w-full text-sm bg-white dark:bg-surface-700 border border-slate-200 dark:border-surface-600 rounded-lg px-3 py-2 text-slate-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        {f.options.map(o=><option key={o}>{o}</option>)}
                      </select>
                    : <input type={f.type} placeholder={f.placeholder}
                        className="w-full text-sm bg-white dark:bg-surface-700 border border-slate-200 dark:border-surface-600 rounded-lg px-3 py-2 text-slate-800 dark:text-gray-200 placeholder-slate-400 dark:placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"/>
                  }
                </div>
              ))}
            </div>
            <div className="flex justify-end gap-2 mt-6">
              <button onClick={()=>setShowModal(false)} className="px-4 py-2 text-sm text-slate-600 dark:text-gray-300 hover:bg-slate-100 dark:hover:bg-surface-700 rounded-lg transition-colors cursor-pointer">Cancelar</button>
              <button onClick={()=>setShowModal(false)} className="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors cursor-pointer">Crear OT</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
