import { NavLink } from 'react-router-dom';
import {
  LayoutDashboard, Radio, Monitor, FileText,
  Shield, MessageSquare, Sun, Moon
} from 'lucide-react';
import { useTheme } from '../../contexts/ThemeContext';

interface NavItem {
  to: string;
  icon: React.ReactNode;
  label: string;
  badge?: number;
}

const mainNav: NavItem[] = [
  { to: '/', icon: <LayoutDashboard size={16} />, label: 'Overview' },
  { to: '/signals', icon: <Radio size={16} />, label: 'Regulatory Signals' },
  { to: '/status', icon: <Monitor size={16} />, label: 'System Status' },
];

const workbenchNav: NavItem[] = [
  { to: '/documents', icon: <FileText size={16} />, label: 'Documents' },
  { to: '/compliance', icon: <Shield size={16} />, label: 'Compliance Analysis' },
];

const chatNav: NavItem[] = [
  { to: '/chat', icon: <MessageSquare size={16} />, label: 'Regulation Q&A' },
];

function NavGroup({ title, items }: { title: string; items: NavItem[] }) {
  return (
    <div className="nav-group">
      <div className="nav-group-label">{title}</div>
      {items.map(item => (
        <NavLink
          key={item.to}
          to={item.to}
          end={item.to === '/'}
          className={({ isActive }) => `nav-item${isActive ? ' active' : ''}`}
        >
          <span className="nav-icon">{item.icon}</span>
          <span className="nav-label">{item.label}</span>
          {item.badge !== undefined && item.badge > 0 && (
            <span className="nav-badge">{item.badge}</span>
          )}
        </NavLink>
      ))}
    </div>
  );
}

export function Sidebar() {
  const { theme, toggleTheme } = useTheme();
  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <img src="/company-logo.ico" alt="T-Systems" className="brand-logo" />
        <div className="brand-text">
          <div className="brand-name">T-Systems</div>
          <div className="brand-sub">Regulation Hub</div>
        </div>
      </div>

      <nav className="sidebar-nav">
        <NavGroup title="Main" items={mainNav} />
        <NavGroup title="Workbench" items={workbenchNav} />
        <NavGroup title="Chat" items={chatNav} />
      </nav>

      <div className="sidebar-footer">
        <div className="sidebar-user">
          <div className="user-avatar">TS</div>
          <div className="user-info">
            <div className="user-name">Analyst</div>
            <div className="user-role">T-Systems</div>
          </div>
        </div>
        <button className="theme-btn" onClick={toggleTheme} title="Toggle theme">
          {theme === 'dark' ? <Sun size={14} /> : <Moon size={14} />}
        </button>
      </div>
    </aside>
  );
}