import { NavLink } from 'react-router-dom';
import {
  Home, Briefcase, FlaskConical, Target, TrendingUp,
  SlidersHorizontal, Star, Bell, Settings, ChartNoAxesCombined,
} from 'lucide-react';
import { useAppContext } from '../../context/AppContext';
import { getPlansRoute } from '../../views/tradePlansRoutes';

const NAV = [
  { to: '/',           icon: Home,              label: 'Home',      end: true  },
  { to: '/portfolio',  icon: Briefcase,         label: 'Portfolio', end: false },
  { to: '/research',   icon: FlaskConical,      label: 'Research',  end: false },
  { to: getPlansRoute(), icon: Target,          label: 'Plans',     end: false },
  { to: '/markets',    icon: TrendingUp,        label: 'Markets',   end: false },
  { to: '/screener',   icon: SlidersHorizontal, label: 'Screener',  end: false },
  { to: '/watchlist',  icon: Star,              label: 'Watchlist', end: false },
  { to: '/alerts',     icon: Bell,              label: 'Alerts',    end: false },
  { to: '/settings',   icon: Settings,          label: 'Settings',  end: false },
];

export function Sidebar() {
  const { user, handleSignOut } = useAppContext();
  const initials = user?.email
    ? user.email.slice(0, 2).toUpperCase()
    : 'US';

  return (
    <aside className="trading-sidebar">
      {/* Logo */}
      <div className="trading-sidebar-logo" aria-label="ByteLyst trading">
        <ChartNoAxesCombined size={22} />
        <div className="trading-sidebar-brand">
          <strong>ByteLyst</strong>
          <span>Trading OS</span>
        </div>
      </div>

      {/* Nav items */}
      <nav className="trading-sidebar-nav">
        {NAV.map(({ to, icon: Icon, label, end }) => (
          <NavLink
            key={to}
            to={to}
            end={end}
            className={({ isActive }) => `trading-sidebar-link${isActive ? ' is-active' : ''}`}
          >
            {({ isActive }) => (
              <>
                <Icon size={20} strokeWidth={isActive ? 2.2 : 1.8} />
                <span>{label}</span>
              </>
            )}
          </NavLink>
        ))}
      </nav>

      {/* User avatar */}
      <div
        className="trading-sidebar-avatar"
        title={`${user?.email ?? ''} — click to sign out`}
        onClick={handleSignOut}
      >
        {initials}
        <span className="trading-sidebar-avatar-status" />
      </div>
    </aside>
  );
}