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, Skeleton } from '../ui/Primitives';
import { getLegacySimpleRoute, getPlansRoute } from '../../views/tradePlansRoutes';

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"
      className="route-fallback route-fallback-inline"
    >
      <div className="route-fallback-status">
        <div className="route-fallback-spinner" aria-hidden="true" />
        <span>Loading workspace…</span>
      </div>
      <div className="route-fallback-preview" aria-hidden="true">
        <Skeleton shape="text" className="route-fallback-title" />
        <Skeleton className="route-fallback-card" />
        <Skeleton className="route-fallback-card route-fallback-card-short" />
      </div>
    </section>
  );
}

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

  return (
    <section
      aria-labelledby="not-found-title"
      className="route-empty-state"
    >
      <div className="route-empty-eyebrow">
        404
      </div>
      <h1 id="not-found-title">
        Route not found
      </h1>
      <p>
        No trading workspace exists at <code style={{ fontWeight: 800 }}>{location.pathname}</code>. The app is still running normally.
      </p>
      <Link to="/" className="route-empty-action">
        <Button>Return home</Button>
      </Link>
    </section>
  );
}

function SimpleAliasRedirect() {
  const location = useLocation();
  return <Navigate to={`${getPlansRoute()}${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={getPlansRoute()} element={<SimpleView />} />
                <Route path={getLegacySimpleRoute()} 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>
  );
}
