/* CONTROLLING · Vista 5 — ADMISSÕES / DEMISSÕES
   Kanban 4 colunas + checklist 3 mãos (Clara · IT · RH/FC) */

const CtrlOnboardingView = ({ ctx, focusId }) => {
  const H = window.CtrlHelpers;
  const [selId, setSelId] = React.useState(focusId || 'on-001');

  const cols = [
    { k: 'preparacao', label: 'Preparação',     sub: 'Antes do start date' },
    { k: 'em_curso',   label: 'Em curso',        sub: 'Início iminente / em integração' },
    { k: 'concluido',  label: 'Concluído',       sub: 'Tudo activo · arquivar 30d' },
    { k: 'bloqueado',  label: 'Bloqueado',       sub: 'Falta input externo' },
  ];

  const items = window.CTRL_ONBOARDING.filter(o => ctx.empresa === 'todas' || o.empresa === ctx.empresa);
  const sel = items.find(o => o.id === selId) || items[0];

  return (
    <div style={{ height: '100%', display: 'grid', gridTemplateColumns: '1fr 460px', gap: 12, overflow: 'hidden' }}>

      {/* Kanban */}
      <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 0 12px' }}>
          <div className="font-display" style={{ fontSize: 14, fontWeight: 600 }}>Pipeline admissões / demissões</div>
          <div style={{ display: 'flex', gap: 6 }}>
            <button className="btn btn-xs">Templates</button>
            <button className="btn btn-xs btn-ai">+ Novo workflow</button>
          </div>
        </div>

        <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, overflow: 'hidden' }}>
          {cols.map(col => {
            const cards = items.filter(o => o.col === col.k);
            return (
              <div key={col.k} className="card" style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden', padding: 0 }}>
                <div style={{ padding: '10px 12px', borderBottom: '1px solid var(--border)' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                    <span className="font-display" style={{ fontSize: 12, fontWeight: 600 }}>{col.label}</span>
                    <span className="font-mono" style={{ fontSize: 10, color: 'var(--text-dim)' }}>{cards.length}</span>
                  </div>
                  <div className="font-mono" style={{ fontSize: 9, color: 'var(--text-dim)', marginTop: 2, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{col.sub}</div>
                </div>
                <div className="scrollbar" style={{ flex: 1, overflowY: 'auto', padding: 8, display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {cards.map(o => (
                    <OnbCard key={o.id} o={o} selected={o.id === selId} onClick={() => setSelId(o.id)} />
                  ))}
                  {cards.length === 0 && <div style={{ textAlign: 'center', fontSize: 10.5, color: 'var(--text-dim)', padding: '20px 0' }}>—</div>}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Detalhe checklist */}
      <div className="card" style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden', padding: 0 }}>
        {sel ? <OnbDetalhe o={sel} H={H} /> : <div style={{ flex: 1, display: 'grid', placeItems: 'center', color: 'var(--text-dim)', fontSize: 12 }}>Selecciona um workflow.</div>}
      </div>
    </div>
  );
};

const OnbCard = ({ o, selected, onClick }) => {
  const H = window.CtrlHelpers;
  const allTasks = [...o.checklist.clara, ...o.checklist.it, ...o.checklist.rh].filter(t => !t.na);
  const done = allTasks.filter(t => t.done).length;
  const blockers = allTasks.filter(t => t.blocker && !t.done).length;
  const pct = Math.round((done / allTasks.length) * 100);
  return (
    <button onClick={onClick} style={{
      padding: 10, textAlign: 'left',
      background: selected ? 'color-mix(in oklch, var(--ai-500) 8%, var(--bg-sunken))' : 'var(--bg-sunken)',
      border: '1px solid ' + (selected ? 'var(--ai-500)' : 'var(--border)'),
      borderLeft: '2.5px solid ' + (o.tipo === 'admissao' ? 'var(--success)' : '#F97316'),
      borderRadius: 4, cursor: 'pointer', display: 'block',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 5 }}>
        <span className="font-mono" style={{
          fontSize: 9, padding: '1px 5px', borderRadius: 3, fontWeight: 700,
          background: o.tipo === 'admissao' ? 'color-mix(in oklch, var(--success) 14%, transparent)' : 'color-mix(in oklch, #F97316 14%, transparent)',
          color: o.tipo === 'admissao' ? 'var(--success)' : '#F97316',
          letterSpacing: '0.06em',
        }}>{o.tipo === 'admissao' ? 'ADMIT' : 'DEMIS'}</span>
        {H.empresaChip(o.empresa)}
        {blockers > 0 && (
          <span className="font-mono" style={{ marginLeft: 'auto', fontSize: 9, color: 'var(--danger)', fontWeight: 600 }}>⚠ {blockers}</span>
        )}
      </div>
      <div style={{ fontSize: 12, fontWeight: 600 }}>{o.nome}</div>
      <div style={{ fontSize: 10.5, color: 'var(--text-muted)', marginTop: 1 }}>{o.cargo}</div>
      <div style={{ marginTop: 8, height: 4, background: 'var(--bg-elev)', borderRadius: 2, overflow: 'hidden' }}>
        <div style={{ height: '100%', width: pct + '%', background: pct >= 80 ? 'var(--success)' : pct >= 40 ? '#F59E0B' : '#F97316' }} />
      </div>
      <div style={{ marginTop: 4, fontSize: 9.5, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>{done}/{allTasks.length} · start {o.start}</div>
    </button>
  );
};

const OnbDetalhe = ({ o, H }) => {
  const cols = [
    { k: 'clara', label: 'Clara · Finance/HR ops', tasks: o.checklist.clara, color: '#1E40AF' },
    { k: 'it',    label: 'IT · Paulino',           tasks: o.checklist.it,    color: '#0F766E' },
    { k: 'rh',    label: 'RH/FC · welcome',        tasks: o.checklist.rh,    color: '#A855F7' },
  ];
  const allTasks = cols.flatMap(c => c.tasks).filter(t => !t.na);
  const done = allTasks.filter(t => t.done).length;
  const blockers = allTasks.filter(t => t.blocker && !t.done);

  return (
    <>
      <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--border)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
          <span className="font-mono" style={{
            fontSize: 9, padding: '1px 5px', borderRadius: 3, fontWeight: 700,
            background: o.tipo === 'admissao' ? 'color-mix(in oklch, var(--success) 14%, transparent)' : 'color-mix(in oklch, #F97316 14%, transparent)',
            color: o.tipo === 'admissao' ? 'var(--success)' : '#F97316',
            letterSpacing: '0.06em',
          }}>{o.tipo === 'admissao' ? 'ADMISSÃO' : 'DEMISSÃO'}</span>
          {H.empresaChip(o.empresa, { large: true })}
        </div>
        <div className="font-display" style={{ fontSize: 17, fontWeight: 600 }}>{o.nome}</div>
        <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>{o.cargo} · start <strong>{o.start}</strong></div>
        <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ flex: 1, height: 6, background: 'var(--bg-sunken)', borderRadius: 3, overflow: 'hidden' }}>
            <div style={{ height: '100%', width: Math.round(done/allTasks.length*100) + '%', background: 'var(--success)' }} />
          </div>
          <span className="font-mono" style={{ fontSize: 11, fontWeight: 600 }}>{done}/{allTasks.length}</span>
        </div>
      </div>

      {blockers.length > 0 && (
        <div style={{ margin: 14, padding: 10, borderRadius: 5, background: 'color-mix(in oklch, var(--danger) 8%, transparent)', border: '1px solid color-mix(in oklch, var(--danger) 24%, transparent)' }}>
          <div style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--danger)', marginBottom: 4 }}>⚠ {blockers.length} task{blockers.length > 1 ? 's' : ''} bloqueada{blockers.length > 1 ? 's' : ''}</div>
          <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{blockers.map(b => b.t).join(' · ')}</div>
        </div>
      )}

      <div className="scrollbar" style={{ flex: 1, overflowY: 'auto', padding: '0 16px 16px' }}>
        {cols.map(c => (
          <div key={c.k} style={{ marginTop: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
              <span style={{ width: 8, height: 8, borderRadius: 2, background: c.color }} />
              <span className="font-mono" style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: c.color }}>{c.label}</span>
              <span className="font-mono" style={{ fontSize: 9.5, color: 'var(--text-dim)', marginLeft: 'auto' }}>
                {c.tasks.filter(t => t.done).length}/{c.tasks.filter(t => !t.na).length}
              </span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
              {c.tasks.map((t, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 8,
                  padding: '7px 10px', borderRadius: 4,
                  background: t.done ? 'color-mix(in oklch, var(--success) 5%, transparent)' : t.blocker ? 'color-mix(in oklch, var(--danger) 5%, transparent)' : 'var(--bg-sunken)',
                  border: '1px solid ' + (t.blocker && !t.done ? 'color-mix(in oklch, var(--danger) 22%, transparent)' : 'var(--border)'),
                  opacity: t.na ? 0.5 : 1,
                }}>
                  <span style={{
                    width: 14, height: 14, borderRadius: 3,
                    border: '1.5px solid ' + (t.done ? 'var(--success)' : 'var(--text-dim)'),
                    background: t.done ? 'var(--success)' : 'transparent',
                    display: 'grid', placeItems: 'center', flexShrink: 0,
                    color: '#fff', fontSize: 9, fontWeight: 700,
                  }}>{t.done ? '✓' : ''}</span>
                  <span style={{
                    fontSize: 11.5, flex: 1,
                    textDecoration: t.done ? 'line-through' : 'none',
                    color: t.done ? 'var(--text-muted)' : 'var(--text)',
                  }}>{t.t}</span>
                  {t.na && <span className="font-mono" style={{ fontSize: 9, color: 'var(--text-dim)' }}>N/A</span>}
                  {t.blocker && !t.done && <span className="font-mono" style={{ fontSize: 9, color: 'var(--danger)', fontWeight: 600 }}>BLOQ</span>}
                </div>
              ))}
            </div>
          </div>
        ))}

        <div style={{ marginTop: 16, display: 'flex', gap: 6 }}>
          <button className="btn btn-xs btn-ai">Marcar próxima</button>
          <button className="btn btn-xs">Pingar IT</button>
          <button className="btn btn-xs">Histórico</button>
        </div>
      </div>
    </>
  );
};

window.CtrlOnboardingView = CtrlOnboardingView;