/* App — routing + state */

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "rust",
  "density": "comfortable",
  "sidebarStyle": "labeled"
}/*EDITMODE-END*/;

const ACCENTS = {
  rust:    { accent: '#D14F1B', hover: '#B33F12', subtle: '#FCEEE6', text: '#8C2F08', light: '#E0612C', muted: 'rgba(209, 79, 27, 0.07)' },
  indigo:  { accent: '#4F46E5', hover: '#3F37C2', subtle: '#EEF1FE', text: '#312A9E', light: '#6F66F0', muted: 'rgba(79, 70, 229, 0.07)' },
  forest:  { accent: '#2D7A3A', hover: '#225E2C', subtle: '#EBF5EC', text: '#1B4D26', light: '#449851', muted: 'rgba(45, 122, 58, 0.07)' },
  charcoal:{ accent: '#1A1A18', hover: '#000000', subtle: '#EFEEEC', text: '#0A0A08', light: '#3A3A36', muted: 'rgba(26, 26, 24, 0.07)' },
};

function applyAccent(name) {
  const c = ACCENTS[name] || ACCENTS.rust;
  const root = document.documentElement;
  root.style.setProperty('--accent', c.accent);
  root.style.setProperty('--accent-hover', c.hover);
  root.style.setProperty('--accent-subtle', c.subtle);
  root.style.setProperty('--accent-text', c.text);
  root.style.setProperty('--accent-light', c.light);
  root.style.setProperty('--accent-muted', c.muted);
}

function App() {
  const [view, setView] = useState('login'); // login | signup | onboarding | app
  const [page, setPage] = useState('home');
  const [user, setUser] = useState(null);
  const [credits, setCredits] = useState(7762);
  const [indexes, setIndexes] = useState(MOCK_INDEXES);
  const [openIndex, setOpenIndex] = useState(null);
  const [showCreate, setShowCreate] = useState(false);
  const [tweaks, setTweaks] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => { applyAccent(tweaks.accent); }, [tweaks.accent]);

  const handleAuth = (u) => {
    setUser(u);
    setView('onboarding');
    setPage('home');
  };

  const handleLogout = () => {
    setUser(null);
    setView('login');
    setPage('home');
  };

  const handleNavigate = (p) => {
    setPage(p);
    setOpenIndex(null);
  };

  const breadcrumb = (() => {
    const map = { home: ['Home'], indexes: ['Indexes'], dwarf: ['Ingestion', 'Dwarf'], mellon: ['Ingestion', 'Mellon'], anvesha: ['Search', 'Anvesha'], tools: ['Tools'], api: ['Developer', 'API Keys'], docs: ['Documentation'], credits: ['Account', 'Credits & Billing'], settings: ['Account', 'Settings'] };
    if (page === 'indexes' && openIndex) return ['Indexes', openIndex.name];
    return map[page] || [];
  })();

  if (view === 'login') return <Login onAuth={handleAuth} onSwitch={() => setView('signup')} />;
  if (view === 'signup') return <Signup onAuth={handleAuth} onSwitch={() => setView('login')} />;
  if (view === 'onboarding') return <Onboarding user={user} onComplete={() => { setView('app'); setUser({ ...user, isReturning: true }); }} />;

  return (
    <div className="app-root">
      <Sidebar active={page} onNavigate={handleNavigate} user={user} credits={credits} />
      <div className="main-area">
        <Topbar
          breadcrumb={breadcrumb}
          user={user}
          onLogout={handleLogout}
          actions={page === 'home' && (
            <div style={{ position: 'relative', width: 280 }}>
              <Icon.Search size={13} color="var(--text-tertiary)"
                style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)' }} />
              <input className="input" placeholder="Search across workspace…"
                style={{ paddingLeft: 30, height: 32, fontSize: 12 }} />
              <span className="mono" style={{ position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)', fontSize: 10, color: 'var(--text-tertiary)', background: 'var(--bg-inset)', padding: '2px 5px', borderRadius: 3 }}>⌘K</span>
            </div>
          )}
        />

        <div key={page + (openIndex?.id || '')} className="fade-in">
          {page === 'home' && <DashboardHome user={user} credits={credits} onNavigate={handleNavigate} />}
          {page === 'indexes' && !openIndex && <IndexesList indexes={indexes} onOpenIndex={setOpenIndex} onCreate={() => setShowCreate(true)} />}
          {page === 'indexes' && openIndex && <IndexDetail index={openIndex} onBack={() => setOpenIndex(null)} />}
          {page === 'dwarf' && <DwarfPage />}
          {page === 'mellon' && <MellonPage />}
          {page === 'anvesha' && <AnveshaPage />}
          {page === 'tools' && <ToolsPage />}
          {page === 'api' && <ApiKeysPage />}
          {page === 'docs' && <DocsPage />}
          {page === 'credits' && <CreditsPage credits={credits} onAddCredits={(n) => setCredits(credits + n)} />}
          {page === 'settings' && <SettingsPage user={user} onLogout={handleLogout} />}
        </div>
      </div>

      <CreateIndexModal
        open={showCreate}
        onClose={() => setShowCreate(false)}
        onCreated={(idx) => { setIndexes([idx, ...indexes]); setShowCreate(false); setOpenIndex(idx); }} />

      <TweaksPanel title="Tweaks" defaultPosition={{ right: 20, bottom: 20 }}>
        <TweakSection label="Accent">
          <TweakRadio
            value={tweaks.accent}
            onChange={(v) => setTweaks('accent', v)}
            options={[
              { value: 'rust', label: 'Rust' },
              { value: 'indigo', label: 'Indigo' },
              { value: 'forest', label: 'Forest' },
              { value: 'charcoal', label: 'Charcoal' },
            ]} />
        </TweakSection>
        <TweakSection label="Surface">
          <TweakRadio
            value={tweaks.density}
            onChange={(v) => setTweaks('density', v)}
            options={[
              { value: 'comfortable', label: 'Comfortable' },
              { value: 'compact', label: 'Compact' },
            ]} />
        </TweakSection>
        <TweakSection label="Quick jumps">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
            {[
              ['Login', () => { setUser(null); setView('login'); }],
              ['Signup', () => { setUser(null); setView('signup'); }],
              ['Onboarding', () => { setUser({ name: 'Demo User', email: 'demo@vamana.ai' }); setView('onboarding'); }],
              ['Dashboard', () => { setUser({ name: 'Demo User', email: 'demo@vamana.ai', isReturning: true }); setView('app'); setPage('home'); }],
            ].map(([l, fn]) => (
              <button key={l} onClick={fn} className="btn btn-secondary btn-sm" style={{ fontSize: 11 }}>{l}</button>
            ))}
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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