class BusinessAIErrorBoundary 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(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em', marginBottom: 8 }}>BUSINESS & AI · ERRO</div>
          <h2 style={{ margin: '0 0 8px', fontSize: 20 }}>Erro ao carregar secção</h2>
          <div style={{ padding: '12px 16px', background: 'var(--bg-sunken)', border: '1px solid var(--border)', borderRadius: 8, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)', 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;
  }
}

const BUSINESS_AI_VALID_SUBS = ['pipeline','roadmap','sugestoes','editar','definir-dashboard','gerir-dashboards'];

const BusinessAIWrapper = ({ user }) => {
  const [sub, setSub] = window.useSubNav('digi-business-sub', 'pipeline');
  const activeSub = BUSINESS_AI_VALID_SUBS.includes(sub) ? sub : 'pipeline';
  React.useEffect(() => { if (activeSub !== sub) setSub('pipeline'); }, [sub]);
  return (
    <BusinessAIErrorBoundary key={activeSub}>
      <div style={{ flex:1, display:'flex', flexDirection:'column', overflow:'hidden' }}>
        {activeSub === 'pipeline'          && <BusinessAIPipelineScreen  user={user} />}
        {activeSub === 'roadmap'           && <BusinessAIRoadmapScreen   user={user} />}
        {activeSub === 'sugestoes'         && <BusinessAISugestoesScreen user={user} />}
        {activeSub === 'editar'            && <BusinessAIEditorScreen    user={user} />}
        {activeSub === 'definir-dashboard' && <BusinessAIDefinirDashboard user={user} />}
        {activeSub === 'gerir-dashboards'  && <BusinessAIGerirDashboards  user={user} />}
      </div>
    </BusinessAIErrorBoundary>
  );
};
window.BusinessAIWrapper = BusinessAIWrapper;