/* 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. */

// ============ Design System boot (Digidelta Portal DS) ============
// Carrega Montserrat + Inter (Google Fonts) e tokens locais uma só vez.
// Não toca nem entra em conflito com portal/public/styles/tokens.css.
(function bootDigideltaDesignSystem () {
  if (typeof document === 'undefined' || window.__DGD_DS_LOADED) return;
  window.__DGD_DS_LOADED = true;
  const head = document.head;
  const fonts = document.createElement('link');
  fonts.rel = 'stylesheet';
  fonts.href = 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap';
  head.appendChild(fonts);
  const tokens = document.createElement('link');
  tokens.rel = 'stylesheet';
  tokens.href = 'design-system/tokens.css';
  head.appendChild(tokens);
})();

// ============ Error boundary (previne blank screen em crashes de sub-ecrã) ============
class SubScreenErrorBoundary extends React.Component {
  constructor(props) { super(props); this.state = { error: null }; }
  static getDerivedStateFromError(err) { return { error: err }; }
  render() {
    if (this.state.error) {
      return (
        <div style={{ padding: 40, maxWidth: 600, margin: '40px auto' }}>
          <div style={{ fontSize: 10, color: 'var(--dgd-fg-3)', fontFamily: 'var(--dgd-font-mono)', letterSpacing: '0.08em', marginBottom: 8 }}>COMERCIAL · ERRO</div>
          <h2 style={{ margin: '0 0 8px', fontSize: 20, color: 'var(--dgd-fg-1)' }}>Erro ao carregar secção</h2>
          <div style={{ padding: '12px 16px', background: 'var(--dgd-bg-surface)', border: '1px solid var(--dgd-border-1)', borderRadius: 8, fontFamily: 'var(--dgd-font-mono)', fontSize: 12, color: 'var(--dgd-fg-2)', marginBottom: 16 }}>
            {this.state.error.message || String(this.state.error)}
          </div>
          <button className="btn btn-primary" onClick={() => this.setState({ error: null })} style={{ fontSize: 12 }}>
            Tentar novamente
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

// ============ 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(--dgd-fg-3)', fontFamily: 'var(--dgd-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(--dgd-pumpkin-700) 14%, transparent)', color: 'var(--dgd-pumpkin-700)', fontSize: 10.5, fontWeight: 600, letterSpacing: '0.04em', marginBottom: 14 }}>
      <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--dgd-pumpkin-700)' }} /> {fase}
    </div>
    <p style={{ color: 'var(--dgd-fg-2)', fontSize: 14, lineHeight: 1.65, maxWidth: 600 }}>{desc}</p>
    {bullets && (
      <ul style={{ color: 'var(--dgd-fg-2)', 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(--dgd-fg-1)' }}>"{`${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, userTipo, userName, vendedorId }) => {
  const isComercial = userTipo === 'comercial';
  const [sub, setSub] = useSubNav('digi-comercial-sub', isComercial ? 'dashboard' : 'digi');
  const [bpStage, setBpStage] = React.useState(null);

  // Atalhos 1-7 (dashboard só para comercial)
  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 = isComercial
        ? { '1':'dashboard','2':'digi','3':'clientes','4':'carteira','5':'prospeccao','6':'simulador','7':'bp' }
        : { '1':'digi','2':'clientes','3':'carteira','4':'prospeccao','5':'simulador','6':'bp' };
      if (map[e.key]) setSub(map[e.key]);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [isComercial]);

  // helper to navigate from inline card clicks; stage optional (para deep-link no BP)
  const navigateSub = (target, stage) => {
    if (target) setSub(target);
    setBpStage(stage || null);
  };

  const renderSub = () => {
    const effectiveSub = (sub === 'dashboard' && !isComercial) ? 'digi' : sub;
    if (effectiveSub === 'dashboard') return <ScreenComercialDashboard onOpenChat={onOpenChat} onNav={navigateSub} userName={userName} vendedorId={vendedorId} />;
    if (effectiveSub === 'digi') return <ComercialDigiScreen onOpenChat={onOpenChat} onNavigateSub={navigateSub} />;
    if (sub === 'clientes') return <ComercialClientesScreen onNavigateSub={navigateSub} />;
    if (sub === 'carteira') return <ScreenComercialCarteira onNav={navigateSub} vendedorId={vendedorId} />;
    if (sub === 'prospeccao') return <ScreenComercialProspeccao onNav={navigateSub} />;
    if (sub === 'simulador') return <ScreenComercialSimulador onNav={navigateSub} />;
    if (sub === 'bp') return <ScreenComercialBP onNav={navigateSub} vendedorId={vendedorId} initialStage={bpStage} />;
    return <ComercialDigiScreen onOpenChat={onOpenChat} onNavigateSub={navigateSub} />;
  };

  return (
    <div style={{ background: 'var(--dgd-bg-app)', 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') ? '' : ''}>
        <SubScreenErrorBoundary key={sub}>
          {renderSub()}
        </SubScreenErrorBoundary>
      </div>
    </div>
  );
};

window.ComercialScreenWrapper = ComercialScreenWrapperV2;