/* COMERCIAL wrapper v2 — 5 módulos (DIGI · CLIENTES · CARTEIRA · PROSPECÇÃO · SIMULADOR).
   Sem secondary sidebar — sub-nav vive na sidebar principal (accordion).
   DIGI é a home. As outras 4 são stubs "em build" até fases seguintes. */

// ============ stubs temporários (fases 2-4) ============
const faseStub = (title, fase, desc, bullets) => (
  <div style={{ padding: 40, maxWidth: 760, margin: '0 auto' }}>
    <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em' }}>COMERCIAL · {title.toUpperCase()}</div>
    <h2 className="font-display" style={{ margin: '6px 0 4px', fontSize: 26 }}>{title}</h2>
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '3px 10px', borderRadius: 999, background: 'color-mix(in oklch, var(--warning) 14%, transparent)', color: 'var(--warning)', fontSize: 10.5, fontWeight: 600, letterSpacing: '0.04em', marginBottom: 14 }}>
      <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--warning)' }} /> {fase}
    </div>
    <p style={{ color: 'var(--text-muted)', fontSize: 14, lineHeight: 1.65, maxWidth: 600 }}>{desc}</p>
    {bullets && (
      <ul style={{ color: 'var(--text-muted)', fontSize: 13, lineHeight: 1.8, paddingLeft: 20, marginTop: 14 }}>
        {bullets.map((b, i) => <li key={i}>{b}</li>)}
      </ul>
    )}
    <div className="ai-surface" style={{ marginTop: 24, padding: 16, borderRadius: 10, fontSize: 13, maxWidth: 600 }}>
      <span className="ai-chip"><span className="ai-dot" />Digi</span>
      <p style={{ margin: '10px 0 0', lineHeight: 1.6 }}>Enquanto esta secção não está pronta, pede-me aqui na conversa — já sei responder: <em style={{ color: 'var(--text)' }}>"{`${title === 'Clientes' ? 'mostra-me as conversas ativas' : title === 'Carteira' ? 'quem está pronto para recomprar?' : title === 'Prospecção' ? 'procura sinalética no centro com >15 colab' : 'simula UCJV330 para 800m²'}`}"</em></p>
    </div>
  </div>
);

const ComercialScreenWrapperV2 = ({ variation, onOpenChat }) => {
  const [sub, setSub] = useSubNav('digi-comercial-sub', 'dashboard');

  // Atalhos 1-7
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
      if (e.metaKey || e.ctrlKey || e.altKey) return;
      const map = { '1':'dashboard','2':'digi','3':'clientes','4':'carteira','5':'prospeccao','6':'simulador','7':'bp' };
      if (map[e.key]) setSub(map[e.key]);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  // helper to navigate from inline card clicks
  const navigateSub = (target) => {
    if (target) setSub(target);
  };

  const renderSub = () => {
    if (sub === 'dashboard') return <ScreenComercialDashboard onOpenChat={onOpenChat} onNav={navigateSub} />;
    if (sub === 'digi') return <ComercialDigiScreen onOpenChat={onOpenChat} onNavigateSub={navigateSub} />;
    if (sub === 'clientes') return <ComercialClientesScreen onNavigateSub={navigateSub} />;
    if (sub === 'carteira') return <ScreenComercialCarteira onNav={navigateSub} />;
    if (sub === 'prospeccao') return <ScreenComercialProspeccao onNav={navigateSub} />;
    if (sub === 'simulador') return <ScreenComercialSimulador onNav={navigateSub} />;
    if (sub === 'bp') return <ScreenComercialBP onNav={navigateSub} />;
    return <ScreenComercialDashboard onOpenChat={onOpenChat} onNav={navigateSub} />;
  };

  return (
    <div style={{ background: 'var(--bg)', height: '100%', minHeight: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      <div style={{ flex: 1, minWidth: 0, minHeight: 0, overflow: (sub === 'digi' || sub === 'clientes') ? 'hidden' : 'auto' }} className={(sub === 'digi' || sub === 'clientes') ? '' : ''}>
        {renderSub()}
      </div>
    </div>
  );
};

window.ComercialScreenWrapper = ComercialScreenWrapperV2;