import { Link, Routes, Route, useLocation } from 'react-router-dom';
import { Sidebar } from './Sidebar';
import { Header } from './Header';
import { RightPanel } from './RightPanel';
import { HomeView }      from '../../views/HomeView';
import { PortfolioView } from '../../views/PortfolioView';
import { ResearchView }  from '../../views/ResearchView';
import { SimpleView }    from '../../views/SimpleView';
import { MarketsView }   from '../../views/MarketsView';
import { ScreenerView }  from '../../views/ScreenerView';
import { WatchlistView } from '../../views/WatchlistView';
import { AlertsView }    from '../../views/AlertsView';
import { SettingsView }  from '../../views/SettingsView';

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

  return (
    <section
      aria-labelledby="not-found-title"
      style={{
        minHeight: 420,
        borderRadius: 24,
        border: '1px solid #E5E7EB',
        background: 'linear-gradient(135deg, #FFF7ED 0%, #EFF6FF 100%)',
        padding: '56px 32px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center',
        color: '#111827',
      }}
    >
      <div style={{ fontSize: 12, fontWeight: 900, letterSpacing: '0.16em', color: '#2563EB', 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: '#4B5563', 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,
          borderRadius: 999,
          background: '#111827',
          color: '#fff',
          padding: '10px 18px',
          fontSize: 13,
          fontWeight: 800,
          textDecoration: 'none',
        }}
      >
        Return home
      </Link>
    </section>
  );
}

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">
            <Routes>
              <Route path="/"          element={<HomeView />} />
              <Route path="/portfolio" element={<PortfolioView />} />
              <Route path="/research"  element={<ResearchView />} />
              <Route path="/simple"    element={<SimpleView />} />
              <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>
          </main>

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