/* CONTROLLING · wrapper module
   Tabs: Resumo · FSE · Compras · Activos · Onboarding · Configuração
   Header: selector empresa (6 no scope · TAS+FC fora)
   Marcador "Validar Clara" no início para tornar suposições visíveis. */

const ControllingModule = ({ onOpenChat }) => {
  const [tab, setTab] = React.useState('resumo');
  const [empresa, setEmpresa] = React.useState('todas');
  const [focusOnb, setFocusOnb] = React.useState(null);
  const [showAssumes, setShowAssumes] = React.useState(false);

  const ctx = { empresa };
  const tabs = [
    { k: 'resumo',     lbl: 'Resumo' },
    { k: 'fse',        lbl: 'Faturas FSE',     pill: window.CTRL_HEAD.fsePendentes.count },
    { k: 'compras',    lbl: 'Compras',         pill: window.CTRL_HEAD.comprasAbertas.count },
    { k: 'activos',    lbl: 'Activos & Serviços' },
    { k: 'onboarding', lbl: 'Admissões' },
    { k: 'config',     lbl: 'Configuração' },
  ];

  const goTo = (t, opts) => {
    if (t === 'onboarding' && opts?.focus) setFocusOnb(opts.focus);
    setTab(t);
  };

  const A = window.CTRL_ASSUNCOES;

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden', position: 'relative' }}>

      {/* Header */}
      <div style={{
        flexShrink: 0, padding: '12px 18px',
        borderBottom: '1px solid var(--border)', background: 'var(--bg-elev)',
        display: 'flex', alignItems: 'center', gap: 16,
      }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span className="font-mono" style={{ fontSize: 9.5, color: 'var(--text-dim)', letterSpacing: '0.08em', fontWeight: 600 }}>FINANCE / CONTROLLING</span>
            <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--text-dim)' }} />
            <span style={{ fontSize: 11.5, color: 'var(--text-muted)' }}>Owner <strong style={{ color: 'var(--text)' }}>Clara Nobre</strong></span>
            <button onClick={() => setShowAssumes(!showAssumes)} className="font-mono" style={{
              fontSize: 9, padding: '2px 6px', borderRadius: 3, fontWeight: 700, cursor: 'pointer',
              background: 'color-mix(in oklch, #A855F7 14%, transparent)', color: '#A855F7',
              border: '1px solid color-mix(in oklch, #A855F7 30%, transparent)',
              letterSpacing: '0.06em',
            }}>? VALIDAR · 7 ASSUNÇÕES</button>
          </div>
          <div className="font-display" style={{ fontSize: 17, fontWeight: 600, marginTop: 2 }}>Controlling · Clara Nobre</div>
        </div>

        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
          <span className="font-mono" style={{ fontSize: 9.5, color: 'var(--text-dim)', letterSpacing: '0.06em' }}>EMPRESA</span>
          <div style={{ display: 'flex', gap: 4 }}>
            {window.CTRL_EMPRESAS.map(e => (
              <button key={e.id} onClick={() => setEmpresa(e.id)} className="font-mono" style={{
                fontSize: 10, padding: '4px 8px', borderRadius: 3, cursor: 'pointer',
                background: empresa === e.id ? e.color : 'transparent',
                color: empresa === e.id ? '#fff' : e.color,
                border: '1px solid ' + (empresa === e.id ? e.color : `color-mix(in oklch, ${e.color} 30%, transparent)`),
                letterSpacing: '0.04em', fontWeight: 700,
              }} title={e.label}>{e.short}</button>
            ))}
          </div>
        </div>
      </div>

      {/* Banner assunções */}
      {showAssumes && (
        <div style={{ flexShrink: 0, padding: '12px 18px', background: 'color-mix(in oklch, #A855F7 5%, var(--bg-elev))', borderBottom: '1px solid color-mix(in oklch, #A855F7 22%, transparent)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <span className="font-mono" style={{ fontSize: 9, padding: '2px 6px', borderRadius: 3, background: '#A855F7', color: '#fff', fontWeight: 700, letterSpacing: '0.06em' }}>VALIDAR COM CLARA</span>
            <span style={{ fontSize: 11.5, color: 'var(--text-muted)' }}>7 suposições da equipa Digi que precisam de confirmação antes do MVP entrar em produção.</span>
            <button onClick={() => setShowAssumes(false)} className="btn btn-xs" style={{ marginLeft: 'auto' }}>✕</button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8, fontSize: 11.5 }}>
            {Object.entries(A).map(([k, v], i) => (
              <div key={k} style={{ padding: '6px 10px', background: 'var(--bg-elev)', borderRadius: 4, border: '1px solid var(--border)', display: 'flex', gap: 8 }}>
                <span className="font-mono" style={{ fontSize: 9.5, color: '#A855F7', fontWeight: 700, flexShrink: 0 }}>#{i+1}</span>
                <span style={{ color: 'var(--text-muted)', lineHeight: 1.5 }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Tabs */}
      <div style={{
        flexShrink: 0, padding: '0 18px', display: 'flex', gap: 0,
        borderBottom: '1px solid var(--border)', background: 'var(--bg-elev)',
      }}>
        {tabs.map(t => (
          <button key={t.k} onClick={() => setTab(t.k)} style={{
            padding: '10px 14px', fontSize: 12, fontWeight: 600, cursor: 'pointer',
            background: 'transparent', border: 'none',
            color: tab === t.k ? 'var(--ai-500)' : 'var(--text-muted)',
            borderBottom: '2px solid ' + (tab === t.k ? 'var(--ai-500)' : 'transparent'),
            marginBottom: -1, display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>
            {t.lbl}
            {t.pill != null && (
              <span className="font-mono" style={{
                fontSize: 9.5, padding: '1px 5px', borderRadius: 3, fontWeight: 700,
                background: tab === t.k ? 'color-mix(in oklch, var(--ai-500) 18%, transparent)' : 'var(--bg-sunken)',
                color: tab === t.k ? 'var(--ai-500)' : 'var(--text-muted)',
              }}>{t.pill}</span>
            )}
          </button>
        ))}
      </div>

      {/* Conteúdo */}
      <div style={{ flex: 1, overflow: 'hidden', padding: 18, position: 'relative' }}>
        {tab === 'resumo'     && <window.CtrlResumoView ctx={ctx} onGoTo={goTo} />}
        {tab === 'fse'        && <window.CtrlFseView ctx={ctx} />}
        {tab === 'compras'    && <window.CtrlComprasView ctx={ctx} />}
        {tab === 'activos'    && <window.CtrlActivosView ctx={ctx} />}
        {tab === 'onboarding' && <window.CtrlOnboardingView ctx={ctx} focusId={focusOnb} />}
        {tab === 'config'     && <window.CtrlConfigView />}
      </div>
    </div>
  );
};

window.ControllingModule = ControllingModule;