// Motor de Automatización — corazón del sistema
// Tabs: Actividad · Reglas · Matrices · Logs

const TIMELINE_EVENTS = [
  {
    id: 'evt-128',
    type: 'create',
    title: 'Empleado creado',
    subject: 'María Fernanda López',
    detail: 'Cargo asignado: Operaria de Aprovechamiento · Sede Cali',
    actor: 'Carolina Restrepo',
    time: 'Hace 12 min',
    timestamp: '05/05/2026 14:32',
    status: 'ejecutado',
    duration: '1.4s',
    rule: 'R-04 Ingreso Operaciones',
    actions: [
      { kind: 'epp', icon: 'IconShirt', title: 'Dotación asignada', items: ['Uniforme talla M', 'Botas puntera acero talla 37', 'Casco blanco', 'Tapaoídos', 'Guantes nitrilo'], count: 5 },
      { kind: 'training', icon: 'IconBook', title: 'Capacitaciones asignadas', items: ['Manejo de Maquinaria (obligatoria)', 'Seguridad Industrial', 'BPM Alimentos', 'Inducción corporativa'], count: 4 },
      { kind: 'sst', icon: 'IconShield', title: 'Exámenes SST programados', items: ['Examen de ingreso (5 días)', 'Audiometría (30 días)', 'Visiometría (30 días)'], count: 3 },
      { kind: 'docs', icon: 'IconDoc', title: 'Documentos generados', items: ['Contrato Fijo a término', 'Política de Datos', 'Reglamento Interno', 'Acuerdo de Confidencialidad', 'Autorización descuentos', 'Declaración de Buenas Prácticas'], count: 6 },
      { kind: 'onboarding', icon: 'IconRocket', title: 'Checklist de onboarding', items: ['12 tareas asignadas a Líder de Aprovechamiento y al colaborador'], count: 12 },
      { kind: 'notif', icon: 'IconMegaphone', title: 'Notificaciones enviadas', items: ['Líder Operaciones · Almacén Cali · SST · TI'], count: 4 },
    ],
  },
  {
    id: 'evt-127',
    type: 'create',
    title: 'Empleado creado',
    subject: 'Andrés Felipe Mejía',
    detail: 'Cargo asignado: Operario de Clasificación · Sede Cali',
    actor: 'Carolina Restrepo',
    time: 'Hace 38 min',
    timestamp: '05/05/2026 14:06',
    status: 'ejecutado',
    duration: '1.6s',
    rule: 'R-04 Ingreso Operaciones',
    actions: [
      { kind: 'epp', icon: 'IconShirt', title: 'Dotación asignada', items: ['Uniforme talla L', 'Botas puntera acero talla 41', 'Guantes térmicos', 'Casco blanco', 'Mascarilla N95'], count: 5 },
      { kind: 'training', icon: 'IconBook', title: 'Capacitaciones asignadas', items: ['Trabajo seguro en altura', 'Manejo de trituradora', 'Seguridad Industrial', 'Inducción corporativa'], count: 4 },
      { kind: 'sst', icon: 'IconShield', title: 'Exámenes SST programados', items: ['Examen de ingreso', 'Examen de altura (30 días)', 'Audiometría (30 días)'], count: 3 },
      { kind: 'docs', icon: 'IconDoc', title: 'Documentos generados', items: ['Contrato Fijo a término', 'Política de Datos', 'Reglamento Interno', 'Acuerdo de Confidencialidad', 'Autorización descuentos', 'Declaración de BPM'], count: 6 },
      { kind: 'onboarding', icon: 'IconRocket', title: 'Checklist de onboarding', items: ['12 tareas asignadas'], count: 12 },
    ],
  },
  {
    id: 'evt-126',
    type: 'change',
    title: 'Cambio de cargo',
    subject: 'Diego Andrés Toro',
    detail: 'Aux. Aprovechamiento → Operario de Aprovechamiento · Promoción interna',
    actor: 'Patricia Ocampo',
    time: 'Hace 2 h',
    timestamp: '05/05/2026 12:14',
    status: 'ejecutado',
    duration: '0.9s',
    rule: 'R-07 Cambio de cargo',
    actions: [
      { kind: 'epp', icon: 'IconShirt', title: 'Dotación complementaria', items: ['Uniforme operario · Botas adicionales · Tapaoídos'], count: 3 },
      { kind: 'training', icon: 'IconBook', title: 'Capacitaciones nuevas', items: ['Manejo de Maquinaria · BPM Alimentos avanzado'], count: 2 },
      { kind: 'docs', icon: 'IconDoc', title: 'Otrosí generado', items: ['Otrosí cambio de cargo · Nueva descripción de funciones'], count: 2 },
      { kind: 'notif', icon: 'IconMegaphone', title: 'Notificaciones', items: ['Líder Aprovechamiento · Nómina · Colaborador'], count: 3 },
    ],
  },
  {
    id: 'evt-125',
    type: 'expiry',
    title: 'Vencimientos detectados',
    subject: 'Ejecución diaria 6:00 AM',
    detail: '3 exámenes médicos próximos a vencer · 2 contratos a término por terminar',
    actor: 'Sistema · cron diario',
    time: 'Hace 8 h',
    timestamp: '05/05/2026 06:00',
    status: 'ejecutado',
    duration: '2.1s',
    rule: 'R-12 Monitor de vencimientos',
    actions: [
      { kind: 'sst', icon: 'IconShield', title: 'Alertas SST creadas', items: ['Carlos Vélez · examen de altura (5 días)', 'María López · audiometría (3 días)', 'Jorge Patiño · visual (vencido)'], count: 3 },
      { kind: 'docs', icon: 'IconDoc', title: 'Notificaciones contratos', items: ['Adriana Restrepo (15 días)', 'Juan Ruiz (28 días)'], count: 2 },
      { kind: 'notif', icon: 'IconMegaphone', title: 'Notificaciones enviadas', items: ['RRHH · Líderes directos · Médico SST'], count: 7 },
    ],
  },
  {
    id: 'evt-124',
    type: 'error',
    title: 'Acción fallida',
    subject: 'Sandra Milena Ortiz',
    detail: 'No se pudo asignar dotación — matriz "Coord. Compras" sin items configurados',
    actor: 'Carolina Restrepo',
    time: 'Ayer 16:42',
    timestamp: '04/05/2026 16:42',
    status: 'error',
    duration: '0.4s',
    rule: 'R-01 Ingreso administrativo',
    actions: [
      { kind: 'training', icon: 'IconBook', title: 'Capacitaciones asignadas', items: ['Inducción corporativa · Política de compras'], count: 2 },
      { kind: 'docs', icon: 'IconDoc', title: 'Documentos generados', items: ['Contrato Indefinido · Política de Datos · Reglamento Interno'], count: 3 },
      { kind: 'error', icon: 'IconAlert', title: 'Error en dotación', items: ['Matriz vacía para el cargo "Coord. Compras". Configura los items en Matrices → por cargo.'], count: 1, error: true },
    ],
  },
  {
    id: 'evt-123',
    type: 'create',
    title: 'Empleado creado',
    subject: 'Juan David Ruiz',
    detail: 'Cargo asignado: Auxiliar de Calidad · Sede Barranquilla',
    actor: 'Carolina Restrepo',
    time: 'Ayer 11:08',
    timestamp: '04/05/2026 11:08',
    status: 'ejecutado',
    duration: '1.3s',
    rule: 'R-05 Ingreso Calidad',
    actions: [
      { kind: 'epp', icon: 'IconShirt', title: 'Dotación asignada', items: ['Bata blanca · Cofia · Guantes · Tapabocas · Botas blancas'], count: 5 },
      { kind: 'training', icon: 'IconBook', title: 'Capacitaciones asignadas', items: ['HACCP · Auditoría interna · BPM · Inducción'], count: 4 },
      { kind: 'sst', icon: 'IconShield', title: 'Exámenes SST programados', items: ['Examen de ingreso', 'Espirometría (60 días)'], count: 2 },
      { kind: 'docs', icon: 'IconDoc', title: 'Documentos generados', items: ['Contrato Fijo · Política Datos · Reglamento · Acuerdo Calidad'], count: 4 },
      { kind: 'onboarding', icon: 'IconRocket', title: 'Checklist de onboarding', items: ['10 tareas asignadas'], count: 10 },
    ],
  },
  {
    id: 'evt-122',
    type: 'expiry',
    title: 'Vencimientos detectados',
    subject: 'Ejecución diaria 6:00 AM',
    detail: '4 capacitaciones obligatorias por vencer este mes',
    actor: 'Sistema · cron diario',
    time: 'Ayer 06:00',
    timestamp: '04/05/2026 06:00',
    status: 'ejecutado',
    duration: '1.8s',
    rule: 'R-12 Monitor de vencimientos',
    actions: [
      { kind: 'training', icon: 'IconBook', title: 'Recertificaciones programadas', items: ['Trabajo en altura: 4 colaboradores', 'BPM: 2 colaboradores'], count: 4 },
      { kind: 'notif', icon: 'IconMegaphone', title: 'Invitaciones enviadas', items: ['6 colaboradores convocados a sesión grupal'], count: 6 },
    ],
  },
];

