/**
 * App — Main Router and Sidebar layout
 */

import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import Playground from './pages/Playground';
import MemoryExplorer from './pages/MemoryExplorer';
import SessionView from './pages/SessionView';

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

  const links = [
    { path: '/', label: 'Playground', icon: '[ P ]' },
    { path: '/dashboard', label: 'Dashboard', icon: '[ D ]' },
    { path: '/explorer', label: 'Explorer', icon: '[ E ]' },
    { path: '/sessions', label: 'Sessions', icon: '[ S ]' },
  ];

  return (
    <div
      style={{
        width: '260px',
        background: '#111110',
        borderRight: '1px solid var(--color-border)',
        display: 'flex',
        flexDirection: 'column',
        padding: '24px',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '40px' }}>
        <span className="font-mono" style={{ fontSize: '14px', fontWeight: 600, letterSpacing: '0.1em', color: 'var(--color-text-primary)' }}>
          MEMORYOS // ADMIN
        </span>
      </div>

      <nav style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
        {links.map((link) => {
          const active = location.pathname === link.path;
          return (
            <Link
              key={link.path}
              to={link.path}
              className="font-mono"
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: '12px',
                padding: '12px 16px',
                color: active ? 'var(--color-text-primary)' : 'var(--color-text-muted)',
                background: active ? 'var(--color-surface-alt)' : 'transparent',
                border: `1px solid ${active ? 'var(--color-border-light)' : 'transparent'}`,
                textDecoration: 'none',
                fontSize: '11px',
                fontWeight: active ? 600 : 400,
                letterSpacing: '0.05em',
                transition: 'all 0.2s ease',
              }}
              onMouseEnter={(e) => {
                if (!active) {
                  e.currentTarget.style.color = 'var(--color-text-secondary)';
                }
              }}
              onMouseLeave={(e) => {
                if (!active) {
                  e.currentTarget.style.color = 'var(--color-text-muted)';
                }
              }}
            >
              <span style={{ fontSize: '11px', opacity: 0.8 }}>{link.icon}</span>
              {link.label.toUpperCase()}
            </Link>
          );
        })}
      </nav>

      <div style={{ marginTop: 'auto', paddingTop: '24px', borderTop: '1px solid var(--color-border)', display: 'flex', alignItems: 'center', gap: '12px' }}>
        <a href="http://localhost:8000/docs" target="_blank" rel="noreferrer" className="font-mono" style={{ fontSize: '11px', color: 'var(--color-text-muted)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '8px', letterSpacing: '0.05em' }}>
          <span>[ DOCS ]</span> API Reference
        </a>
      </div>
    </div>
  );
}

export default function App() {
  return (
    <Router>
      <div style={{ display: 'flex', minHeight: '100vh', width: '100%' }}>
        <Sidebar />
        <main style={{ flex: 1, overflow: 'auto', background: 'var(--color-surface)' }}>
          <Routes>
            <Route path="/" element={<Playground />} />
            <Route path="/dashboard" element={<Dashboard />} />
            <Route path="/explorer" element={<MemoryExplorer />} />
            <Route path="/sessions" element={<SessionView />} />
          </Routes>
        </main>
      </div>
    </Router>
  );
}