// Onboarding module — list view + detail view
const { useState: _ob_useState } = React;

const ONBOARDINGS = [
  {
    id: 'ob-1',
    name: 'María Fernanda López',
    initials: 'ML',
    role: 'Operaria de Aprovechamiento',
    area: 'Operaciones',
    site: 'Cali',
    startDate: '01/05/2026',
    daysIn: 4,
    progress: 62,
    status: 'on-track',
    sections: { docs: [3,5], epp: [2,4], training: [0,3], sst: [1,2], tasks: [4,6], affil: [2,3] },
    urgent: [
      { kind: 'doc', text: 'Reglamento interno · pendiente de firma' },
      { kind: 'epp', text: 'Casco blanco · sin stock en almacén' },
      { kind: 'train', text: 'Inducción general · programada 08/05' },
    ],
  },
  {
    id: 'ob-2',
    employeeId: 'E0247',
    name: 'Andrés Felipe Mejía',
    initials: 'AM',
    role: 'Operario de Clasificación',
    area: 'Operaciones',
    site: 'Cali',
    startDate: '01/05/2026',
    daysIn: 4,
    progress: 48,
    status: 'on-track',
    sections: { docs: [4,6], epp: [3,5], training: [0,4], sst: [1,3], tasks: [2,5], affil: [2,3] },
    urgent: [
      { kind: 'sst', text: 'Examen de altura · sin programar' },
      { kind: 'doc', text: 'Acta de entrega de dotación · pendiente' },
      { kind: 'train', text: 'Manejo de trituradora · por programar' },
    ],
  },
  {
    id: 'ob-3',
    name: 'Laura Camila Suárez',
    initials: 'LS',
    role: 'Coordinadora de Calidad',
    area: 'Calidad',
    site: 'Bogotá',
    startDate: '24/04/2026',
    daysIn: 11,
    progress: 35,
    status: 'late',
    sections: { docs: [3,5], epp: [1,3], training: [1,4], sst: [1,2], tasks: [3,6], affil: [1,3] },
    urgent: [
      { kind: 'alert', text: 'Contrato sin firma · 5 días vencido' },
      { kind: 'sst', text: 'Examen de visiometría sin agendar' },
      { kind: 'doc', text: 'Caja de compensación pendiente' },
    ],
  },
  {
    id: 'ob-4',
    name: 'Diego Andrés Toro',
    initials: 'DT',
    role: 'Almacenista',
    area: 'Logística',
    site: 'Cali',
    startDate: '20/04/2026',
    daysIn: 15,
    progress: 88,
    status: 'on-track',
    sections: { docs: [5,5], epp: [4,4], training: [2,3], sst: [2,2], tasks: [5,6], affil: [3,3] },
    urgent: [
      { kind: 'task', text: 'Primera reunión con jefe directo' },
      { kind: 'doc', text: 'Manual del empleado · pendiente entrega' },
    ],
  },
];

const STATUS_LABELS = {
  'on-track': { label: 'En tiempo', cls: 'green' },
  'late': { label: 'Atrasado', cls: 'rose' },
  'completed': { label: 'Completado', cls: 'blue' },
};

const URGENT_ICON = {
  doc: 'IconDoc', epp: 'IconShirt', train: 'IconBook',
  sst: 'IconShield', task: 'IconCheck', alert: 'IconAlert',
};

const parseHireDate = (d) => {
  const [day, month, year] = d.split('/').map(Number);
  return new Date(year, month - 1, day).getTime();
};

const NEW_HIRE_COUNTRY_FLAG = { CO: '🇨🇴', DO: '🇩🇴', GT: '🇬🇹' };