const RULES = [
  {
    id: 'R-04', name: 'Ingreso Operaciones', enabled: true,
    trigger: 'Al crear empleado',
    triggerIcon: 'IconUsers',
    condition: 'Si Área = "Operaciones" Y Cargo contiene "Operario"',
    actions: ['Dotación EPP', 'Capacitaciones', 'Exámenes SST', 'Documentos', 'Onboarding 12 pasos'],
    runs: 47, lastRun: 'Hace 12 min',
  },
  {
    id: 'R-05', name: 'Ingreso Calidad', enabled: true,
    trigger: 'Al crear empleado',
    triggerIcon: 'IconUsers',
    condition: 'Si Área = "Calidad"',
    actions: ['Dotación blanca', 'Capacitaciones HACCP', 'Examen ingreso', 'Documentos', 'Onboarding 10 pasos'],
    runs: 8, lastRun: 'Ayer 11:08',
  },
  {
    id: 'R-01', name: 'Ingreso Administrativo', enabled: true,
    trigger: 'Al crear empleado',
    triggerIcon: 'IconUsers',
    condition: 'Si Área ∈ {Administración, Compras, Finanzas}',
    actions: ['Capacitaciones', 'Documentos', 'Onboarding 6 pasos', 'Asignar equipo TI'],
    runs: 14, lastRun: 'Ayer 16:42',
  },
  {
    id: 'R-07', name: 'Cambio de cargo', enabled: true,
    trigger: 'Al cambiar cargo',
    triggerIcon: 'IconArrowRight',
    condition: 'Si Cargo nuevo ≠ Cargo anterior',
    actions: ['Dotación complementaria', 'Capacitaciones diferenciales', 'Otrosí', 'Notificaciones'],
    runs: 22, lastRun: 'Hace 2 h',
  },
  {
    id: 'R-12', name: 'Monitor de vencimientos', enabled: true,
    trigger: 'Diario 6:00 AM',
    triggerIcon: 'IconClock',
    condition: 'Para cada obligación con vencimiento en próximos 30 días',
    actions: ['Generar alerta', 'Notificar líder', 'Crear recertificación'],
    runs: 124, lastRun: 'Hace 8 h',
  },
  {
    id: 'R-15', name: 'Cumpleaños y aniversarios', enabled: true,
    trigger: 'Diario 8:00 AM',
    triggerIcon: 'IconClock',
    condition: 'Si fecha hoy = cumpleaños o aniversario laboral',
    actions: ['Mensaje automático', 'Notificar al equipo'],
    runs: 312, lastRun: 'Hoy 08:00',
  },
  {
    id: 'R-18', name: 'Retiro de colaborador', enabled: true,
    trigger: 'Al cambiar estado a Inactivo',
    triggerIcon: 'IconUsers',
    condition: 'Si Estado = "Inactivo"',
    actions: ['Generar paz y salvo', 'Recoger dotación', 'Liquidación', 'Desactivar accesos TI'],
    runs: 9, lastRun: 'Hace 6 días',
  },
  {
    id: 'R-22', name: 'Recordatorio firmas pendientes', enabled: false,
    trigger: 'Cada 48 horas',
    triggerIcon: 'IconClock',
    condition: 'Si Documento.estado = "Pendiente firma" Y antigüedad > 48h',
    actions: ['Recordatorio por correo', 'Notificación push'],
    runs: 0, lastRun: '—',
  },
];

const ACTION_KINDS = {
  epp: { label: 'Dotación', cls: 'amber' },
  training: { label: 'Capacitación', cls: 'blue' },
  sst: { label: 'SST', cls: 'rose' },
  docs: { label: 'Documentos', cls: 'navy' },
  onboarding: { label: 'Onboarding', cls: 'green' },
  notif: { label: 'Notificación', cls: 'navy' },
  error: { label: 'Error', cls: 'rose' },
};

