// Author: fruit.com.cn
import { Compass, History, Home, Info, ListVideo, UserRound } from 'lucide-react';
import { NavLink, useLocation } from 'react-router-dom';
import { useLocale, useUi } from '../../app/providers/AppProviders';

export function Sidebar() {
  const { locale } = useLocale();
  const { sidebarOpen, setSidebarOpen } = useUi();
  const location = useLocation();

  const primaryItems = [
    [Home, locale.home, '/'],
    [Compass, locale.shorts, '/shorts'],
    [ListVideo, locale.subscriptions, '/subscriptions'],
  ];

  const navClass = (to) => {
    if (location.pathname !== to) return '';
    return 'active';
  };

  // 移动端为抽屉式侧边栏，点击任一菜单项后必须收起
  const closeOnNavigate = (event) => {
    if (!event.target.closest?.('a')) return;
    if (window.matchMedia('(max-width: 760px)').matches) setSidebarOpen(false);
  };

  return (
    <aside className={`sidebar ${sidebarOpen ? 'open' : 'closed'}`} onClick={closeOnNavigate}>
      <nav className="sidebar-group">
        {primaryItems.map(([Icon, label, to]) => (
          <NavLink to={to} className={() => navClass(to)} key={to}>
            <Icon size={19} />
            <span className="sidebar-label">{label}</span>
          </NavLink>
        ))}
      </nav>
      <div className="nav-rule" />
      <div className="sidebar-group">
        <NavLink to="/library" className={() => navClass('/library')}>
          <UserRound size={19} />
          <span className="sidebar-label">{locale.you}</span>
        </NavLink>
        <NavLink to="/history" className={() => navClass('/history')}>
          <History size={19} />
          <span className="sidebar-label">{locale.history}</span>
        </NavLink>
      </div>
      <div className="nav-rule" />
      <div className="sidebar-group">
        <NavLink to="/about" className={() => navClass('/about')}>
          <Info size={19} />
          <span className="sidebar-label">{locale.about}</span>
        </NavLink>
      </div>
    </aside>
  );
}