import { useState, useEffect } from 'react';
import { LandingPage } from './pages/LandingPage';
import { GeneratePage } from './pages/GeneratePage';
import { AnalyzePage } from './pages/AnalyzePage';
import { HistoryPage } from './pages/HistoryPage';
import { SettingsPage } from './pages/SettingsPage';

type Page = 'landing' | 'generate' | 'analyze' | 'history' | 'settings';

function useHashRouter(): [Page, (p: Page) => void] {
  const getPage = (): Page => {
    const hash = window.location.hash.slice(1) || 'landing';
    if (['landing', 'generate', 'analyze', 'history', 'settings'].includes(hash)) return hash as Page;
    return 'landing';
  };
  const [page, setPage] = useState<Page>(getPage());
  useEffect(() => {
    const handler = () => setPage(getPage());
    window.addEventListener('hashchange', handler);
    return () => window.removeEventListener('hashchange', handler);
  }, []);
  const navigate = (p: Page) => {
    window.location.hash = p === 'landing' ? '' : p;
    setPage(p);
    window.scrollTo(0, 0);
  };
  return [page, navigate];
}

function Navbar({ page, onNavigate }: { page: Page; onNavigate: (p: Page) => void }) {
  if (page === 'landing') return null;

  const links: { id: Page; label: string }[] = [
    { id: 'generate', label: 'Generate' },
    { id: 'analyze', label: 'Analyze' },
    { id: 'history', label: 'History' },
    { id: 'settings', label: 'Settings' },
  ];

  return (
    <nav className="sticky top-0 z-50 glass-nav">
      <div className="max-w-7xl mx-auto px-6 py-3 flex items-center justify-between">
        <button onClick={() => onNavigate('landing')} className="flex items-center gap-2 hover:opacity-80 transition">
          <div className="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center text-blue-600 text-lg">🧪</div>
          <span className="font-bold text-slate-900 text-sm tracking-tight">TestGenius AI</span>
        </button>
        <div className="flex gap-1">
          {links.map(l => (
            <button key={l.id} onClick={() => onNavigate(l.id)}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                page === l.id
                  ? 'bg-blue-50 text-blue-700 border border-blue-100'
                  : 'text-slate-500 hover:text-slate-900 hover:bg-slate-50 border border-transparent'
              }`}>
              {l.label}
            </button>
          ))}
        </div>
      </div>
    </nav>
  );
}

export default function App() {
  const [page, navigate] = useHashRouter();

  return (
    <div className="min-h-screen" style={{ backgroundColor: 'var(--cn-bg)', color: 'var(--cn-text)' }}>
      <Navbar page={page} onNavigate={navigate} />
      <main className="animate-fade-in">
        {page === 'landing' && <LandingPage onNavigate={navigate} />}
        {page === 'generate' && <GeneratePage />}
        {page === 'analyze' && <AnalyzePage />}
        {page === 'history' && <HistoryPage />}
        {page === 'settings' && <SettingsPage />}
      </main>
    </div>
  );
}