const Automation = () => {
  const [tab, setTab] = React.useState('actividad');
  const [openRule, setOpenRule] = React.useState(false);
  const [filter, setFilter] = React.useState('todos');
  const [expanded, setExpanded] = React.useState({ 'evt-128': true, 'evt-127': true });

  const filtered = TIMELINE_EVENTS.filter(e => {
    if (filter === 'todos') return true;
    if (filter === 'errores') return e.status === 'error';
    return e.type === filter;
  });

  return (
    <div className="main">
      <div className="page-head">
        <div>
          <h1 className="page-title" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span className="auto-mark"><IconZap size={18} /></span>
            Motor de Automatización
            <span className="status-dot-live"><span /></span>
            <span className="muted" style={{ fontSize: 13, fontWeight: 500 }}>En línea</span>
          </h1>
          <div className="page-subtitle">
            7 reglas activas · <b>536 ejecuciones</b> en últimos 30 días · última ejecución hace 12 min
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn">
            <IconDoc size={14} /> Documentación
          </button>
          <button className="btn danger" onClick={() => setOpenRule(true)}>
            <IconPlus size={15} /> Nueva regla
          </button>
        </div>
      </div>

      {/* KPI strip */}
      <div className="auto-kpis">
        <div className="auto-kpi">
          <div className="auto-kpi-icon navy"><IconZap size={16} /></div>
          <div>
            <div className="auto-kpi-num">7</div>
            <div className="auto-kpi-lbl">Reglas activas</div>
            <div className="auto-kpi-foot muted">+ 1 inactiva</div>
          </div>
        </div>
        <div className="auto-kpi">
          <div className="auto-kpi-icon green"><IconCheck size={16} /></div>
          <div>
            <div className="auto-kpi-num">23</div>
            <div className="auto-kpi-lbl">Ejecuciones hoy</div>
            <div className="auto-kpi-foot up">+ 8 vs promedio</div>
          </div>
        </div>
        <div className="auto-kpi">
          <div className="auto-kpi-icon blue"><IconBarChart size={16} /></div>
          <div>
            <div className="auto-kpi-num">3,124</div>
            <div className="auto-kpi-lbl">Obligaciones generadas</div>
            <div className="auto-kpi-foot muted">en mayo · ↑ 18%</div>
          </div>
        </div>
        <div className="auto-kpi alert">
          <div className="auto-kpi-icon rose"><IconAlert size={16} /></div>
          <div>
            <div className="auto-kpi-num">1</div>
            <div className="auto-kpi-lbl">Errores pendientes</div>
            <div className="auto-kpi-foot down">requiere revisión</div>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div className="auto-tabs">
        {[
          ['actividad', 'Actividad', 'IconClock', TIMELINE_EVENTS.length],
          ['reglas', 'Reglas', 'IconZap', RULES.length],
          ['matrices', 'Matrices por cargo', 'IconBook', 14],
          ['reassign', 'Reasignación auto', 'IconShield', null],
          ['logs', 'Logs', 'IconDoc', null],
        ].map(([id, lbl, ico, n]) => {
          const Ico = { IconClock, IconZap, IconBook, IconDoc, IconShield }[ico];
          return (
            <button key={id} className={`auto-tab ${tab === id ? 'active' : ''}`} onClick={() => setTab(id)}>
              <Ico size={15} />
              {lbl}
              {n != null && <span className="auto-tab-count">{n}</span>}
            </button>
          );
        })}
      </div>

      {tab === 'actividad' && (
        <div className="auto-grid">
          {/* Timeline */}
          <div className="card timeline-card">
            <div className="timeline-toolbar">
              <div style={{ fontSize: 14, fontWeight: 700 }}>Actividad del motor</div>
              <span className="muted" style={{ fontSize: 12.5 }}>· últimas 48 horas</span>
              <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
                {[
                  ['todos', 'Todos'],
                  ['create', 'Ingresos'],
                  ['change', 'Cambios'],
                  ['expiry', 'Vencimientos'],
                  ['errores', 'Errores'],
                ].map(([id, lbl]) => (
                  <button key={id} className={`chip-tab ${filter === id ? 'active' : ''}`} onClick={() => setFilter(id)}>{lbl}</button>
                ))}
              </div>
            </div>

            <div className="timeline">
              {filtered.map((e, i) => (
                <TimelineItem
                  key={e.id}
                  event={e}
                  expanded={!!expanded[e.id]}
                  onToggle={() => setExpanded({ ...expanded, [e.id]: !expanded[e.id] })}
                  isLast={i === filtered.length - 1}
                />
              ))}
            </div>

            <div className="timeline-foot">
              <button className="link-btn" style={{ marginLeft: 0 }}>Ver historial completo →</button>
            </div>
          </div>

          {/* Side panel */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="card" style={{ padding: '16px 18px' }}>
              <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 12 }}>Ejecuciones por tipo</div>
              <div className="auto-bars">
                {[
                  ['Ingresos', 47, 'navy'],
                  ['Cambios cargo', 22, 'amber'],
                  ['Vencimientos', 124, 'rose'],
                  ['Cumpleaños', 312, 'green'],
                  ['Retiros', 9, 'blue'],
                ].map(([lbl, n, c]) => (
                  <div key={lbl} className="auto-bar-row">
                    <div className="auto-bar-lbl">{lbl}</div>
                    <div className="auto-bar-track">
                      <div className={`auto-bar-fill ${c}`} style={{ width: `${Math.min(100, (n / 320) * 100)}%` }} />
                    </div>
                    <div className="auto-bar-num mono">{n}</div>
                  </div>
                ))}
              </div>
            </div>

            <div className="card" style={{ padding: '16px 18px' }}>
              <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 12 }}>Estado del sistema</div>
              <ul className="status-list">
                <li><span className="status-pin ok" /> Webhook de empleados — operacional</li>
                <li><span className="status-pin ok" /> Cron diario 6:00 AM — última ejecución 06:00</li>
                <li><span className="status-pin ok" /> Cola de notificaciones — 0 pendientes</li>
                <li><span className="status-pin warn" /> Matriz "Coord. Compras" — vacía</li>
                <li><span className="status-pin ok" /> Conector Nómina — sincronizado</li>
              </ul>
              <button className="btn" style={{ width: '100%', justifyContent: 'center', marginTop: 12, fontSize: 12.5 }}>Ver diagnóstico</button>
            </div>

            <div className="card auto-tip">
              <div className="auto-tip-icon"><IconZap size={16} /></div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 4 }}>Tip del motor</div>
                <div className="muted" style={{ fontSize: 12.5, lineHeight: 1.5 }}>
                  Las reglas se ejecutan en orden de prioridad. Si dos reglas aplican al mismo evento, la primera define la dotación y la segunda actúa como complemento.
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {tab === 'reglas' && (
        <div className="card" style={{ overflow: 'visible' }}>
          <div className="rules-toolbar">
            <div className="search" style={{ width: 280, flex: 'none', margin: 0 }}>
              <span className="icon"><IconSearch size={16} /></span>
              <input placeholder="Buscar regla…" style={{ background: 'white' }} />
            </div>
            <div className="filter-select">
              <span className="filter-label">Disparador</span>
              <select><option>Todos</option><option>Al crear empleado</option><option>Al cambiar cargo</option><option>Programado</option></select>
              <IconChevronDown size={14} />
            </div>
            <div className="filter-select">
              <span className="filter-label">Estado</span>
              <select><option>Todas</option><option>Activas</option><option>Inactivas</option></select>
              <IconChevronDown size={14} />
            </div>
            <div style={{ marginLeft: 'auto' }} className="muted">
              {RULES.filter(r => r.enabled).length} de {RULES.length} reglas activas
            </div>
          </div>

          <div className="rules-list">
            {RULES.map(r => <RuleRow key={r.id} rule={r} />)}
          </div>
        </div>
      )}

      {tab === 'matrices' && <MatricesView />}
      {tab === 'reassign' && <ReassignmentEngine />}
      {tab === 'logs' && <LogsView />}

      <NewRuleModal open={openRule} onClose={() => setOpenRule(false)} />
    </div>
  );
};

