// Employee Detail — full profile with tabs and side panel
const TABS = [
  { id: 'personal',    label: 'Información personal' },
  { id: 'contract',    label: 'Contrato' },
  { id: 'docs',        label: 'Documentos',          badge: { count: 2, tone: 'amber' } },
  { id: 'training',    label: 'Capacitaciones' },
  { id: 'sst',         label: 'SST',                 badge: { count: 'OK', tone: 'green' } },
  { id: 'epp',         label: 'Dotación',            badge: { count: 2, tone: 'amber' } },
  { id: 'timeoff',     label: 'Vacaciones',          badge: { count: 12, tone: 'navy' } },
  { id: 'payroll',     label: 'Nómina' },
  { id: 'comms',       label: 'Comunicaciones' },
  { id: 'performance', label: 'Desempeño' },
  { id: 'onboarding',  label: 'Onboarding',          badge: { count: '50%', tone: 'amber' } },
];

const Field = ({ label, value, mono, editing, onChange, options, locked }) => {
  if (editing && !locked) {
    return (
      <div className="furat-row">
        <label className="furat-label">{label}</label>
        {options ? (
          <select value={value} onChange={e => onChange(e.target.value)}>
            {options.map(o => <option key={o} value={o}>{o}</option>)}
          </select>
        ) : (
          <input type="text" className={mono ? 'mono' : ''} value={value} onChange={e => onChange(e.target.value)} />
        )}
      </div>
    );
  }
  return (
    <div className="field">
      <div className="field-lbl">
        {label}
        {editing && locked && <IconShield size={10} style={{ marginLeft: 4, opacity: 0.45, verticalAlign: -1 }} title="Gestionado por RRHH" />}
      </div>
      <div className={`field-val ${mono ? 'mono' : ''}`}>{value}</div>
    </div>
  );
};

// Valores de referencia para campos personales que aún no existen en el
// registro real del empleado (EMPLOYEES) — se adoptan como valor inicial
// al editar y quedan guardados en el empleado la primera vez que se edita.
const EMP_PERSONAL_DEFAULTS = {
  birthDate: '14 de marzo, 1994',
  birthPlace: 'Cali, Valle del Cauca',
  gender: 'Masculino',
  maritalStatus: 'Soltero',
  bloodType: 'O+',
  education: 'Técnico SENA',
  personalEmail: 'andres.mejia94@gmail.com',
  email: 'andres.mejia@atica.co',
  phone: '+57 311 456 7821',
  landline: '+57 (606) 334 8821',
  address: 'Cra 14 #22-45, Cali',
  emergencyContact: 'Luz Marina Mejía · +57 311 887 4421 (madre)',
};

const SectionTitle = ({ children, action }) => (
  <div className="emp-section-title">
    <h4>{children}</h4>
    {action}
  </div>
);

// ─────── Tab: Personal ───────
const TabPersonal = ({ emp, display, editing, onChange, lockedFields = [] }) => {
  const locked = (k) => lockedFields.includes(k);
  return (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
    <div>
      <SectionTitle>Datos básicos</SectionTitle>
      <div className="field-grid">
        <Field label="Nombre completo" value={display.name} editing={editing} locked={locked('name')} onChange={v => onChange('name', v)} />
        <Field label="Tipo y número de documento" value={display.doc} mono editing={editing} locked={locked('doc')} onChange={v => onChange('doc', v)} />
        <Field label="Fecha de nacimiento" value={display.birthDate} editing={editing} locked={locked('birthDate')} onChange={v => onChange('birthDate', v)} />
        <Field label="Lugar de nacimiento" value={display.birthPlace} editing={editing} locked={locked('birthPlace')} onChange={v => onChange('birthPlace', v)} />
        <Field label="Género" value={display.gender} editing={editing} locked={locked('gender')} onChange={v => onChange('gender', v)} options={['Masculino', 'Femenino', 'Otro', 'Prefiere no decir']} />
        <Field label="Estado civil" value={display.maritalStatus} editing={editing} locked={locked('maritalStatus')} onChange={v => onChange('maritalStatus', v)} options={['Soltero', 'Casado', 'Unión libre', 'Divorciado', 'Viudo']} />
        <Field label="Tipo de sangre" value={display.bloodType} editing={editing} locked={locked('bloodType')} onChange={v => onChange('bloodType', v)} />
        <Field label="Nivel educativo" value={display.education} editing={editing} locked={locked('education')} onChange={v => onChange('education', v)} />
      </div>
    </div>
    <div>
      <SectionTitle>Contacto</SectionTitle>
      <div className="field-grid">
        <Field label="Correo personal" value={display.personalEmail} editing={editing} locked={locked('personalEmail')} onChange={v => onChange('personalEmail', v)} />
        <Field label="Correo corporativo" value={display.email} editing={editing} locked={locked('email')} onChange={v => onChange('email', v)} />
        <Field label="Celular" value={display.phone} mono editing={editing} locked={locked('phone')} onChange={v => onChange('phone', v)} />
        <Field label="Teléfono fijo" value={display.landline} mono editing={editing} locked={locked('landline')} onChange={v => onChange('landline', v)} />
        <Field label="Dirección" value={display.address} editing={editing} locked={locked('address')} onChange={v => onChange('address', v)} />
        <Field label="Contacto de emergencia" value={display.emergencyContact} editing={editing} locked={locked('emergencyContact')} onChange={v => onChange('emergencyContact', v)} />
      </div>
    </div>
    <div>
      <SectionTitle>Documentos de identidad</SectionTitle>
      <div className="doc-list">
        <div className="doc-mini"><IconDoc size={16} /><span>Cédula de ciudadanía — frente</span><span className="muted mono" style={{ marginLeft: 'auto' }}>PDF · 1.2 MB</span></div>
        <div className="doc-mini"><IconDoc size={16} /><span>Cédula de ciudadanía — reverso</span><span className="muted mono" style={{ marginLeft: 'auto' }}>PDF · 1.1 MB</span></div>
        <div className="doc-mini"><IconDoc size={16} /><span>Libreta militar</span><span className="muted mono" style={{ marginLeft: 'auto' }}>PDF · 0.8 MB</span></div>
        <div className="doc-mini"><IconDoc size={16} /><span>RUT actualizado</span><span className="muted mono" style={{ marginLeft: 'auto' }}>PDF · 0.4 MB</span></div>
      </div>
    </div>
    <div>
      <SectionTitle action={<button className="btn" style={{ padding: '5px 10px', fontSize: 12 }}>Editar</button>}>Cuenta bancaria y afiliaciones</SectionTitle>
      <div className="field-grid">
        <Field label="Banco" value="Bancolombia" />
        <Field label="Tipo de cuenta" value="Ahorros" />
        <Field label="Número de cuenta" value="•••• •••• 4821" mono />
        <Field label="Titular" value="Andrés Felipe Mejía" />
        <Field label="EPS" value="SURA" />
        <Field label="AFP" value="Protección" />
        <Field label="Cesantías" value="Porvenir" />
        <Field label="ARL" value="SURA — Clase IV" />
        <Field label="Caja de compensación" value="Comfamiliar Valle del Cauca" />
      </div>
    </div>
  </div>
  );
};

