import { NavLink } from 'react-router-dom';
import {
  LayoutGrid,
  Trophy,
  FlaskConical,
  ScanLine,
  LineChart,
  ParkingSquare,
} from 'lucide-react';

const NAV = [
  { to: '/', icon: LayoutGrid, label: 'Overview', end: true },
  { to: '/leaderboard', icon: Trophy, label: 'Leaderboard' },
  { to: '/experiments', icon: FlaskConical, label: 'Strategies' },
  { to: '/backtest', icon: ScanLine, label: 'Backtest' },
  { to: '/paper', icon: LineChart, label: 'Paper Trading' },
];

const DOCS_NAV = [
  { to: '/docs/cash-parking', icon: ParkingSquare, label: 'Cash Parking' },
];

export function Sidebar() {
  return (
    <aside
      style={{
        width: 'var(--sidebar-w, 230px)',
        background: 'var(--bg1)',
        borderRight: '1px solid var(--border)',
        display: 'flex',
        flexDirection: 'column',
        position: 'fixed',
        left: 0,
        top: 0,
        height: '100%',
        zIndex: 30,
      }}
    >
      {/* Logo */}
      <div style={{ padding: '20px 18px 16px', borderBottom: '1px solid var(--border)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div
            style={{
              width: 30,
              height: 30,
              borderRadius: 7,
              background: 'linear-gradient(135deg, var(--cyan) 0%, #0052cc 100%)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              boxShadow: '0 2px 8px rgba(0,119,182,0.25)',
              flexShrink: 0,
            }}
          >
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 3h12v3H7v2h5v3H7v4H3V3z" fill="white"/>
            </svg>
          </div>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 16, color: 'var(--text1)', letterSpacing: '-0.01em' }}>
              Fithia2
            </div>
            <div style={{ fontSize: 12, color: 'var(--text3)', letterSpacing: '0.05em', marginTop: 1 }}>
              STRATEGY OS
            </div>
          </div>
        </div>
      </div>

      {/* Nav */}
      <nav style={{ flex: 1, padding: '12px 10px', display: 'flex', flexDirection: 'column', gap: 2, overflowY: 'auto' }}>
        {NAV.map(({ to, icon: Icon, label, end }) => (
          <NavLink
            key={to}
            to={to}
            end={end}
            style={({ isActive }) => ({
              display: 'flex',
              alignItems: 'center',
              gap: 9,
              padding: '9px 11px',
              borderRadius: 8,
              fontSize: 15,
              fontWeight: 500,
              textDecoration: 'none',
              transition: 'all 0.12s',
              position: 'relative',
              color: isActive ? 'var(--cyan)' : 'var(--text2)',
              background: isActive ? 'var(--cyan-dim)' : 'transparent',
              borderLeft: isActive ? '2px solid var(--cyan)' : '2px solid transparent',
            })}
          >
            {({ isActive }) => (
              <>
                <Icon size={15} style={{ opacity: isActive ? 1 : 0.65 }} />
                <span>{label}</span>
              </>
            )}
          </NavLink>
        ))}

        {/* Docs section */}
        <div style={{ marginTop: 16, paddingTop: 12, borderTop: '1px solid var(--border)' }}>
          <div style={{ padding: '2px 11px 8px', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.10em', textTransform: 'uppercase', color: 'var(--text3)' }}>
            Docs
          </div>
          {DOCS_NAV.map(({ to, icon: Icon, label }) => (
            <NavLink
              key={to}
              to={to}
              style={({ isActive }) => ({
                display: 'flex',
                alignItems: 'center',
                gap: 9,
                padding: '8px 11px',
                borderRadius: 8,
                fontSize: 14,
                fontWeight: 500,
                textDecoration: 'none',
                transition: 'all 0.12s',
                color: isActive ? 'var(--orange)' : 'var(--text3)',
                background: isActive ? 'color-mix(in srgb, var(--orange) 10%, transparent)' : 'transparent',
                borderLeft: isActive ? '2px solid var(--orange)' : '2px solid transparent',
              })}
            >
              {({ isActive }) => (
                <>
                  <Icon size={14} style={{ opacity: isActive ? 1 : 0.55 }} />
                  <span>{label}</span>
                </>
              )}
            </NavLink>
          ))}
        </div>
      </nav>

      {/* Footer */}
      <div style={{ padding: '14px 18px', borderTop: '1px solid var(--border)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
          <div
            style={{
              width: 7,
              height: 7,
              borderRadius: '50%',
              background: 'var(--green)',
              animation: 'pulse-line 2s infinite',
            }}
          />
          <span style={{ fontSize: 12, fontFamily: 'var(--font-mono)', color: 'var(--text3)', letterSpacing: '0.05em' }}>
            LOCAL · v1.0
          </span>
        </div>
      </div>
    </aside>
  );
}
