import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route, useParams } from 'react-router-dom';
import './App.css';
import { Nav } from './components/Nav';
import { Hero } from './components/Hero';
import { Footer } from './components/Footer';

// Eagerly loaded: above the fold
import { WhySection } from './components/WhySection';

// Lazy loaded: below the fold (Plotly-heavy sections)
const CircuitExplorer = lazy(() => import('./components/CircuitExplorer').then(m => ({ default: m.CircuitExplorer })));
const PatchingLab = lazy(() => import('./components/PatchingLab').then(m => ({ default: m.PatchingLab })));
const LogitLens = lazy(() => import('./components/LogitLens').then(m => ({ default: m.LogitLens })));
const SparseAutoencoder = lazy(() => import('./components/SparseAutoencoder').then(m => ({ default: m.SparseAutoencoder })));
const FeatureSteering = lazy(() => import('./components/FeatureSteering').then(m => ({ default: m.FeatureSteering })));
const AlignmentHub = lazy(() => import('./components/AlignmentHub').then(m => ({ default: m.AlignmentHub })));
const AttentionViewer = lazy(() => import('./components/AttentionViewer').then(m => ({ default: m.AttentionViewer })));
const WhatBreaks = lazy(() => import('./components/WhatBreaks').then(m => ({ default: m.WhatBreaks })));
const ResearchBlog = lazy(() => import('./components/ResearchBlog').then(m => ({ default: m.ResearchBlog })));
const TechStack = lazy(() => import('./components/TechStack').then(m => ({ default: m.TechStack })));
const ResumeBullet = lazy(() => import('./components/ResumeBullet').then(m => ({ default: m.ResumeBullet })));
const LiveEngineBanner = lazy(() => import('./components/LiveEngineBanner').then(m => ({ default: m.LiveEngineBanner })));

// Blog components
const BlogIndex = lazy(() => import('./components/BlogIndex').then(m => ({ default: m.BlogIndex })));
const BlogPost1 = lazy(() => import('./components/BlogPost1').then(m => ({ default: m.BlogPost1 })));
const BlogPost2 = lazy(() => import('./components/BlogPost2').then(m => ({ default: m.BlogPost2 })));
const BlogPost3 = lazy(() => import('./components/BlogPost3').then(m => ({ default: m.BlogPost3 })));
const BlogPost4 = lazy(() => import('./components/BlogPost4').then(m => ({ default: m.BlogPost4 })));
const BlogPost5 = lazy(() => import('./components/BlogPost5').then(m => ({ default: m.BlogPost5 })));

const SectionLoader = () => (
  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '80px 0', minHeight: 200 }}>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
      <div style={{
        width: 32, height: 32, borderRadius: '50%',
        border: '3px solid #1E2B45', borderTopColor: '#00D9C0',
        animation: 'spin 0.8s linear infinite',
      }} />
      <span style={{ fontSize: 12, color: '#4A5A7A', fontFamily: "'JetBrains Mono', monospace" }}>Loading section...</span>
      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
    </div>
  </div>
);

function HomePage() {
  return (
    <>
      <Nav />
      <main>
        <Hero />
        <WhySection />
        <Suspense fallback={<SectionLoader />}>
          <CircuitExplorer />
        </Suspense>
        <Suspense fallback={<SectionLoader />}>
          <PatchingLab />
        </Suspense>
        <Suspense fallback={<SectionLoader />}>
          <LogitLens />
        </Suspense>
        <Suspense fallback={<SectionLoader />}>
          <SparseAutoencoder />
        </Suspense>
        <Suspense fallback={<SectionLoader />}>
          <FeatureSteering />
        </Suspense>
        <Suspense fallback={<SectionLoader />}>
          <AlignmentHub />
        </Suspense>
        <Suspense fallback={<SectionLoader />}>
          <AttentionViewer />
        </Suspense>
        <Suspense fallback={<SectionLoader />}>
          <WhatBreaks />
        </Suspense>
        <Suspense fallback={<SectionLoader />}>
          <ResearchBlog />
        </Suspense>
        <Suspense fallback={<SectionLoader />}>
          <TechStack />
        </Suspense>
        <Suspense fallback={<SectionLoader />}>
          <ResumeBullet />
        </Suspense>
      </main>
      <Footer />
      <Suspense fallback={null}>
        <LiveEngineBanner />
      </Suspense>
    </>
  );
}

function BlogIndexPage() {
  return (
    <Suspense fallback={<SectionLoader />}>
      <BlogIndex />
    </Suspense>
  );
}

function BlogPostPage() {
  const { slug } = useParams();
  
  const slugMap = {
    'induction-heads-python-shadowing': BlogPost1,
    'backup-name-movers': BlogPost2,
    'cross-layer-features': BlogPost3,
    'dead-feature-graveyard': BlogPost4,
    'ioi-circuit-variance': BlogPost5,
  };
  
  const PostComponent = slugMap[slug];

  return (
    <Suspense fallback={<SectionLoader />}>
      {PostComponent ? <PostComponent /> : <BlogIndex />}
    </Suspense>
  );
}

function App() {
  return (
    <BrowserRouter>
      <div style={{ background: '#060810', minHeight: '100vh' }}>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/blog" element={<BlogIndexPage />} />
          <Route path="/blog/:slug" element={<BlogPostPage />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;