import { NavLink } from 'react-router-dom';
import { LayoutDashboard, FolderKanban, Building2, Settings, Repeat } from 'lucide-react';
import { useUi } from '../context/ui-context.jsx';
import { useAuth } from '../context/auth-context.jsx';
import { useBranding } from '../context/branding-context.jsx';
import logoDark from '../assets/logoLinkedCorpTxt.png';
import logoLight from '../assets/logoLinkedCorpTxtBlack.png';
import logoIcon from '../assets/logoLinked1.png';
import pkg from '../../package.json';

const ITEMS = [
  { to: '/', icon: LayoutDashboard, labelKey: 'nav_dashboard', end: true },
  { to: '/proyectos', icon: FolderKanban, labelKey: 'nav_projects' },
  { to: '/tareas-recurrentes', icon: Repeat, labelKey: 'nav_recurring_tasks' },
  { to: '/organizacion', icon: Building2, labelKey: 'nav_organization' },
  { to: '/configuracion', icon: Settings, labelKey: 'nav_config', superadminOnly: true },
];

export function NavigationView({ mode }) {
  const { t, theme } = useUi();
  const { user } = useAuth();
  const branding = useBranding();
  const compact = mode === 'compact';
  const items = ITEMS.filter((item) => !item.superadminOnly || user?.roleCode === 'superadmin');
  const brandName = branding.name || t('appName');
  return (
    <nav className={`nav-view ${mode}`}>
      <div className="nav-items">
        {items.map((item) => (
          <NavLink key={item.to} to={item.to} end={item.end} className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}>
            <item.icon />
            {mode !== 'compact' && <span>{t(item.labelKey)}</span>}
          </NavLink>
        ))}
      </div>
      <div className="nav-footer">
        {compact ? (
          <img src={branding.logoUrl || logoIcon} alt={brandName} className="nav-logo-icon-footer" />
        ) : (
          <>
            <img src={branding.logoUrl || (theme === 'light' ? logoLight : logoDark)} alt={brandName} className="nav-logo-full-footer" />
            <span className="nav-version">v{pkg.version}</span>
          </>
        )}
      </div>
    </nav>
  );
}