import { useApp } from '../context/AppContext';
import { NavLink } from 'react-router-dom';
import './Sidebar.css';

const NAV_ITEMS = [
  { to: '/',           icon: '📊', label: 'P1 · 决策概览' },
  { to: '/factors',    icon: '🔍', label: 'P2 · 因子分析' },
  { to: '/prediction', icon: '📈', label: 'P3 · 风险预测' },
  { to: '/stress',     icon: '⚡', label: 'P4 · 压力测试' },
  { to: '/industry',   icon: '🏭', label: 'P5 · 行业与对冲' },
  { to: '/validation', icon: '🔬', label: 'P6 · 模型验证' },
  { to: '/governance', icon: '🗄️', label: 'P7 · 数据治理' },
  { to: '/agent',      icon: '🤖', label: 'P8 · AI Agent' },
  { to: '/pipeline',   icon: '⚙️', label: 'P9 · 自动化管道' },
];

export default function Sidebar() {
  const { benchmarks, currentBM, setCurrentBM, months, currentMonth, setCurrentMonth } = useApp();

  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-eyebrow">Citi Enterprise Banking</div>
        <h1 className="brand-title">油刃有余<br/>OilVerse</h1>
        <p className="brand-sub">油价因子量化分析预测平台</p>
      </div>

      <div className="selector-group">
        <label>油价基准</label>
        <select value={currentBM} onChange={e => setCurrentBM(e.target.value)}>
          {benchmarks.map(bm => <option key={bm} value={bm}>{bm}</option>)}
        </select>
      </div>

      <div className="selector-group">
        <label>分析月份</label>
        <select value={currentMonth} onChange={e => setCurrentMonth(Number(e.target.value))}>
          {months.map((m, i) => <option key={i} value={i}>{m.date}</option>)}
        </select>
      </div>

      <nav className="nav-list">
        {NAV_ITEMS.map(item => (
          <NavLink
            key={item.to}
            to={item.to}
            className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
          >
            <span className="nav-icon">{item.icon}</span>
            <span>{item.label}</span>
          </NavLink>
        ))}
      </nav>

      <div className="sidebar-footer">
        <span>分析引擎 V2</span>
        <strong>Transformer · Conformal · Ensemble</strong>
        <span>深度学习 + 统计学习 多模型融合</span>
      </div>
    </aside>
  );
}