import { Suspense, lazy } from 'react';
import { Link, Routes, Route, Navigate, useLocation } from 'react-router-dom';
import { Sidebar } from './Sidebar';
import { Header } from './Header';
import { RightPanel } from './RightPanel';
import { Button } from '../ui/button';

const HomeView = lazy(() => import('../../views/HomeView').then((mod) => ({ default: mod.HomeView })));
const PortfolioView = lazy(() => import('../../views/PortfolioView').then((mod) => ({ default: mod.PortfolioView })));
const ResearchView = lazy(() => import('../../views/ResearchView').then((mod) => ({ default: mod.ResearchView })));
const SimpleView = lazy(() => import('../../views/SimpleView').then((mod) => ({ default: mod.SimpleView })));
const MarketsView = lazy(() => import('../../views/MarketsView').then((mod) => ({ default: mod.MarketsView })));
const ScreenerView = lazy(() => import('../../views/ScreenerView').then((mod) => ({ default: mod.ScreenerView })));
const WatchlistView = lazy(() => import('../../views/WatchlistView').then((mod) => ({ default: mod.WatchlistView })));
const AlertsView = lazy(() => import('../../views/AlertsView').then((mod) => ({ default: mod.AlertsView })));
const SettingsView = lazy(() => import('../../views/SettingsView').then((mod) => ({ default: mod.SettingsView })));

function RouteFallback() {
  return (
    <section
      aria-live="polite"
      style={{
        minHeight: 320,
        borderRadius: 24,
        border: '1px solid var(--border)',
        background: 'var(--card)',
        color: 'var(--foreground)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: 14,
        fontWeight: 700,
      }}
    >
      Loading workspace…
    </section>
  );
}

function NotFoundView() {
  const location = useLocation();

  return (
    <section
      aria-labelledby="not-found-title"
      style={{
        minHeight: 420,
        borderRadius: 24,
        border: '1px solid var(--border)',
        background: 'var(--hero-gradient)',
        padding: '56px 32px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center',
        color: 'var(--foreground)',
      }}
    >
      <div style={{ fontSize: 12, fontWeight: 900, letterSpacing: '0.16em', color: 'var(--accent)', textTransform: 'uppercase' }}>
        404
      </div>
      <h1 id="not-found-title" style={{ margin: '10px 0 8px', fontSize: 34, fontWeight: 900 }}>
        Route not found
      </h1>
      <p style={{ margin: 0, maxWidth: 520, color: 'var(--muted-foreground)', fontSize: 14, lineHeight: 1.6 }}>
        No trading workspace exists at <code style={{ fontWeight: 800 }}>{location.pathname}</code>. The app is still running normally.
      </p>
      <Link to="/" style={{ marginTop: 24, textDecoration: 'none' }}>
        <Button>Return home</Button>
      </Link>
    </section>
  );
}

function SimpleAliasRedirect() {
  const location = useLocation();
  return <Navigate to={`/plans${location.search}${location.hash}`} replace />;
}

export function AppShell() {
  return (
    <div className="dashboard-shell">
      {/* Fixed left sidebar */}
      <Sidebar />

      {/* Main area (right of sidebar) */}
      <div className="dashboard-main">
        {/* Sticky header */}
        <Header />

        {/* Content row: main + right panel */}
        <div className="dashboard-content-row">
          {/* Scrollable main content */}
          <main className="dashboard-content">
            <Suspense fallback={<RouteFallback />}>
              <Routes>
                <Route path="/"          element={<HomeView />} />
                <Route path="/portfolio" element={<PortfolioView />} />
                <Route path="/research"  element={<ResearchView />} />
                <Route path="/plans"     element={<SimpleView />} />
                <Route path="/simple"    element={<SimpleAliasRedirect />} />
                <Route path="/markets"   element={<MarketsView />} />
                <Route path="/screener"  element={<ScreenerView />} />
                <Route path="/watchlist" element={<WatchlistView />} />
                <Route path="/alerts"    element={<AlertsView />} />
                <Route path="/settings"  element={<SettingsView />} />
                <Route path="*"          element={<NotFoundView />} />
              </Routes>
            </Suspense>
          </main>

          {/* Fixed right panel */}
          <RightPanel />
        </div>
      </div>
    </div>
  );
}