// ─────── Tab: Contract ───────
const NOVELTIES = [
  { date: '12 may 2026', title: 'Inicio de contrato', sub: 'Fijo a término · 6 meses · período prueba 60 días', kind: 'start' },
  { date: '15 may 2026', title: 'Asignación al cargo', sub: 'Operario de Clasificación · CC Operaciones Cali', kind: 'normal' },
  { date: '22 may 2026', title: 'Vinculación a turno rotativo', sub: 'Turno A — 6:00 a 14:00, lun a sáb', kind: 'normal' },
];

const TabContract = ({ emp }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
    <div>
      <SectionTitle action={<button className="btn" style={{ padding: '5px 10px', fontSize: 12 }}>Generar otrosí</button>}>Contrato actual</SectionTitle>
      <div className="contract-card">
        <div className="contract-stat">
          <div className="contract-stat-lbl">Tipo</div>
          <div className="contract-stat-val">Fijo a término</div>
          <div className="muted" style={{ fontSize: 11.5 }}>6 meses · renovable</div>
        </div>
        <div className="contract-stat">
          <div className="contract-stat-lbl">Inicio</div>
          <div className="contract-stat-val mono">12/05/2026</div>
          <div className="muted" style={{ fontSize: 11.5 }}>hace 0 días</div>
        </div>
        <div className="contract-stat">
          <div className="contract-stat-lbl">Vencimiento</div>
          <div className="contract-stat-val mono">12/11/2026</div>
          <div className="muted" style={{ fontSize: 11.5 }}>en 191 días</div>
        </div>
        <div className="contract-stat">
          <div className="contract-stat-lbl">Salario base</div>
          <div className="contract-stat-val mono">$ 1.620.000</div>
          <div className="muted" style={{ fontSize: 11.5 }}>+ aux. transporte</div>
        </div>
        <div className="contract-stat">
          <div className="contract-stat-lbl">Período de prueba</div>
          <div className="contract-stat-val">60 días</div>
          <div className="muted" style={{ fontSize: 11.5 }}>Termina 11/07/2026</div>
        </div>
        <div className="contract-stat">
          <div className="contract-stat-lbl">Jornada</div>
          <div className="contract-stat-val">Tiempo completo</div>
          <div className="muted" style={{ fontSize: 11.5 }}>Turno rotativo A</div>
        </div>
      </div>
    </div>
    <div>
      <SectionTitle>Historial de novedades</SectionTitle>
      <div className="ed-timeline">
        {NOVELTIES.map((n, i) => (
          <div key={i} className="ed-tl-item">
            <span className={`ed-tl-dot ${n.kind}`} />
            <div className="ed-tl-body">
              <div className="ed-tl-date mono">{n.date}</div>
              <div className="ed-tl-title">{n.title}</div>
              <div className="ed-tl-sub">{n.sub}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// ─────── Tab: Docs ───────
const ED_DOCS = [
  { name: 'Contrato de trabajo', signed: 'Firmado', date: '12/05/2026', state: 'ok' },
  { name: 'Acuerdo de confidencialidad', signed: 'Firmado', date: '12/05/2026', state: 'ok' },
  { name: 'Política de tratamiento de datos', signed: 'Firmado', date: '12/05/2026', state: 'ok' },
  { name: 'Reglamento interno de trabajo', signed: 'Firmado', date: '12/05/2026', state: 'ok' },
  { name: 'Política antifraude y antisoborno', signed: 'Pendiente', date: '—', state: 'pending' },
  { name: 'Acta de entrega de dotación 2026-Q2', signed: 'Pendiente', date: '—', state: 'pending' },
  { name: 'Examen médico de ingreso', signed: 'Vigente', date: '08/05/2026', state: 'ok' },
];

const TabDocs = () => (
  <div>
    <div style={{ display: 'flex', gap: 12, marginBottom: 16 }}>
      <div className="stat-tile"><div className="stat-num">5</div><div className="stat-lbl">Firmados</div></div>
      <div className="stat-tile"><div className="stat-num" style={{ color: 'var(--amber-600)' }}>2</div><div className="stat-lbl">Pendientes</div></div>
      <div className="stat-tile"><div className="stat-num" style={{ color: 'var(--aguila-600)' }}>0</div><div className="stat-lbl">Vencidos</div></div>
    </div>
    <table className="data-table">
      <thead><tr><th>Documento</th><th>Estado</th><th>Fecha</th><th></th></tr></thead>
      <tbody>
        {ED_DOCS.map((d, i) => (
          <tr key={i}>
            <td><div style={{ display: 'flex', alignItems: 'center', gap: 10 }}><IconDoc size={16} /><span style={{ fontWeight: 500 }}>{d.name}</span></div></td>
            <td><span className={`pill ${d.state === 'ok' ? 'green' : 'amber'}`}>{d.signed}</span></td>
            <td className="mono muted">{d.date}</td>
            <td style={{ textAlign: 'right' }}><button className="btn" style={{ padding: '4px 10px', fontSize: 12 }}>Ver</button></td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

// ─────── Tab: Training (ICONTEC-ready) ───────
// Delegates to <TrainingProfile/> defined in components/competencias.jsx
const TabTraining = ({ employeeId, employeeRole }) => (
  <TrainingProfile empId={employeeId || 'E0205'} cargo={employeeRole} />
);

// ─────── Tab: SST ───────
const TabSst = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
    <div>
      <SectionTitle>Exámenes médicos ocupacionales</SectionTitle>
      <table className="data-table">
        <thead><tr><th>Examen</th><th>Última fecha</th><th>Próximo</th><th>Estado</th></tr></thead>
        <tbody>
          <tr><td>Ingreso ocupacional</td><td className="mono muted">08/05/2026</td><td className="mono muted">N/A</td><td><span className="pill green">Vigente</span></td></tr>
          <tr><td>Audiometría</td><td className="mono muted">08/05/2026</td><td className="mono muted">08/05/2027</td><td><span className="pill green">Vigente</span></td></tr>
          <tr><td>Espirometría</td><td className="mono muted">08/05/2026</td><td className="mono muted">08/05/2027</td><td><span className="pill green">Vigente</span></td></tr>
          <tr><td>Visiometría</td><td className="mono muted">08/05/2026</td><td className="mono muted">08/05/2027</td><td><span className="pill green">Vigente</span></td></tr>
        </tbody>
      </table>
    </div>
    <div>
      <SectionTitle>Incapacidades</SectionTitle>
      <div className="empty-state">
        <IconCheck size={28} style={{ color: 'var(--green-600)' }} />
        <div>Sin incapacidades registradas</div>
      </div>
    </div>
    <div>
      <SectionTitle>Accidentes de trabajo</SectionTitle>
      <div className="empty-state">
        <IconCheck size={28} style={{ color: 'var(--green-600)' }} />
        <div>Sin accidentes registrados</div>
      </div>
    </div>
  </div>
);

// ─────── Tab: ED_EPP ───────
const ED_EPP = [
  { item: 'Uniforme corporativo (camisa + pantalón)', qty: 3, delivered: 3, state: 'ok' },
  { item: 'Botas de seguridad con puntera', qty: 2, delivered: 2, state: 'ok' },
  { item: 'Casco industrial', qty: 1, delivered: 1, state: 'ok' },
  { item: 'Tapa oídos auditivos', qty: 6, delivered: 6, state: 'ok' },
  { item: 'Guantes térmicos para clasificación', qty: 3, delivered: 0, state: 'pending' },
  { item: 'Mascarilla N95 (caja)', qty: 2, delivered: 0, state: 'pending' },
  { item: 'Gafas de seguridad', qty: 2, delivered: 2, state: 'ok' },
];

const TabEpp = () => (
  <div>
    <div style={{ display: 'flex', gap: 12, marginBottom: 16 }}>
      <div className="stat-tile"><div className="stat-num">5</div><div className="stat-lbl">Items entregados</div></div>
      <div className="stat-tile"><div className="stat-num" style={{ color: 'var(--amber-600)' }}>2</div><div className="stat-lbl">Pendientes</div></div>
      <div className="stat-tile"><div className="stat-num">7</div><div className="stat-lbl">Total asignado</div></div>
    </div>
    <table className="data-table">
      <thead><tr><th>Ítem (matriz por cargo)</th><th>Cantidad</th><th>Entregado</th><th>Estado</th></tr></thead>
      <tbody>
        {ED_EPP.map((e, i) => (
          <tr key={i}>
            <td style={{ fontWeight: 500 }}>{e.item}</td>
            <td className="mono">{e.qty}</td>
            <td className="mono">{e.delivered}/{e.qty}</td>
            <td><span className={`pill ${e.state === 'ok' ? 'green' : 'amber'}`}>{e.state === 'ok' ? 'Entregado' : 'Pendiente'}</span></td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

// ─────── Tab: Vacaciones ───────
const TabTimeoff = () => (
  <div>
    <SectionTitle action={<button className="btn primary" style={{ padding: '5px 12px', fontSize: 12.5 }}><IconPlus size={13} /> Solicitar vacaciones</button>}>Saldos al 05/05/2026</SectionTitle>
    <div className="vac-overview">
      <div>
        <div className="vac-lbl">Días disponibles</div>
        <div className="vac-num">12<span style={{ fontSize: 14, color: 'var(--text-muted)', marginLeft: 6 }}>/ 15</span></div>
        <div className="vac-bar"><span style={{ width: '80%' }} /></div>
        <div className="vac-sub">Causados desde 12/05/2025</div>
      </div>
      <div>
        <div className="vac-lbl">Días tomados (año)</div>
        <div className="vac-num" style={{ color: 'var(--green-600)' }}>3</div>
        <div className="vac-sub">Última: 14–16 ene 2026</div>
      </div>
      <div>
        <div className="vac-lbl">Próxima causación</div>
        <div className="vac-num" style={{ fontSize: 22, color: 'var(--text)' }}>1.25 d</div>
        <div className="vac-sub">El 31/05/2026</div>
      </div>
      <div>
        <div className="vac-lbl">Antigüedad</div>
        <div className="vac-num" style={{ fontSize: 22, color: 'var(--text)' }}>0a 0m</div>
        <div className="vac-sub">Sin acumulado anterior</div>
      </div>
    </div>

    <SectionTitle>Próximas ausencias</SectionTitle>
    <table className="data-table">
      <thead><tr><th>Tipo</th><th>Inicio</th><th>Fin</th><th>Días</th><th>Estado</th><th></th></tr></thead>
      <tbody>
        <tr>
          <td><span className="pill navy">Vacaciones</span></td>
          <td className="mono">15/06/2026</td>
          <td className="mono">19/06/2026</td>
          <td className="mono">5</td>
          <td><span className="pill amber">Pendiente aprobación</span></td>
          <td style={{ textAlign: 'right' }}><button className="btn" style={{ padding: '4px 10px', fontSize: 12 }}>Ver</button></td>
        </tr>
      </tbody>
    </table>

    <SectionTitle>Histórico</SectionTitle>
    <table className="data-table">
      <thead><tr><th>Tipo</th><th>Período</th><th>Días</th><th>Aprobado por</th><th>Estado</th></tr></thead>
      <tbody>
        <tr>
          <td><span className="pill navy">Vacaciones</span></td>
          <td className="mono muted">14/01/2026 → 16/01/2026</td>
          <td className="mono">3</td>
          <td>Luis Miguel Marín</td>
          <td><span className="pill green">Tomadas</span></td>
        </tr>
        <tr>
          <td><span className="pill" style={{ background: 'var(--amber-100)', color: 'var(--amber-600)' }}>Permiso remunerado</span></td>
          <td className="mono muted">02/12/2025</td>
          <td className="mono">0.5</td>
          <td>Luis Miguel Marín</td>
          <td><span className="pill green">Aprobado</span></td>
        </tr>
      </tbody>
    </table>
  </div>
);

// ─────── Tab: Nómina ───────
const TabPayroll = () => (
  <div>
    <SectionTitle action={<button className="btn" style={{ padding: '5px 10px', fontSize: 12 }}><IconDoc size={13} /> Ver desprendibles</button>}>Compensación actual</SectionTitle>
    <div className="pay-summary">
      <div className="pay-summary-card">
        <div className="lbl">Salario base</div>
        <div className="val mono">$ 1.620.000</div>
        <div className="sub">Mensual · SMMLV × 1.14</div>
      </div>
      <div className="pay-summary-card">
        <div className="lbl">Aux. transporte</div>
        <div className="val mono">$ 200.000</div>
        <div className="sub">Aplica · ≤ 2 SMMLV</div>
      </div>
      <div className="pay-summary-card">
        <div className="lbl">Total devengado</div>
        <div className="val mono" style={{ color: 'var(--green-600)' }}>$ 1.820.000</div>
        <div className="sub">Antes de deducciones</div>
      </div>
      <div className="pay-summary-card">
        <div className="lbl">Neto pagado abr/2026</div>
        <div className="val mono">$ 1.566.500</div>
        <div className="sub">Tras EPS + AFP + retención</div>
      </div>
    </div>

    <SectionTitle>Acumulados de prestaciones (a hoy)</SectionTitle>
    <div className="accruals-grid">
      <div className="accrual"><span className="k">Cesantías acumuladas</span><span className="v mono">$ 137.250</span></div>
      <div className="accrual"><span className="k">Intereses cesantías</span><span className="v mono">$ 4.470</span></div>
      <div className="accrual"><span className="k">Prima legal (sem. 1)</span><span className="v mono">$ 137.250</span></div>
      <div className="accrual"><span className="k">Vacaciones (en pesos)</span><span className="v mono">$ 540.000</span></div>
    </div>

    <SectionTitle>Histórico de pagos</SectionTitle>
    <table className="data-table">
      <thead><tr><th>Período</th><th>Devengado</th><th>Deducciones</th><th>Neto</th><th>Pagado</th><th></th></tr></thead>
      <tbody>
        {[
          ['abril 2026',     '1.820.000', '253.500', '1.566.500', '30/04/2026'],
          ['marzo 2026',     '1.820.000', '253.500', '1.566.500', '30/03/2026'],
          ['febrero 2026',   '1.820.000', '253.500', '1.566.500', '28/02/2026'],
          ['enero 2026',     '1.820.000', '253.500', '1.566.500', '30/01/2026'],
        ].map((r, i) => (
          <tr key={i}>
            <td style={{ fontWeight: 500 }}>{r[0]}</td>
            <td className="mono">$ {r[1]}</td>
            <td className="mono muted">$ {r[2]}</td>
            <td className="mono" style={{ fontWeight: 700 }}>$ {r[3]}</td>
            <td className="mono muted">{r[4]}</td>
            <td style={{ textAlign: 'right' }}><button className="btn" style={{ padding: '4px 10px', fontSize: 12 }}><IconDoc size={12} /> Desprendible</button></td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

// ─────── Tab: Comunicaciones ───────
const TabComms = () => (
  <div>
    <SectionTitle>Comunicaciones recibidas</SectionTitle>
    <div>
      <div className="comm-row kind-launch">
        <div className="comm-icon"><IconRocket size={16} /></div>
        <div>
          <div className="comm-ttl">Bienvenida a Atica</div>
          <div className="comm-sub">Carta de bienvenida + accesos · automático del onboarding</div>
        </div>
        <div className="comm-channel"><IconMegaphone size={12} /> Email + Portal</div>
        <div className="comm-state"><span className="pill green">✓ Leída</span><div className="muted mono" style={{ fontSize: 11, marginTop: 4 }}>12/05/2026</div></div>
      </div>
      <div className="comm-row kind-event">
        <div className="comm-icon"><IconCalendar size={16} /></div>
        <div>
          <div className="comm-ttl">Inducción corporativa — 16 mayo</div>
          <div className="comm-sub">Citación auditorio sede Cali, 7:30 a.m.</div>
        </div>
        <div className="comm-channel"><IconMegaphone size={12} /> Email + SMS</div>
        <div className="comm-state"><span className="pill green">✓ Confirmada</span><div className="muted mono" style={{ fontSize: 11, marginTop: 4 }}>13/05/2026</div></div>
      </div>
      <div className="comm-row kind-survey">
        <div className="comm-icon"><IconStar size={16} /></div>
        <div>
          <div className="comm-ttl">Encuesta de clima 2026 - Q2</div>
          <div className="comm-sub">5 minutos · anónima · cierre 31/05</div>
        </div>
        <div className="comm-channel"><IconMegaphone size={12} /> Portal</div>
        <div className="comm-state"><span className="pill amber">Pendiente</span><div className="muted mono" style={{ fontSize: 11, marginTop: 4 }}>04/05/2026</div></div>
      </div>
      <div className="comm-row">
        <div className="comm-icon"><IconShield size={16} /></div>
        <div>
          <div className="comm-ttl">Política de seguridad alimentaria — actualización</div>
          <div className="comm-sub">Lectura obligatoria + acuse</div>
        </div>
        <div className="comm-channel"><IconMegaphone size={12} /> Portal</div>
        <div className="comm-state"><span className="pill green">✓ Acuse firmado</span><div className="muted mono" style={{ fontSize: 11, marginTop: 4 }}>02/05/2026</div></div>
      </div>
      <div className="comm-row">
        <div className="comm-icon"><IconBell size={16} /></div>
        <div>
          <div className="comm-ttl">Recordatorio: examen médico de ingreso</div>
          <div className="comm-sub">Cita 08/05 — Centro Médico Cali</div>
        </div>
        <div className="comm-channel"><IconMegaphone size={12} /> SMS</div>
        <div className="comm-state"><span className="pill green">✓ Entregada</span><div className="muted mono" style={{ fontSize: 11, marginTop: 4 }}>05/05/2026</div></div>
      </div>
    </div>
  </div>
);

// ─────── Tab: Performance ───────
// Vista del jefe / RRHH sobre la ficha del empleado.
// Muestra ciclos en los que participa, objetivos vigentes, incidentes,
// kudos recibidos/dados, próximos 1-on-1 y PIP si activo.
const TabPerformance = ({ empId: empIdProp, employeeRole }) => {
  const empId = empIdProp || 'E0247';
  // Resolver cargoId desde PERSONAS_DESEMPENO o desde el rol del empleado
  const persona = (window.PERSONAS_DESEMPENO || {})[empId];
  const cargoFromRol = (window.CARGOS || []).find(c => c.nombre === employeeRole);
  const cargoId = persona?.cargoId || cargoFromRol?.id || 'CGO-001';
  const objetivos  = (window.objetivosVigentesPara && window.objetivosVigentesPara(empId)) || [];
  const incidentes = (window.incidentesVisiblesPara && window.incidentesVisiblesPara(empId)) || [];
  const kudosIn    = (window.kudosRecibidos && window.kudosRecibidos(empId)) || [];
  const proximo    = (window.proximo1on1 && window.proximo1on1(empId)) || null;
  const ultimos    = (window.ultimos1on1 && window.ultimos1on1(empId, 3)) || [];
  const pip        = (window.pipActivoPara && window.pipActivoPara(empId)) || null;
  const competencias = (window.cargoToCompetenciasConductuales && window.cargoToCompetenciasConductuales(cargoId)) || [];

  // Ciclos en los que participa
  const ciclos = (window.CICLOS_EVALUACION || []).filter(c => {
    if (c.audiencia.tipo === 'todos') return true;
    if (c.audiencia.tipo === 'individual') return false; // mock: no resuelve criterio
    return false;
  });

  return (
    <div>
      {/* Banner Habeas Data interno */}
      <div className="td-habeas">
        <IconShield size={14} />
        <div>
          <b>Datos de desempeño · uso interno</b>
          <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>
            Estos datos sustentan decisiones de talento (CST · Ley 2466/2025). Acceso limitado a RRHH y jefe directo.
            El colaborador tiene derecho a ver y descargar todos sus datos (Habeas Data Ley 1581/2012).
          </div>
        </div>
      </div>

      {/* Ciclos vigentes */}
      <SectionTitle>Ciclos en los que participa</SectionTitle>
      <div className="td-ciclos">
        {ciclos.map(c => (
          <div key={c.id} className="td-ciclo-row">
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 700, fontSize: 13 }}>{c.nombre}</div>
              <div className="muted mono" style={{ fontSize: 11 }}>
                {c.periodo.inicio} → {c.periodo.fin} · {c.estado}
              </div>
              <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginTop: 6 }}>
                {window.MetodologiaChip
                  ? c.metodologias.map(m => <MetodologiaChip key={m} id={m} size="sm" />)
                  : c.metodologias.map(m => <span key={m} className="pill navy" style={{ fontSize: 10 }}>{m}</span>)}
              </div>
            </div>
            <div className="mono" style={{ fontSize: 13, fontWeight: 700 }}>{c.completitudPct}%</div>
          </div>
        ))}
      </div>

      {/* Objetivos S1 */}
      <SectionTitle action={<button className="btn" style={{ padding: '5px 10px', fontSize: 12 }}>+ Nuevo objetivo</button>}>
        Objetivos vigentes
      </SectionTitle>
      <div className="td-objs">
        {objetivos.map(o => {
          const tone = o.logroPct >= 90 ? 'green' : o.logroPct >= 70 ? 'amber' : 'rose';
          return (
            <div key={o.id} className="td-obj-row">
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="muted mono" style={{ fontSize: 10.5 }}>{o.id}</div>
                <div style={{ fontWeight: 700, fontSize: 13.5 }}>{o.descripcion}</div>
                <div className="muted" style={{ fontSize: 11.5, marginTop: 3 }}>
                  Meta: <b style={{ color: 'var(--text)' }}>{o.target} {o.unidad}</b> · peso {Math.round(o.peso * 100)}%
                </div>
              </div>
              <div className={`pd-obj-pct ${tone}`}>{o.logroPct}<small>%</small></div>
            </div>
          );
        })}
      </div>

      {/* Competencias del cargo · niveles esperados */}
      <SectionTitle>Competencias conductuales del cargo</SectionTitle>
      <div className="td-comps">
        {competencias.map(c => (
          <div key={c.id} className="td-comp-row">
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 700, fontSize: 13 }}>{c.nombre}</div>
              <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>
                Nivel esperado: <b style={{ color: 'var(--text)' }}>{c.nivelEsperado}/5</b> · peso {Math.round(c.peso * 100)}%
              </div>
            </div>
            <span className={`td-nivel-badge n-${c.nivelEsperado}`}>{c.nivelEsperado}</span>
          </div>
        ))}
      </div>

      {/* Incidentes */}
      <SectionTitle action={
        <button className="btn primary" style={{ padding: '5px 10px', fontSize: 12 }}
          onClick={() => window.IncidenteCaptureModal && (window.__openIncCapture = true)}>
          + Registrar incidente
        </button>
      }>
        Incidentes críticos del período · {incidentes.length}
      </SectionTitle>
      {incidentes.length === 0 ? (
        <div className="muted" style={{ fontSize: 12, padding: '4px 0' }}>Sin incidentes registrados.</div>
      ) : (
        <div className="td-inc-list">
          {incidentes.map(i => (
            <div key={i.id} className={`pd-inc-row ${i.tipo}`}>
              <span className={`pd-inc-icon ${i.tipo}`}>{i.tipo === 'positivo' ? '+' : '!'}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12.5, fontWeight: 600 }}>{i.descripcion}</div>
                <div className="muted" style={{ fontSize: 10.5, marginTop: 2 }}>
                  {i.fecha} · {i.severidad} · {i.autorNombre}
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* PIP */}
      {pip && (
        <>
          <SectionTitle>Plan de desarrollo activo</SectionTitle>
          <div className="td-pip">
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span className="pill green" style={{ fontSize: 10 }}>activo · firmado</span>
              <span className="muted mono" style={{ fontSize: 11 }}>{pip.id} · vigencia {pip.vigenciaHasta}</span>
            </div>
            <div style={{ marginTop: 10 }}>
              {pip.objetivosMejora.map((o, i) => (
                <div key={i} className="pd-pip-objeto">
                  <IconCheck size={11} />
                  <span>{o.descripcion}</span>
                  <span className="muted mono" style={{ fontSize: 10.5, marginLeft: 'auto' }}>{o.plazo}</span>
                </div>
              ))}
            </div>
          </div>
        </>
      )}

      {/* 1-on-1 + Kudos */}
      <div className="td-2col">
        <div>
          <SectionTitle>Próximo 1-on-1</SectionTitle>
          {proximo ? (
            <div className="td-1o1">
              <div className="muted mono" style={{ fontSize: 11 }}>{proximo.fecha}</div>
              <div style={{ fontWeight: 700, fontSize: 13 }}>Con {((window.PERSONAS_DESEMPENO || {})[proximo.jefeId] || {}).nombre}</div>
              <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginTop: 6 }}>
                {(proximo.agenda || []).map((a, i) => <span key={i} className="o1-agenda-chip">{a}</span>)}
              </div>
            </div>
          ) : (
            <div className="muted" style={{ fontSize: 12 }}>Sin 1-on-1 programados.</div>
          )}
          {ultimos.length > 0 && (
            <div style={{ marginTop: 10 }}>
              <div className="muted-xs">Últimos check-ins</div>
              {ultimos.map(c => (
                <div key={c.id} style={{ fontSize: 11.5, padding: '4px 0', display: 'flex', gap: 8 }}>
                  <span className="mono muted">{c.fecha}</span>
                  <span style={{ color: 'var(--text)' }}>{c.acuerdos.length} acuerdos</span>
                </div>
              ))}
            </div>
          )}
        </div>
        <div>
          <SectionTitle>Reconocimientos recibidos · {kudosIn.length}</SectionTitle>
          {kudosIn.length === 0 ? (
            <div className="muted" style={{ fontSize: 12 }}>Sin reconocimientos aún.</div>
          ) : (
            kudosIn.slice(0, 3).map(k => {
              const de = (window.PERSONAS_DESEMPENO || {})[k.deId] || {};
              return (
                <div key={k.id} className="td-kudo">
                  <div style={{ fontStyle: 'italic', fontSize: 12, lineHeight: 1.5 }}>"{k.mensaje}"</div>
                  <div className="muted" style={{ fontSize: 10.5, marginTop: 4 }}>de {de.nombre} · {k.fecha}</div>
                </div>
              );
            })
          )}
        </div>
      </div>
    </div>
  );
};

// ─────── Tab: Onboarding ───────
const ONB_STEPS = [
  { step: 'Bienvenida y carta de oferta', done: true, owner: 'RRHH' },
  { step: 'Firma de contrato', done: true, owner: 'Colaborador' },
  { step: 'Apertura de cuenta corporativa', done: true, owner: 'TI' },
  { step: 'Inducción corporativa', done: true, owner: 'RRHH' },
  { step: 'Inducción SST general', done: true, owner: 'SST' },
  { step: 'Examen médico de ingreso', done: true, owner: 'SST' },
  { step: 'Entrega de dotación y ED_EPP', done: false, owner: 'Almacén', current: true },
  { step: 'Capacitación específica del cargo', done: false, owner: 'Líder de área' },
  { step: 'Asignación a turno y horario', done: false, owner: 'Líder de área' },
  { step: 'Acompañamiento primer día', done: false, owner: 'Líder de área' },
  { step: 'Seguimiento 30 días', done: false, owner: 'RRHH' },
  { step: 'Evaluación período prueba', done: false, owner: 'Líder + RRHH' },
];

const TabOnboarding = () => {
  const done = ONB_STEPS.filter(s => s.done).length;
  const pct = Math.round(done / ONB_STEPS.length * 100);
  return (
    <div>
      <div className="onb-progress-card">
        <div>
          <div className="muted" style={{ fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Progreso onboarding</div>
          <div style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 4 }}>{pct}%</div>
          <div className="muted" style={{ fontSize: 13 }}>{done} de {ONB_STEPS.length} pasos completados</div>
        </div>
        <div style={{ flex: 1, maxWidth: 400 }}>
          <div className="bar" style={{ height: 10 }}><span style={{ width: `${pct}%` }} /></div>
        </div>
      </div>
      <SectionTitle action={<button className="btn" style={{ padding: '5px 10px', fontSize: 12 }}>Editar checklist</button>}>Checklist</SectionTitle>
      <div className="checklist">
        {ONB_STEPS.map((s, i) => (
          <div key={i} className={`check-row ${s.done ? 'done' : ''} ${s.current ? 'current' : ''}`}>
            <div className="check-mark">
              {s.done ? <IconCheck size={14} /> : s.current ? <span className="pulse-dot" /> : null}
            </div>
            <div style={{ flex: 1 }}>
              <div className="check-title">{s.step}</div>
              <div className="muted" style={{ fontSize: 12 }}>Responsable: {s.owner}</div>
            </div>
            {s.current && <span className="pill amber">En progreso</span>}
          </div>
        ))}
      </div>
    </div>
  );
};

// ─────── Side Panel ───────
const SidePanel = ({ emp }) => (
  <aside className="emp-side">
    <div className="emp-side-card">
      <div className="emp-side-title">Jefe directo</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 8 }}>
        <div className="avatar" style={{ width: 36, height: 36, fontSize: 12 }}>LM</div>
        <div>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Luis Miguel Marín</div>
          <div className="muted" style={{ fontSize: 11.5 }}>Líder de Operaciones · Cali</div>
        </div>
      </div>
    </div>

    <div className="emp-side-card">
      <div className="emp-side-title">Compensación</div>
      <div className="quick-row"><span>Salario base</span><b className="mono">$ 1.620.000</b></div>
      <div className="quick-row"><span>Aux. transporte</span><b className="mono">$ 200.000</b></div>
      <div className="quick-row"><span>Total devengado</span><b className="mono">$ 1.820.000</b></div>
      <div className="quick-row"><span>Neto último pago</span><b className="mono">$ 1.566.500</b></div>
    </div>

    <div className="emp-side-card">
      <div className="emp-side-title">Saldos disponibles</div>
      <div className="quick-row"><span>Vacaciones</span><b>12 / 15 días</b></div>
      <div className="quick-row"><span>Permisos remunerados</span><b>3 días</b></div>
      <div className="quick-row"><span>Incapacidades año</span><b>0 días</b></div>
    </div>

    <div className="emp-side-card">
      <div className="emp-side-title">Centro de costo</div>
      <div className="kv-list">
        <div className="kv"><span className="muted">Centro</span><span>CC-040 Operaciones</span></div>
        <div className="kv"><span className="muted">Sede</span><span>Cali — Planta Clasificación</span></div>
        <div className="kv"><span className="muted">Recolección</span><span>100% CC-040</span></div>
        <div className="kv"><span className="muted">ARL</span><span>SURA · Clase IV</span></div>
      </div>
    </div>

    <div className="emp-side-card">
      <div className="emp-side-title">Próximas obligaciones</div>
      <div className="oblig-list">
        <div className="oblig">
          <div className="oblig-date"><div className="d">15</div><div className="m">may</div></div>
          <div>
            <div className="oblig-ttl">Entrega EPP pendiente</div>
            <div className="muted" style={{ fontSize: 11.5 }}>Guantes térmicos · Mascarilla N95</div>
          </div>
          <span className="pill amber" style={{ marginLeft: 'auto' }}>10 días</span>
        </div>
        <div className="oblig">
          <div className="oblig-date"><div className="d">22</div><div className="m">may</div></div>
          <div>
            <div className="oblig-ttl">Capacitación química</div>
            <div className="muted" style={{ fontSize: 11.5 }}>Cierre del módulo en curso</div>
          </div>
          <span className="pill" style={{ marginLeft: 'auto' }}>17 días</span>
        </div>
        <div className="oblig">
          <div className="oblig-date"><div className="d">11</div><div className="m">jul</div></div>
          <div>
            <div className="oblig-ttl">Cierre período de prueba</div>
            <div className="muted" style={{ fontSize: 11.5 }}>Evaluación con líder + RRHH</div>
          </div>
          <span className="pill" style={{ marginLeft: 'auto' }}>67 días</span>
        </div>
      </div>
    </div>

    <div className="emp-side-card">
      <div className="emp-side-title">Acciones rápidas</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 8 }}>
        <button className="btn" style={{ justifyContent: 'flex-start' }}><IconPlus size={14} /> Solicitar novedad</button>
        <button className="btn" style={{ justifyContent: 'flex-start' }}><IconDoc size={14} /> Generar certificación</button>
        <button className="btn" style={{ justifyContent: 'flex-start' }}><IconClock size={14} /> Ver timeline completo</button>
      </div>
    </div>
  </aside>
);

// ─────── Main ───────
const EmployeeDetail = ({ employeeId, onBack }) => {
  const emp = EMPLOYEES.find(e => e.id === employeeId) || EMPLOYEES[0];
  const [tab, setTab] = React.useState('personal');
  const [isEditing, setIsEditing] = React.useState(false);
  const [draft, setDraft] = React.useState(null);

  const startEdit = () => { setDraft({ ...EMP_PERSONAL_DEFAULTS, ...emp }); setIsEditing(true); };
  const cancelEdit = () => { setDraft(null); setIsEditing(false); };
  const saveEdit = () => { Object.assign(emp, draft); setDraft(null); setIsEditing(false); };
  const setField = (key, value) => setDraft(d => ({ ...d, [key]: value }));

  const display = isEditing ? draft : { ...EMP_PERSONAL_DEFAULTS, ...emp };

  const hireDate = new Date('2026-05-12');
  const today = new Date('2026-05-15');
  const days = Math.max(0, Math.round((today - hireDate) / 86400000));

  const TAB_COMP = {
    personal: <TabPersonal emp={emp} display={display} editing={isEditing} onChange={setField} />,
    contract: <TabContract emp={emp} />,
    docs: <TabDocs />,
    training: <TabTraining employeeId={emp?.id} employeeRole={emp?.role} />,
    sst: <TabSst />,
    epp: <TabEpp />,
    timeoff: <TabTimeoff />,
    payroll: <TabPayroll />,
    comms: <TabComms />,
    performance: <TabPerformance empId={emp?.id} employeeRole={emp?.role} />,
    onboarding: <TabOnboarding />,
  };

  return (
    <div className="main">
      <button className="btn" onClick={onBack} style={{ marginBottom: 16 }}>
        <IconChevronLeft size={14} /> Volver al listado
      </button>

      <div className="emp-profile-head">
        <div className={`avatar ${emp.color === 'rose' ? 'rose' : ''}`} style={{ width: 84, height: 84, fontSize: 28, borderRadius: '50%' }}>
          {emp.initials}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4, flexWrap: 'wrap' }}>
            {isEditing ? (
              <input
                type="text" value={display.name} onChange={e => setField('name', e.target.value)}
                className="emp-inline-input"
                style={{ fontSize: 19, fontWeight: 800, fontFamily: 'var(--font-display)', padding: '7px 12px', minWidth: 280 }}
              />
            ) : (
              <h1 className="page-title" style={{ margin: 0, fontSize: 24 }}>{emp.name}</h1>
            )}
            <span className="pill green">● Activo</span>
            {emp.status === 'onboarding' && <span className="pill navy">Onboarding</span>}
            <span className="pill" style={{ background: 'var(--amber-100)', color: 'var(--amber-600)' }}>● Período de prueba</span>
            {emp.origen === 'Contratación directa' && <span className="pill amber-soft">Contratación directa</span>}
          </div>
          {isEditing ? (
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center', marginTop: 8 }}>
              <input type="text" className="emp-inline-input" value={display.role} onChange={e => setField('role', e.target.value)} placeholder="Cargo" style={{ width: 200 }} />
              <input type="text" className="emp-inline-input" value={display.area} onChange={e => setField('area', e.target.value)} placeholder="Área" style={{ width: 160 }} />
              <input type="text" className="emp-inline-input" value={display.site} onChange={e => setField('site', e.target.value)} placeholder="Sede" style={{ width: 140 }} />
              <span className="mono muted">{emp.id}</span>
            </div>
          ) : (
            <div className="emp-headline">
              <span><b>{emp.role}</b></span>
              <span className="dotsep">·</span>
              <span>{emp.area}</span>
              <span className="dotsep">·</span>
              <span>{emp.site}</span>
              <span className="dotsep">·</span>
              <span className="mono muted">{emp.id}</span>
              <span className="dotsep">·</span>
              <span>CC-040 Operaciones</span>
            </div>
          )}
          <div style={{ display: 'flex', gap: 18, marginTop: 12, flexWrap: 'wrap', alignItems: 'flex-end' }}>
            <div className="stat-inline"><span className="muted">Días en la empresa</span><b>{days}</b></div>
            <div className="stat-inline">
              <span className="muted">Ingreso</span>
              {isEditing
                ? <input type="text" className="emp-inline-input mono" value={display.hire} onChange={e => setField('hire', e.target.value)} style={{ width: 108 }} />
                : <b className="mono">{emp.hire}</b>}
            </div>
            <div className="stat-inline">
              <span className="muted">Contrato</span>
              {isEditing
                ? (
                  <select className="emp-inline-input" value={display.contract} onChange={e => setField('contract', e.target.value)} style={{ width: 140 }}>
                    {['Indefinido', 'Fijo', 'Aprendizaje'].map(o => <option key={o} value={o}>{o}</option>)}
                  </select>
                )
                : <b>{emp.contract}</b>}
            </div>
            <div className="stat-inline"><span className="muted">Salario base</span><b className="mono">$ 1.620.000</b></div>
            <div className="stat-inline"><span className="muted">Líder</span><b>Luis Miguel M.</b></div>
            <div className="stat-inline"><span className="muted">ARL</span><b>SURA · IV</b></div>
          </div>
        </div>
        <div className="emp-quick-actions">
          {isEditing ? (
            <>
              <button className="btn" onClick={cancelEdit}>Cancelar</button>
              <button className="btn primary" onClick={saveEdit}><IconCheck size={14} /> Guardar cambios</button>
            </>
          ) : (
            <>
              <button className="btn" onClick={startEdit}>Editar</button>
              <button className="btn"><IconMegaphone size={14} /> Enviar comunicación</button>
              <button className="btn primary"><IconDoc size={14} /> Generar documento</button>
              <button className="btn" style={{ padding: '9px 11px' }}>···</button>
            </>
          )}
        </div>
      </div>

      <div className="emp-tabs-row">
        {TABS.map(t => (
          <button key={t.id} className={`emp-tab ${tab === t.id ? 'active' : ''}`} onClick={() => setTab(t.id)}>
            {t.label}
            {t.badge && <span className={`tab-badge ${t.badge.tone}`}>{t.badge.count}</span>}
          </button>
        ))}
      </div>

      <div className="emp-detail-layout">
        <div className="card" style={{ padding: 24 }}>
          {TAB_COMP[tab]}
        </div>
        <SidePanel emp={emp} />
      </div>
    </div>
  );
};

window.EmployeeDetail = EmployeeDetail;

// Piezas reutilizadas por my-profile.jsx (vista de autoservicio) para no
// duplicar el contenido de las pestañas del detalle de empleado.
window.EMP_TABS = TABS;
window.EmpField = Field;
window.EmpSectionTitle = SectionTitle;
window.EMP_PERSONAL_DEFAULTS = EMP_PERSONAL_DEFAULTS;
window.TabPersonal = TabPersonal;
window.TabContract = TabContract;
window.TabDocs = TabDocs;
window.TabTraining = TabTraining;
window.TabSst = TabSst;
window.TabEpp = TabEpp;
window.TabTimeoff = TabTimeoff;
window.TabPayroll = TabPayroll;
window.TabComms = TabComms;
window.TabPerformance = TabPerformance;
window.TabOnboarding = TabOnboarding;
window.EmpSidePanel = SidePanel;