// NCS Presale Dashboard — interactive shell
const TABS = [
  { id: 'allprojects', label: 'All Projects',    icon: <Icon name="list"      size={15} /> },
  { id: 'overview',   label: 'Sales Command',    icon: <Icon name="bar-chart" size={15} /> },
  { id: 'products',   label: 'Product / Dist',   icon: <Icon name="package"   size={15} /> },
  { id: 'customer',   label: 'Customers',         icon: <Icon name="users"     size={15} /> },
  { id: 'report',     label: 'Report',            icon: <Icon name="file-text" size={15} /> },
];

function LoadingScreen() {
  const DSA = window.NCSPresaleDesignSystem_3f9137;
  return (
    <div style={{ minHeight: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 20, padding: 24 }}>
      <div style={{ background: '#fff', padding: '14px 20px', borderRadius: 12, boxShadow: '0 8px 30px rgba(0,0,0,0.4)' }}>
        <img src="../../assets/yip-next-logo.png" alt="YIPINTSOI NEXT" style={{ height: 40, display: 'block' }} />
      </div>
      <DSA.Spinner size="lg" />
      <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.35)' }}>FETCHING RECORDS…</div>
    </div>
  );
}

function ErrorScreen({ error }) {
  return (
    <div style={{ minHeight: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 14, padding: 24 }}>
      <div style={{ fontSize: 13, fontWeight: 800, color: '#f43f5e' }}>Failed to load pipeline data</div>
      <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)', fontFamily: 'monospace' }}>{error}</div>
    </div>
  );
}

function App() {
  const DSA = window.NCSPresaleDesignSystem_3f9137;
  const [authed, setAuthed] = React.useState(false);
  const [tab, setTab]       = React.useState('overview');
  const [chips, setChips]   = React.useState(['Active']);
  const [query, setQuery]   = React.useState('');
  const [theme, toggleTheme] = window.useTheme();
  const { loading, error }  = window.useData();

  if (!authed) return <Login onEnter={() => setAuthed(true)} />;
  if (loading)  return <LoadingScreen />;
  if (error)    return <ErrorScreen error={error} />;

  const placeholder = (title) => (
    <div style={{ padding: '60px 20px', textAlign: 'center', border: '1px dashed var(--border-strong, rgba(255,255,255,0.1))', borderRadius: 14, color: 'var(--text-faint, rgba(255,255,255,0.35))', fontSize: 13, fontWeight: 600 }}>
      {title} — not included in this kit recreation.
    </div>
  );

  return (
    <div style={{ minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      <AppHeader onTab={setTab} activeTab={tab} theme={theme} onToggleTheme={toggleTheme} />
      <div style={{ position: 'sticky', top: 64, zIndex: 40 }}>
        <GlobalFilter chips={chips} setChips={setChips} query={query} setQuery={setQuery} />
        <div style={{ background: 'var(--bg-sidebar, rgba(11,17,32,0.96))', backdropFilter: 'blur(16px)', borderBottom: '1px solid var(--border-card, rgba(255,255,255,0.07))' }}>
          <div style={{ maxWidth: 1400, margin: '0 auto', padding: '0 24px' }}>
            <DSA.TabBar tabs={TABS} value={tab} onChange={setTab} />
          </div>
        </div>
      </div>
      <main style={{ flex: 1 }}>
        <div className="ncs-page" style={{ maxWidth: 1400, margin: '0 auto', padding: '16px 24px 60px', display: 'flex', flexDirection: 'column', gap: 16 }}>
          <KpiRow />
          {tab === 'overview'    && <SalesCommand />}
          {tab === 'allprojects' && <ProjectsView query={query} chips={chips} />}
          {tab === 'products'    && placeholder('Product / Distributor analytics')}
          {tab === 'customer'    && placeholder('Customer view')}
          {tab === 'report'      && placeholder('Report builder')}
          {tab === 'register'    && placeholder('Register Pipeline form')}
          {tab === 'update'      && placeholder('Update Pipeline form')}
        </div>
      </main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);