const StartOnboardingModal = ({ open, onClose, candidates, onStart }) => {
  React.useEffect(() => {
    if (!open) return;
    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); };
  }, [open]);

  if (!open) return null;

  return (
    <div className="modal-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" style={{ maxWidth: 640 }}>
        <div className="modal-head">
          <div>
            <div className="modal-title">Iniciar onboarding</div>
            <div className="modal-sub">Empleados recién creados a la espera de iniciar su proceso de inducción</div>
          </div>
          <button className="icon-btn" onClick={onClose} title="Cerrar">
            <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">
          {candidates.length === 0 ? (
            <div className="muted" style={{ padding: '24px 4px', textAlign: 'center' }}>
              No hay empleados recién creados pendientes de iniciar onboarding.
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              {candidates.map(emp => (
                <div key={emp.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 4px', borderBottom: '1px solid var(--border)' }}>
                  <div className="ob-avatar sm">{emp.initials}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{emp.name} <span style={{ fontSize: 12 }}>{NEW_HIRE_COUNTRY_FLAG[emp.country] || ''}</span></div>
                    <div className="muted-xs">{emp.role} · {emp.area} · {emp.site}</div>
                    <div className="muted-xs mono">Creado {emp.hire}</div>
                  </div>
                  <button className="btn primary" onClick={() => onStart(emp)}>Iniciar onboarding</button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

const Onboarding = () => {
  const [onboardings, setOnboardings] = _ob_useState(ONBOARDINGS);
  const [selectedId, setSelectedId] = _ob_useState(null);
  const [filterArea, setFilterArea] = _ob_useState('Todas');
  const [filterSite, setFilterSite] = _ob_useState('Todas');
  const [filterStatus, setFilterStatus] = _ob_useState('Todos');
  const [showStart, setShowStart] = _ob_useState(false);

  const filtered = onboardings.filter(o =>
    (filterArea === 'Todas' || o.area === filterArea) &&
    (filterSite === 'Todas' || o.site === filterSite) &&
    (filterStatus === 'Todos' || STATUS_LABELS[o.status].label === filterStatus)
  );

  if (selectedId) {
    const ob = onboardings.find(o => o.id === selectedId);
    return <OnboardingDetail ob={ob} onBack={() => setSelectedId(null)} />;
  }

  const lateCount = onboardings.filter(o => o.status === 'late').length;

  const startedEmployeeIds = onboardings.map(o => o.employeeId).filter(Boolean);
  const newHireCandidates = (window.EMPLOYEES || [])
    .filter(e => e.status === 'onboarding' && !startedEmployeeIds.includes(e.id))
    .sort((a, b) => parseHireDate(b.hire) - parseHireDate(a.hire));

  const startOnboarding = (emp) => {
    const newRecord = {
      id: `ob-${emp.id}`,
      employeeId: emp.id,
      name: emp.name,
      initials: emp.initials,
      role: emp.role,
      area: emp.area,
      site: emp.site,
      startDate: '05/05/2026',
      daysIn: 0,
      progress: 0,
      status: 'on-track',
      sections: { docs: [0,5], epp: [0,4], training: [0,3], sst: [0,2], tasks: [0,6], affil: [0,3] },
      urgent: [{ kind: 'task', text: 'Recién creado · aún sin actividad registrada' }],
    };
    setOnboardings(prev => [newRecord, ...prev]);
    setShowStart(false);
    setSelectedId(newRecord.id);
  };

  return (
    <div className="main" data-screen-label="Onboarding">
      <div className="page-head">
        <div>
          <h1 className="page-title">Onboarding</h1>
          <div className="page-subtitle">
            <b>{onboardings.length} onboardings activos</b>
            {lateCount > 0 && <> · <span style={{ color: 'var(--rose-600)', fontWeight: 600 }}>{lateCount} atrasado{lateCount > 1 ? 's' : ''} requiere atención</span></>}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn"><IconDoc size={14} /> Plantillas</button>
          <button className="btn primary" onClick={() => setShowStart(true)}><IconPlus size={14} /> Iniciar onboarding</button>
        </div>
      </div>

      <div className="ob-toolbar">
        <div className="ob-search">
          <IconSearch size={15} />
          <input placeholder="Buscar por nombre o cargo…" />
        </div>
        <select value={filterArea} onChange={(e) => setFilterArea(e.target.value)}>
          <option>Todas</option>
          <option>Operaciones</option>
          <option>Calidad</option>
          <option>Logística</option>
          <option>Administración</option>
        </select>
        <select value={filterSite} onChange={(e) => setFilterSite(e.target.value)}>
          <option>Todas</option>
          <option>Cali</option>
          <option>Bogotá</option>
          <option>Barranquilla</option>
        </select>
        <select>
          <option>Todos los cargos</option>
          <option>Operaria de Aprovechamiento</option>
          <option>Operario de Clasificación</option>
          <option>Coordinadora de Calidad</option>
          <option>Almacenista</option>
        </select>
        <select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)}>
          <option>Todos</option>
          <option>En tiempo</option>
          <option>Atrasado</option>
          <option>Completado</option>
        </select>
      </div>

      <div className="ob-grid">
        {filtered.map(ob => <OnboardingCard key={ob.id} ob={ob} onOpen={() => setSelectedId(ob.id)} />)}
      </div>

      <StartOnboardingModal
        open={showStart}
        onClose={() => setShowStart(false)}
        candidates={newHireCandidates}
        onStart={startOnboarding}
      />
    </div>
  );
};

const OnboardingCard = ({ ob, onOpen }) => {
  const status = STATUS_LABELS[ob.status];
  const fillColor = ob.status === 'late' ? 'var(--rose-600)' : ob.progress >= 85 ? 'var(--green-600)' : 'var(--navy-800)';
  return (
    <div className="ob-card" onClick={onOpen}>
      <div className="ob-card-head">
        <div className="ob-avatar">{ob.initials}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="ob-card-name">{ob.name}</div>
          <div className="ob-card-role">{ob.role}</div>
          <div className="ob-card-meta">{ob.area} · Sede {ob.site}</div>
        </div>
        <span className={`pill ${status.cls}`}>{status.label}</span>
      </div>

      <div className="ob-card-dates">
        <div>
          <div className="muted-xs">Ingreso</div>
          <div className="ob-card-stat mono">{ob.startDate}</div>
        </div>
        <div>
          <div className="muted-xs">Días</div>
          <div className="ob-card-stat">{ob.daysIn}</div>
        </div>
        <div>
          <div className="muted-xs">Avance</div>
          <div className="ob-card-stat">{ob.progress}%</div>
        </div>
      </div>

      <div className="bar" style={{ marginTop: 4 }}>
        <span style={{ width: `${ob.progress}%`, background: fillColor }} />
      </div>

      <div className="ob-card-urgent">
        <div className="muted-xs ob-card-urgent-h">Pendientes urgentes</div>
        <ul>
          {ob.urgent.slice(0,3).map((u,i) => {
            const Ico = window[URGENT_ICON[u.kind]] || IconAlert;
            return (
              <li key={i} className={u.kind === 'alert' ? 'urg-alert' : ''}>
                <Ico size={12} /> {u.text}
              </li>
            );
          })}
        </ul>
      </div>

      <button className="ob-card-cta">Ver detalle <IconChevronRight size={14} /></button>
    </div>
  );
};

// ─── Detail view ─────────────────────────────────────────────

const SECTION_DEFS = [
  {
    id: 'docs', icon: 'IconDoc', title: 'Documentos',
    items: [
      { name: 'Contrato de trabajo', state: 'done', meta: 'Firmado el 01/05/2026 · firma electrónica' },
      { name: 'Política de tratamiento de datos', state: 'done', meta: 'Firmado el 01/05/2026' },
      { name: 'Reglamento interno de trabajo', state: 'pending', meta: 'Enviado · sin firma — recordatorio enviado hace 1 día', action: 'Reenviar recordatorio' },
      { name: 'Acta de entrega de dotación', state: 'blocked', meta: 'Bloqueado · depende de entrega completa de dotación' },
      { name: 'Acuerdo de confidencialidad', state: 'pending', meta: 'Pendiente de firma' },
    ],
  },
  {
    id: 'epp', icon: 'IconShirt', title: 'Dotación y EPP',
    items: [
      { name: 'Uniforme talla M', state: 'done', meta: 'Entregado 01/05/2026 · Almacén Cali' },
      { name: 'Botas puntera acero talla 37', state: 'done', meta: 'Entregado 01/05/2026' },
      { name: 'Casco blanco', state: 'alert', meta: 'Sin stock — alerta a Almacén · ETA 08/05', action: 'Ver alerta' },
      { name: 'Guantes de seguridad nitrilo', state: 'pending', meta: 'Pendiente de entrega' },
    ],
  },
  {
    id: 'training', icon: 'IconBook', title: 'Capacitaciones',
    items: [
      { name: 'Inducción general corporativa', state: 'scheduled', meta: 'Programada 08/05/2026 · Aula Cali · 2h' },
      { name: 'Seguridad Industrial', state: 'scheduled', meta: 'Programada 10/05/2026 · plataforma e-learning' },
      { name: 'Manejo de maquinaria', state: 'pending', meta: 'Por programar — coordinador no disponible esta semana' },
    ],
  },
  {
    id: 'sst', icon: 'IconShield', title: 'Exámenes SST',
    items: [
      { name: 'Examen médico de ingreso', state: 'done', meta: 'Realizado 30/04/2026 · IPS Coomeva · Apto sin restricciones' },
      { name: 'Examen de altura', state: 'scheduled', meta: 'Programado 15/05/2026 · IPS Coomeva' },
    ],
  },
  {
    id: 'tasks', icon: 'IconRocket', title: 'Tareas de ingreso',
    items: [
      { name: 'Crear credenciales del sistema', state: 'done', meta: 'TI · 01/05/2026' },
      { name: 'Asignar equipo de trabajo', state: 'done', meta: 'Líder Operaciones · 01/05/2026' },
      { name: 'Presentación al equipo', state: 'done', meta: 'Reunión 02/05 · 9 asistentes' },
      { name: 'Tour por instalaciones', state: 'done', meta: 'Realizado 02/05/2026' },
      { name: 'Entrega de manual del empleado', state: 'pending', meta: 'Pendiente entrega física' },
      { name: 'Primera reunión con jefe directo', state: 'pending', meta: 'Por agendar — semana del 06/05' },
    ],
  },
  {
    id: 'affil', icon: 'IconShield', title: 'Afiliaciones a Seguridad Social',
    items: [
      { name: 'EPS Sura', state: 'done', meta: 'Afiliado · radicado #102934' },
      { name: 'AFP Protección', state: 'done', meta: 'Afiliado · radicado #88172' },
      { name: 'Caja de Compensación Comfama', state: 'pending', meta: 'En trámite — 3 días en cola' },
    ],
  },
];

const STATE_META = {
  done:      { label: 'Completado', icon: 'IconCheck',    cls: 'st-done',      pill: 'green' },
  pending:   { label: 'Pendiente',  icon: 'IconClock',    cls: 'st-pending',   pill: 'amber' },
  scheduled: { label: 'Programado', icon: 'IconCalendar', cls: 'st-scheduled', pill: 'blue'  },
  alert:     { label: 'Alerta',     icon: 'IconAlert',    cls: 'st-alert',     pill: 'rose'  },
  blocked:   { label: 'Bloqueado',  icon: 'IconAlert',    cls: 'st-blocked',   pill: 'navy'  },
};

const TIMELINE = [
  { date: '30/04/2026', label: 'Examen médico de ingreso', kind: 'done', detail: 'IPS Coomeva · Apto' },
  { date: '01/05/2026', label: 'Inicio del contrato', kind: 'done', detail: 'Día 1 · Sede Cali' },
  { date: '01/05/2026', label: 'Entrega parcial de dotación', kind: 'done', detail: 'Uniforme + botas' },
  { date: '02/05/2026', label: 'Tour y presentación', kind: 'done', detail: 'Equipo de Operaciones' },
  { date: '05/05/2026', label: 'Hoy', kind: 'now', detail: 'Día 4 · 62% completado' },
  { date: '08/05/2026', label: 'Inducción general', kind: 'future', detail: 'Programada · 9:00 AM' },
  { date: '10/05/2026', label: 'Seguridad Industrial', kind: 'future', detail: 'e-learning' },
  { date: '15/05/2026', label: 'Examen de altura', kind: 'future', detail: 'IPS Coomeva' },
  { date: '31/05/2026', label: 'Cierre de onboarding', kind: 'milestone', detail: 'Meta: 100% completitud' },
];

const OnboardingDetail = ({ ob, onBack }) => {
  const [open, setOpen] = _ob_useState({ docs: true, epp: true, training: false, sst: false, tasks: false, affil: false });
  const toggle = (id) => setOpen(o => ({ ...o, [id]: !o[id] }));

  // Copia local del checklist — no se muta SECTION_DEFS (constante compartida
  // por todas las aperturas del detalle). Cada vez que se abre un onboarding,
  // el checklist parte del mismo estado base.
  const [items, setItems] = _ob_useState(() =>
    SECTION_DEFS.map(sec => ({ ...sec, items: sec.items.map(it => ({ ...it })) }))
  );

  const toggleItem = (sectionId, itemIndex) => {
    setItems(prev => prev.map(sec =>
      sec.id !== sectionId ? sec : {
        ...sec,
        items: sec.items.map((it, i) =>
          i !== itemIndex ? it : { ...it, state: it.state === 'done' ? 'pending' : 'done' }
        ),
      }
    ));
  };

  const sectionStats = items.map(sec => {
    const done = sec.items.filter(it => it.state === 'done').length;
    return { id: sec.id, done, total: sec.items.length };
  });
  const totalDone = sectionStats.reduce((a, s) => a + s.done, 0);
  const totalItems = sectionStats.reduce((a, s) => a + s.total, 0);
  const overallPct = totalItems === 0 ? 0 : Math.round((totalDone / totalItems) * 100);
  const isComplete = overallPct === 100;
  const statusMeta = isComplete ? STATUS_LABELS.completed : STATUS_LABELS[ob.status];

  return (
    <div className="main" data-screen-label="Onboarding · Detalle">
      <button className="btn" onClick={onBack} style={{ marginBottom: 16 }}>
        <IconChevronLeft size={14} /> Volver al listado
      </button>

      <div className="ob-detail-head">
        <div className="ob-detail-id">
          <div className="ob-avatar lg">{ob.initials}</div>
          <div>
            <div className="ob-detail-name">{ob.name}</div>
            <div className="ob-detail-meta">
              {ob.role} · {ob.area} · Sede {ob.site}
            </div>
            <div className="ob-detail-dates">
              <span><IconCalendar size={13} /> Ingreso {ob.startDate}</span>
              <span><IconClock size={13} /> Día {ob.daysIn} de onboarding</span>
              <span className={`pill ${statusMeta.cls}`}>{statusMeta.label}</span>
            </div>
          </div>
        </div>
        <div className="ob-detail-progress">
          <div className="ob-detail-progress-num">{overallPct}<small>%</small></div>
          <div className="ob-detail-progress-lbl">Completitud global</div>
          <div className="bar" style={{ width: 220, marginTop: 8 }}>
            <span style={{ width: `${overallPct}%`, background: isComplete ? 'var(--green-600)' : 'var(--navy-800)' }} />
          </div>
        </div>
      </div>

      <div className="ob-detail-grid">
        <div className="ob-sections">
          {items.map(sec => {
            const stats = sectionStats.find(s => s.id === sec.id);
            const isOpen = open[sec.id];
            const Ico = window[sec.icon];
            const pct = stats.total === 0 ? 0 : (stats.done / stats.total) * 100;
            return (
              <div key={sec.id} className={`ob-section ${isOpen ? 'open' : ''}`}>
                <button className="ob-section-head" onClick={() => toggle(sec.id)}>
                  <div className="ob-section-icon"><Ico size={16} /></div>
                  <div className="ob-section-title">{sec.title}</div>
                  <div className="ob-section-count">
                    <strong>{stats.done}</strong>/{stats.total}
                  </div>
                  <div className="bar" style={{ width: 110 }}>
                    <span style={{ width: `${pct}%`, background: pct === 100 ? 'var(--green-600)' : 'var(--navy-800)' }} />
                  </div>
                  <IconChevronDown size={16} className="ob-section-chev" />
                </button>
                {isOpen && (
                  <div className="ob-section-body">
                    {sec.items.map((it, i) => {
                      const sm = STATE_META[it.state];
                      const SmIco = window[sm.icon];
                      return (
                        <div key={i} className={`ob-item ${sm.cls}`}>
                          <button
                            className="ob-item-state"
                            onClick={() => toggleItem(sec.id, i)}
                            title={it.state === 'done' ? 'Marcar como pendiente' : 'Marcar como completado'}
                            style={{ border: 'none', padding: 0, cursor: 'pointer', font: 'inherit' }}
                          >
                            <SmIco size={14} />
                          </button>
                          <div className="ob-item-body">
                            <div className="ob-item-name">{it.name}</div>
                            <div className="ob-item-meta">{it.meta}</div>
                          </div>
                          <div className="ob-item-right">
                            <span className={`pill ${sm.pill}`}>{sm.label}</span>
                            {it.action && it.state !== 'done' && <button className="btn ob-item-action">{it.action}</button>}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>
            );
          })}
        </div>

        <div className="ob-side">
          <div className="card ob-timeline-card">
            <div className="card-head">
              <h3>Línea de tiempo</h3>
              <span className="sub muted">Hitos del proceso</span>
            </div>
            <div className="ob-timeline">
              {TIMELINE.map((t, i) => (
                <div key={i} className={`ob-tl-item ob-tl-${t.kind}`}>
                  <div className="ob-tl-rail">
                    <div className="ob-tl-dot">
                      {t.kind === 'done' && <IconCheck size={11} />}
                      {t.kind === 'now' && <span className="now-pulse" />}
                      {t.kind === 'milestone' && <IconStar size={11} />}
                    </div>
                    {i < TIMELINE.length - 1 && <div className="ob-tl-line" />}
                  </div>
                  <div className="ob-tl-body">
                    <div className="ob-tl-date mono">{t.date}</div>
                    <div className="ob-tl-label">{t.label}</div>
                    <div className="ob-tl-detail muted">{t.detail}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-head">
              <h3>Equipo asignado</h3>
            </div>
            <div className="ob-team">
              <div className="ob-team-row">
                <div className="ob-avatar sm">CR</div>
                <div>
                  <div className="ob-team-name">Carolina Restrepo</div>
                  <div className="ob-team-role muted">Admin RRHH · Buddy</div>
                </div>
              </div>
              <div className="ob-team-row">
                <div className="ob-avatar sm">JR</div>
                <div>
                  <div className="ob-team-name">Javier Restrepo</div>
                  <div className="ob-team-role muted">Líder de Aprovechamiento · Jefe directo</div>
                </div>
              </div>
              <div className="ob-team-row">
                <div className="ob-avatar sm">PG</div>
                <div>
                  <div className="ob-team-name">Patricia Gómez</div>
                  <div className="ob-team-role muted">Coordinadora SST</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <button className="ob-fab" title="Enviar recordatorio">
        <IconMegaphone size={18} />
        <span>Enviar recordatorio al colaborador</span>
      </button>
    </div>
  );
};

window.Onboarding = Onboarding;