const TimelineItem = ({ event, expanded, onToggle, isLast }) => {
  const TypeIcon = {
    create: IconUsers, change: IconArrowRight, expiry: IconClock, error: IconAlert,
  }[event.type] || IconZap;
  return (
    <div className={`tl-item ${event.status} ${event.type}`}>
      <div className="tl-rail">
        <div className="tl-dot"><TypeIcon size={13} /></div>
        {!isLast && <div className="tl-line" />}
      </div>
      <div className="tl-body">
        <div className="tl-head">
          <div className="tl-title">
            <span style={{ fontWeight: 600 }}>{event.title}:</span> {event.subject}
            <span className={`pill ${event.status === 'error' ? 'rose' : 'green'}`} style={{ marginLeft: 8 }}>
              {event.status === 'error' ? 'Error' : 'Ejecutado'}
            </span>
          </div>
          <div className="tl-meta">
            <span className="muted">{event.time}</span>
          </div>
        </div>
        <div className="tl-detail muted">{event.detail}</div>
        <div className="tl-rule">
          <span className="rule-chip"><IconZap size={11} /> {event.rule}</span>
          <span className="muted mono" style={{ fontSize: 11.5 }}>· {event.duration}</span>
          <span className="muted" style={{ fontSize: 11.5 }}>· por {event.actor}</span>
          <button className="tl-toggle" onClick={onToggle}>
            {expanded ? 'Ocultar' : 'Ver'} {event.actions.length} acciones
            <IconChevronDown size={14} style={{ transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform 0.18s' }} />
          </button>
        </div>
        {expanded && (
          <div className="tl-actions">
            {event.actions.map((a, i) => {
              const Ico = { IconShirt, IconBook, IconShield, IconDoc, IconRocket, IconMegaphone, IconAlert }[a.icon];
              const meta = ACTION_KINDS[a.kind] || ACTION_KINDS.notif;
              return (
                <div key={i} className={`tl-action ${a.error ? 'err' : ''}`}>
                  <div className={`tl-action-icon ${meta.cls}`}><Ico size={14} /></div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="tl-action-head">
                      {!a.error && <span className="check-tick"><IconCheck size={11} /></span>}
                      <span style={{ fontSize: 13, fontWeight: 600 }}>{a.title}</span>
                      <span className="muted mono" style={{ fontSize: 11.5 }}>· {a.count} {a.count === 1 ? 'elemento' : 'elementos'}</span>
                    </div>
                    <ul className="tl-action-list">
                      {a.items.map((it, j) => <li key={j}>{it}</li>)}
                    </ul>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
};

const RuleRow = ({ rule }) => {
  const [enabled, setEnabled] = React.useState(rule.enabled);
  const TIco = { IconUsers, IconArrowRight, IconClock }[rule.triggerIcon] || IconZap;
  return (
    <div className={`rule-row ${enabled ? '' : 'disabled'}`}>
      <div className="rule-head">
        <div className="rule-id mono">{rule.id}</div>
        <div className="rule-name">
          {rule.name}
          {!enabled && <span className="pill" style={{ marginLeft: 8 }}>Inactiva</span>}
        </div>
        <button className="rule-toggle" onClick={() => setEnabled(!enabled)} aria-label={enabled ? 'Desactivar regla' : 'Activar regla'}>
          <span className={`toggle ${enabled ? 'on' : ''}`}><span className="knob" /></span>
        </button>
        <button className="icon-btn" title="Editar regla">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9" /><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4z" /></svg>
        </button>
      </div>
      <div className="rule-body">
        <div className="rule-prop">
          <div className="rule-prop-lbl">Disparador</div>
          <div className="rule-prop-val">
            <span className="trigger-chip"><TIco size={12} /> {rule.trigger}</span>
          </div>
        </div>
        <div className="rule-prop">
          <div className="rule-prop-lbl">Condición</div>
          <div className="rule-prop-val mono" style={{ fontSize: 12.5 }}>{rule.condition}</div>
        </div>
        <div className="rule-prop">
          <div className="rule-prop-lbl">Acciones</div>
          <div className="rule-prop-val">
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {rule.actions.map((a, i) => <span key={i} className="action-chip">{a}</span>)}
            </div>
          </div>
        </div>
        <div className="rule-prop" style={{ borderTop: '1px dashed var(--border)', paddingTop: 10, marginTop: 4 }}>
          <div className="rule-prop-lbl">Histórico</div>
          <div className="rule-prop-val">
            <span className="mono" style={{ fontWeight: 600 }}>{rule.runs}</span> ejecuciones
            <span className="muted" style={{ marginLeft: 12 }}>· última {rule.lastRun}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

const MatricesView = () => {
  const cargos = (window.CARGOS || []);
  const matriz = (window.MATRIZ_CARGO_COMP || []);
  const [simFor, setSimFor] = React.useState(null); // cargo para simular

  const totalTuplas = matriz.length;
  const totalOblig  = matriz.filter(t => t.obligatoria).length;
  const cargosCubiertos = new Set(matriz.map(t => t.cargoId)).size;

  return (
    <>
      <div className="card" style={{ padding: 22, marginBottom: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 14 }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 4 }}>Matrices por cargo · motor de asignación</div>
            <div className="muted" style={{ fontSize: 13 }}>
              Esta vista lee la matriz Cargo × Competencia editable en <b>Capacitaciones → Matriz por cargo</b>.
              Cuando se crea o se cambia el cargo de un empleado, el motor genera asignaciones según las celdas marcadas.
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <span className="pill navy">{cargosCubiertos} / {cargos.length} cargos cubiertos</span>
            <span className="pill rose">{totalOblig} obligatorias</span>
            <span className="pill amber">{totalTuplas - totalOblig} opcionales</span>
          </div>
        </div>
      </div>

      <div className="matrices-grid">
        {cargos.map(cg => {
          const tuplas = matriz.filter(t => t.cargoId === cg.id);
          const oblig  = tuplas.filter(t => t.obligatoria).length;
          const opc    = tuplas.length - oblig;
          const status = tuplas.length === 0 ? 'empty' : 'ok';
          return (
            <div key={cg.id} className={`matrix-card ${status}`}>
              <div className="matrix-head">
                <div>
                  <div style={{ fontWeight: 600, fontSize: 13.5 }}>{cg.nombre}</div>
                  <div className="muted" style={{ fontSize: 11.5 }}>{cg.area} · {cg.headcount} colaboradores</div>
                </div>
                {status === 'empty'
                  ? <span className="pill rose">Sin matriz</span>
                  : <span className="pill green">{tuplas.length} competencias</span>
                }
              </div>
              <div className="matrix-stats">
                <div title="Obligatorias"><IconAlert size={13} /> {oblig}</div>
                <div title="Opcionales"><IconBook size={13} /> {opc}</div>
                <div title="Riesgos IPVR"><IconShield size={13} /> {(cg.riesgosIPVR || []).length}</div>
              </div>
              <button
                className="btn"
                style={{ width: '100%', justifyContent: 'center', fontSize: 12.5 }}
                onClick={() => setSimFor(cg)}
                disabled={status === 'empty'}
              >
                <IconZap size={12} /> Simular asignación al ingreso
              </button>
            </div>
          );
        })}
      </div>

      {simFor && <SimuladorAsignacion cargo={simFor} onClose={() => setSimFor(null)} />}
    </>
  );
};

// ── Modal: Simulador del motor ─────────────────────────────
// Muestra qué asignaciones se generarían si se creara un empleado con ese cargo HOY.
// Demuestra que el motor opera con la matriz editable, no con datos hardcoded.
const SimuladorAsignacion = ({ cargo, onClose }) => {
  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    const onEsc = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onEsc);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onEsc); };
  }, []);

  const empleadoFicticio = { id: 'E-NUEVO', cargo: cargo.id, originada: 'ingreso' };
  const asignaciones = (window.recalcularAsignaciones || (() => []))(empleadoFicticio, new Date());
  const cmps = (window.COMPETENCIAS_MAESTRAS || []);
  const getCmp = (id) => cmps.find(c => c.id === id);

  const obligOnly = asignaciones.filter(a => a.obligatoria);
  const opcOnly   = asignaciones.filter(a => !a.obligatoria);

  return (
    <div className="modal-overlay" onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" style={{ maxWidth: 760 }}>
        <div className="modal-head">
          <div>
            <div className="muted mono" style={{ fontSize: 11 }}>Simulación · ingreso de empleado</div>
            <div className="modal-title">Cargo: {cargo.nombre}</div>
            <div className="modal-sub">{cargo.area} · {cargo.headcount} colaboradores actuales · riesgos IPVR: {(cargo.riesgosIPVR || []).join(', ')}</div>
          </div>
          <button className="icon-btn" onClick={onClose}><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12" /></svg></button>
        </div>
        <div className="modal-body" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ padding: 12, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 10 }}>
            <div className="muted-xs">Resultado del motor · <span className="mono">recalcularAsignaciones(empleado, hoy)</span></div>
            <div style={{ marginTop: 6, display: 'flex', gap: 16 }}>
              <span><b style={{ fontSize: 18 }}>{asignaciones.length}</b> <span className="muted" style={{ fontSize: 12 }}>asignaciones totales</span></span>
              <span style={{ color: 'var(--rose-600)' }}><b style={{ fontSize: 18 }}>{obligOnly.length}</b> <span className="muted" style={{ fontSize: 12 }}>obligatorias</span></span>
              <span style={{ color: '#854D0E' }}><b style={{ fontSize: 18 }}>{opcOnly.length}</b> <span className="muted" style={{ fontSize: 12 }}>opcionales</span></span>
            </div>
          </div>

          {asignaciones.length === 0 && (
            <div className="muted" style={{ fontSize: 13, padding: 22, textAlign: 'center', background: 'var(--surface)', borderRadius: 10 }}>
              Este cargo no tiene matriz configurada. Define competencias en <b>Capacitaciones → Matriz por cargo</b>.
            </div>
          )}

          {asignaciones.length > 0 && (
            <div>
              <h4 className="ic-cap-h3" style={{ fontSize: 13, marginBottom: 8 }}>Asignaciones generadas</h4>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {asignaciones.map((a, i) => {
                  const cmp = getCmp(a.competenciaId);
                  return (
                    <div key={i} style={{ display: 'grid', gridTemplateColumns: '90px 2fr 1fr 90px 110px', gap: 10, padding: '10px 12px', background: 'white', border: '1px solid var(--border)', borderRadius: 8, alignItems: 'center' }}>
                      <span className="pill navy-soft mono" style={{ fontSize: 10.5, justifySelf: 'start' }}>{a.competenciaId}</span>
                      <div>
                        <div style={{ fontWeight: 600, fontSize: 12.5 }}>{cmp?.name || a.competenciaId}</div>
                        <div className="muted" style={{ fontSize: 11 }}>{cmp?.norma || '—'}</div>
                      </div>
                      <span className={`pill ${a.obligatoria ? 'rose' : 'amber'}`} style={{ fontSize: 10.5, justifySelf: 'start' }}>
                        {a.obligatoria ? 'Obligatoria' : 'Opcional'}
                      </span>
                      <span className="mono" style={{ fontSize: 11.5, color: 'var(--text-muted)' }}>{a.plazoDias} días</span>
                      <span className="mono" style={{ fontSize: 11, color: 'var(--text)', fontWeight: 600 }}>← {a.dueDate}</span>
                    </div>
                  );
                })}
              </div>
            </div>
          )}
        </div>
        <div className="modal-foot">
          <span className="muted mono" style={{ fontSize: 11, alignSelf: 'center' }}>
            Originada: ingreso · evaluación HOY {new Date().toLocaleDateString('es-CO')}
          </span>
          <div style={{ flex: 1 }} />
          <button className="btn primary" onClick={onClose}>Cerrar</button>
        </div>
      </div>
    </div>
  );
};

// ── Reassignment Engine: vencimientos detectados por evaluarVencimientos ───
const ReassignmentEngine = () => {
  // Demo: lista de empleados con sus certificados para correr el motor.
  // Idealmente vendría de un store global; aquí lo sintetizamos para mostrar
  // que la lógica es real (no hardcoded).
  const empleadosDemo = [
    {
      empleado: { id: 'E0205', nombre: 'Carlos Andrés Vélez', cargo: 'Operario de Clasificación' },
      certificados: [
        { competenciaId: 'CMP-01', vigenciaTo: '12/04/2027' },
        { competenciaId: 'CMP-02', vigenciaTo: '01/06/2026' },  // por vencer
        { competenciaId: 'CMP-03', vigenciaTo: '10/05/2024' },  // vencida
      ],
    },
    {
      empleado: { id: 'E0247', nombre: 'Andrés Felipe Mejía', cargo: 'Operario de Clasificación' },
      certificados: [
        { competenciaId: 'CMP-09', vigenciaTo: null },          // sin vencimiento (inducción)
        { competenciaId: 'CMP-11', vigenciaTo: '20/05/2026' },  // por vencer < 30
      ],
    },
    {
      empleado: { id: 'E0156', nombre: 'Paula Valencia Ríos', cargo: 'Téc. Mantenimiento' },
      certificados: [
        { competenciaId: 'CMP-04', vigenciaTo: '20/06/2026' },  // por vencer < 60
        { competenciaId: 'CMP-11', vigenciaTo: '15/01/2026' },  // vencida
      ],
    },
  ];

  const hoy = new Date();
  const filas = empleadosDemo.map(({ empleado, certificados }) => {
    const ev = (window.evaluarVencimientos || (() => ({ vigentes: [], vencidas: [], porVencer30: [], porVencer60: [], pendientes: [] })))(empleado, certificados, hoy);
    return { empleado, certificados, ev };
  });

  const totalVencidas    = filas.reduce((acc, f) => acc + f.ev.vencidas.length, 0);
  const totalPorVencer30 = filas.reduce((acc, f) => acc + f.ev.porVencer30.length, 0);
  const totalPorVencer60 = filas.reduce((acc, f) => acc + f.ev.porVencer60.length, 0);
  const totalPendientes  = filas.reduce((acc, f) => acc + f.ev.pendientes.length, 0);

  return (
    <>
      <div className="card" style={{ padding: 22, marginBottom: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 14 }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 4 }}>Reasignación automática · regla R-12</div>
            <div className="muted" style={{ fontSize: 13 }}>
              Cron diario 06:00 AM. Para cada empleado, el motor ejecuta <span className="mono">evaluarVencimientos(empleado, certificados, hoy)</span>
              sobre la matriz de su cargo y dispara reasignaciones para vencidas y alertas para próximos a vencer.
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 14, marginTop: 14 }}>
          <div style={{ flex: 1, padding: 12, background: '#FEF2F2', border: '1px solid var(--rose-600)', borderRadius: 10 }}>
            <div className="muted-xs">Vencidas (reasignar)</div>
            <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--rose-600)' }}>{totalVencidas}</div>
          </div>
          <div style={{ flex: 1, padding: 12, background: '#FEF9C3', border: '1px solid #B57609', borderRadius: 10 }}>
            <div className="muted-xs">Por vencer ≤ 30 días</div>
            <div style={{ fontSize: 22, fontWeight: 700, color: '#854D0E' }}>{totalPorVencer30}</div>
          </div>
          <div style={{ flex: 1, padding: 12, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 10 }}>
            <div className="muted-xs">Por vencer 31-60 días</div>
            <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--text)' }}>{totalPorVencer60}</div>
          </div>
          <div style={{ flex: 1, padding: 12, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 10 }}>
            <div className="muted-xs">Pendientes (sin certificar)</div>
            <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--text)' }}>{totalPendientes}</div>
          </div>
        </div>
      </div>

      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        <table className="doc-table">
          <thead>
            <tr>
              <th>Colaborador</th>
              <th>Cargo</th>
              <th style={{ textAlign: 'center' }}>Vencidas</th>
              <th style={{ textAlign: 'center' }}>Por vencer ≤30</th>
              <th style={{ textAlign: 'center' }}>Por vencer 31-60</th>
              <th style={{ textAlign: 'center' }}>Pendientes</th>
              <th>Acción del motor</th>
            </tr>
          </thead>
          <tbody>
            {filas.map(f => {
              const accion = f.ev.vencidas.length > 0
                ? `Reasignar ${f.ev.vencidas.length} (origen: vencimiento)`
                : f.ev.porVencer30.length > 0
                  ? `Alertar líder · ${f.ev.porVencer30.length} próx. a vencer`
                  : f.ev.pendientes.length > 0
                    ? `Asignar ${f.ev.pendientes.length} pendientes`
                    : 'Sin acción';
              return (
                <tr key={f.empleado.id}>
                  <td>
                    <div style={{ fontWeight: 600, fontSize: 12.5 }}>{f.empleado.nombre}</div>
                    <div className="muted mono" style={{ fontSize: 10.5 }}>{f.empleado.id}</div>
                  </td>
                  <td className="muted" style={{ fontSize: 12 }}>{f.empleado.cargo}</td>
                  <td style={{ textAlign: 'center' }}>
                    {f.ev.vencidas.length > 0
                      ? <span className="pill rose">{f.ev.vencidas.length}</span>
                      : <span className="muted">—</span>}
                  </td>
                  <td style={{ textAlign: 'center' }}>
                    {f.ev.porVencer30.length > 0
                      ? <span className="pill amber">{f.ev.porVencer30.length}</span>
                      : <span className="muted">—</span>}
                  </td>
                  <td style={{ textAlign: 'center' }}>
                    {f.ev.porVencer60.length > 0
                      ? <span className="pill navy">{f.ev.porVencer60.length}</span>
                      : <span className="muted">—</span>}
                  </td>
                  <td style={{ textAlign: 'center' }}>
                    {f.ev.pendientes.length > 0
                      ? <span className="pill amber">{f.ev.pendientes.length}</span>
                      : <span className="muted">—</span>}
                  </td>
                  <td style={{ fontSize: 12 }}>{accion}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
};

const LogsView = () => (
  <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
    <div className="logs-head">
      <div style={{ fontSize: 14, fontWeight: 700 }}>Logs de ejecución</div>
      <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
        <button className="btn" style={{ fontSize: 12 }}>Filtros</button>
        <button className="btn" style={{ fontSize: 12 }}>Exportar</button>
      </div>
    </div>
    <div className="logs-list mono">
      {[
        ['14:32:18.420', 'INFO', 'rule.exec', 'R-04 Ingreso Operaciones · empleado=E0247 · acciones=6 · duración=1.4s', 'ok'],
        ['14:06:11.118', 'INFO', 'rule.exec', 'R-04 Ingreso Operaciones · empleado=E0246 · acciones=5 · duración=1.6s', 'ok'],
        ['12:14:02.880', 'INFO', 'rule.exec', 'R-07 Cambio de cargo · empleado=E0142 · acciones=4 · duración=0.9s', 'ok'],
        ['09:18:42.001', 'INFO', 'webhook.in', 'POST /v1/employees · payload=874 bytes · 200 OK', 'ok'],
        ['06:00:00.012', 'INFO', 'cron.start', 'R-12 Monitor de vencimientos · scope=todos', 'ok'],
        ['06:00:01.844', 'INFO', 'rule.exec', 'R-12 Monitor de vencimientos · alertas=3 · duración=2.1s', 'ok'],
        ['16:42:08.612', 'ERROR', 'rule.exec', 'R-01 Ingreso Administrativo · empleado=E0244 · acción=epp falló: matriz vacía', 'err'],
        ['16:42:09.001', 'WARN',  'rule.partial', 'R-01 Ingreso Administrativo · 5 de 6 acciones completadas', 'warn'],
        ['11:08:33.221', 'INFO', 'rule.exec', 'R-05 Ingreso Calidad · empleado=E0245 · acciones=5 · duración=1.3s', 'ok'],
        ['08:00:00.014', 'INFO', 'cron.start', 'R-15 Cumpleaños y aniversarios · matches=3', 'ok'],
      ].map((l, i) => (
        <div key={i} className={`log-row ${l[4]}`}>
          <span className="log-time">{l[0]}</span>
          <span className={`log-level ${l[1].toLowerCase()}`}>{l[1]}</span>
          <span className="log-event">{l[2]}</span>
          <span className="log-msg">{l[3]}</span>
        </div>
      ))}
    </div>
  </div>
);

// ───────────────────────── New Rule modal ─────────────────────────
const NewRuleModal = ({ open, onClose }) => {
  const [step, setStep] = React.useState(1);
  const [name, setName] = React.useState('');
  const [trigger, setTrigger] = React.useState('create');
  const [conds, setConds] = React.useState([
    { field: 'area', op: 'equals', value: 'Operaciones' },
  ]);
  const [actions, setActions] = React.useState({ epp: true, training: true, sst: true, docs: true, onboarding: true, notif: false });

  React.useEffect(() => { if (open) { setStep(1); setName(''); } }, [open]);

  const addCond = () => setConds([...conds, { field: 'role', op: 'contains', value: '' }]);
  const updateCond = (i, k, v) => setConds(conds.map((c, j) => j === i ? { ...c, [k]: v } : c));
  const removeCond = (i) => setConds(conds.filter((_, j) => j !== i));

  const STEPS = ['Información', 'Disparador y condiciones', 'Acciones', 'Revisar'];

  const FIELDS = [
    ['area', 'Área'], ['site', 'Sede'], ['role', 'Cargo'],
    ['contract', 'Tipo de contrato'], ['salary', 'Salario base'], ['status', 'Estado'],
  ];
  const OPS = [
    ['equals', '='], ['not_equals', '≠'], ['contains', 'contiene'],
    ['in', '∈ {…}'], ['gt', '>'], ['lt', '<'],
  ];

  return (
    <Modal open={open} onClose={onClose}
      title="Nueva regla de automatización"
      subtitle="Define cuándo se dispara, qué condiciones aplica y qué acciones ejecuta el motor"
      width={840}
      footer={
        <>
          <button className="btn" onClick={onClose}>Cancelar</button>
          {step > 1 && step < 4 && <button className="btn" onClick={() => setStep(step - 1)}>Atrás</button>}
          {step < 4 && <button className="btn primary" onClick={() => setStep(step + 1)}>Continuar →</button>}
          {step === 4 && <button className="btn danger" onClick={onClose}><IconZap size={14} /> Crear regla y activar</button>}
        </>
      }>
      <div className="stepper">
        {STEPS.map((s, i) => (
          <div key={i} className={`step ${step === i + 1 ? 'active' : ''} ${step > i + 1 ? 'done' : ''}`}>
            <div className="step-num">{step > i + 1 ? <IconCheck size={12} /> : i + 1}</div>
            <span>{s}</span>
            {i < STEPS.length - 1 && <span className="step-line" />}
          </div>
        ))}
      </div>

      {step === 1 && (
        <div className="form-grid">
          <FormField label="Nombre de la regla" span={6}>
            <input className="form-input" placeholder='Ej. "Ingreso Operaciones Cali"' value={name} onChange={e => setName(e.target.value)} />
          </FormField>
          <FormField label="Descripción (opcional)" span={6}>
            <textarea className="form-input" rows={2} placeholder="Para qué sirve esta regla y a quién aplica" />
          </FormField>
          <FormField label="Prioridad de ejecución" span={3}>
            <select className="form-input"><option>Normal</option><option>Alta</option><option>Crítica</option></select>
          </FormField>
          <FormField label="Si falla una acción" span={3}>
            <select className="form-input"><option>Continuar con las demás</option><option>Detener regla</option></select>
          </FormField>
        </div>
      )}

      {step === 2 && (
        <div>
          <div className="rule-section-title">Disparador</div>
          <div className="trigger-grid">
            {[
              { id: 'create', icon: 'IconUsers', name: 'Al crear empleado', sub: 'Cuando se registra un nuevo colaborador' },
              { id: 'change', icon: 'IconArrowRight', name: 'Al cambiar cargo', sub: 'Promoción, traslado o reasignación' },
              { id: 'inactive', icon: 'IconUsers', name: 'Al cambiar estado', sub: 'Activo, inactivo, retirado' },
              { id: 'cron', icon: 'IconClock', name: 'Programado', sub: 'Diario, semanal, mensual a una hora fija' },
            ].map(t => {
              const Ico = { IconUsers, IconArrowRight, IconClock }[t.icon];
              return (
                <button key={t.id} className={`trigger-tile ${trigger === t.id ? 'active' : ''}`} onClick={() => setTrigger(t.id)}>
                  <div className="trigger-tile-icon"><Ico size={16} /></div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{t.name}</div>
                    <div className="muted" style={{ fontSize: 11.5 }}>{t.sub}</div>
                  </div>
                </button>
              );
            })}
          </div>

          {trigger === 'cron' && (
            <div className="form-grid" style={{ marginTop: 14 }}>
              <FormField label="Frecuencia" span={3}>
                <select className="form-input"><option>Diario</option><option>Semanal</option><option>Mensual</option></select>
              </FormField>
              <FormField label="Hora" span={3}>
                <input className="form-input" defaultValue="06:00" />
              </FormField>
            </div>
          )}

          <div className="rule-section-title" style={{ marginTop: 22 }}>Condiciones</div>
          <div className="muted" style={{ fontSize: 12.5, marginBottom: 10 }}>La regla se ejecuta cuando <b>todas</b> las condiciones se cumplen.</div>
          <div className="cond-builder">
            {conds.map((c, i) => (
              <div key={i} className="cond-row">
                {i > 0 && <span className="cond-and">Y</span>}
                <select className="cond-select" value={c.field} onChange={e => updateCond(i, 'field', e.target.value)}>
                  {FIELDS.map(([id, lbl]) => <option key={id} value={id}>{lbl}</option>)}
                </select>
                <select className="cond-op" value={c.op} onChange={e => updateCond(i, 'op', e.target.value)}>
                  {OPS.map(([id, lbl]) => <option key={id} value={id}>{lbl}</option>)}
                </select>
                <input className="form-input cond-value" value={c.value} onChange={e => updateCond(i, 'value', e.target.value)} placeholder="Valor" />
                {conds.length > 1 && (
                  <button className="icon-btn" onClick={() => removeCond(i)} title="Eliminar condición">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12" /></svg>
                  </button>
                )}
              </div>
            ))}
            <button className="btn" onClick={addCond} style={{ alignSelf: 'flex-start', fontSize: 12.5 }}>
              <IconPlus size={13} /> Añadir condición
            </button>
          </div>
        </div>
      )}

      {step === 3 && (
        <div>
          <div className="rule-section-title">Acciones a ejecutar</div>
          <div className="muted" style={{ fontSize: 12.5, marginBottom: 12 }}>Selecciona los grupos de obligaciones que generará el motor cuando se cumpla la regla.</div>
          <div className="action-grid">
            {[
              { id: 'epp', icon: 'IconShirt', name: 'Asignar dotación', sub: 'Items según matriz por cargo' },
              { id: 'training', icon: 'IconBook', name: 'Asignar capacitaciones', sub: 'Cursos obligatorios e inducción' },
              { id: 'sst', icon: 'IconShield', name: 'Programar exámenes SST', sub: 'Médicos y específicos por riesgo' },
              { id: 'docs', icon: 'IconDoc', name: 'Generar documentos', sub: 'Contratos, políticas y firmas' },
              { id: 'onboarding', icon: 'IconRocket', name: 'Crear checklist onboarding', sub: 'Plantilla por cargo · 6–12 pasos' },
              { id: 'notif', icon: 'IconMegaphone', name: 'Enviar notificaciones', sub: 'Líder, almacén, SST, TI' },
            ].map(a => {
              const Ico = { IconShirt, IconBook, IconShield, IconDoc, IconRocket, IconMegaphone }[a.icon];
              const on = actions[a.id];
              return (
                <label key={a.id} className={`action-tile ${on ? 'active' : ''}`}>
                  <input type="checkbox" checked={on} onChange={(e) => setActions({ ...actions, [a.id]: e.target.checked })} />
                  <div className={`tl-action-icon ${ACTION_KINDS[a.id]?.cls || 'navy'}`}><Ico size={15} /></div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{a.name}</div>
                    <div className="muted" style={{ fontSize: 11.5 }}>{a.sub}</div>
                  </div>
                </label>
              );
            })}
          </div>
        </div>
      )}

      {step === 4 && (
        <div>
          <div className="review-card">
            <div style={{ width: '100%', textAlign: 'left' }}>
              <div className="muted" style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Regla a crear</div>
              <div style={{ fontSize: 18, fontWeight: 700, marginTop: 4 }}>{name || 'Sin nombre'}</div>
            </div>
            <div className="review-grid" style={{ width: '100%' }}>
              <div><div className="lbl">Disparador</div><div className="val">{trigger === 'create' ? 'Al crear empleado' : trigger === 'change' ? 'Al cambiar cargo' : trigger === 'inactive' ? 'Al cambiar estado' : 'Programado'}</div></div>
              <div><div className="lbl">Condiciones</div><div className="val">{conds.length} configurada{conds.length !== 1 ? 's' : ''}</div></div>
              <div><div className="lbl">Acciones</div><div className="val">{Object.values(actions).filter(Boolean).length} grupo{Object.values(actions).filter(Boolean).length !== 1 ? 's' : ''}</div></div>
            </div>
          </div>
          <div className="engine-preview" style={{ marginTop: 16 }}>
            <div className="engine-preview-head">
              <span className="engine-badge"><span className="dot" />Vista previa de la regla</span>
              <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>Estimado por evento</span>
            </div>
            <ul className="engine-list">
              {actions.epp && <li><IconShirt size={14} /> Asigna dotación según matriz del cargo</li>}
              {actions.training && <li><IconBook size={14} /> Inscribe en capacitaciones obligatorias</li>}
              {actions.sst && <li><IconShield size={14} /> Programa exámenes SST aplicables</li>}
              {actions.docs && <li><IconDoc size={14} /> Genera documentos para firma del colaborador</li>}
              {actions.onboarding && <li><IconRocket size={14} /> Crea checklist de onboarding por cargo</li>}
              {actions.notif && <li><IconMegaphone size={14} /> Notifica a Líder · Almacén · SST · TI</li>}
            </ul>
          </div>
        </div>
      )}
    </Modal>
  );
};

window.Automation = Automation;