'use client'
// src/components/shell/Sidebar.tsx
// Input: current pathname via usePathname
// Output: fixed left sidebar 220px with nav links and animated active indicator
// Rationale: main navigation for the app shell — active link highlighted via Framer Motion layoutId

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { motion } from 'framer-motion'
import {
  LayoutDashboard,
  FolderOpen,
  BarChart3,
  Users,
  TriangleAlert,
  Settings2,
  HelpCircle,
  Zap,
  type LucideIcon,
} from 'lucide-react'
import { cn } from '@/lib/utils'

interface NavItem {
  label: string
  href: string
  icon: LucideIcon
}

const mainNav: NavItem[] = [
  { label: 'Dashboard', href: '/', icon: LayoutDashboard },
  { label: 'Projets', href: '/projects', icon: FolderOpen },
  { label: 'Analyses', href: '/analyses', icon: BarChart3 },
  { label: 'Partenaires', href: '/partners', icon: Users },
  { label: 'Alertes', href: '/alerts', icon: TriangleAlert },
]

const bottomNav: NavItem[] = [
  { label: 'Réglages', href: '/settings', icon: Settings2 },
  { label: 'Aide', href: '/help', icon: HelpCircle },
]

function NavLink({ item, active }: { item: NavItem; active: boolean }) {
  const Icon = item.icon
  return (
    <Link
      href={item.href}
      className={cn(
        'relative flex items-center gap-3 px-3 py-2 rounded-md text-body transition-colors duration-fast',
        active ? 'text-text-primary' : 'text-text-secondary hover:text-text-primary hover:bg-bg-subtle'
      )}
    >
      {active && (
        <motion.span
          layoutId="sidebar-active"
          className="absolute inset-0 rounded-md bg-accent-subtle border border-accent-border"
          transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
        />
      )}
      <Icon size={18} strokeWidth={1.5} className={cn('relative z-10 flex-shrink-0', active ? 'text-accent' : '')} />
      <span className="relative z-10 text-body">{item.label}</span>
    </Link>
  )
}

export function Sidebar() {
  const pathname = usePathname()

  function isActive(href: string) {
    if (href === '/') return pathname === '/'
    return pathname.startsWith(href)
  }

  return (
    <aside className="fixed top-0 left-0 h-screen w-[220px] bg-bg-base border-r border-bg-border flex flex-col z-40">
      {/* Logo */}
      <div className="flex items-center gap-2 px-4 h-[52px] border-b border-bg-border flex-shrink-0">
        <div className="w-7 h-7 rounded-md bg-accent flex items-center justify-center">
          <Zap size={14} strokeWidth={2} className="text-bg-base" />
        </div>
        <span className="text-h3 text-text-primary font-semibold tracking-tight">Structura</span>
      </div>

      {/* Main nav */}
      <nav className="flex-1 px-2 py-4 flex flex-col gap-0.5">
        {mainNav.map((item) => (
          <NavLink key={item.href} item={item} active={isActive(item.href)} />
        ))}
      </nav>

      {/* Bottom nav */}
      <nav className="px-2 py-4 border-t border-bg-border flex flex-col gap-0.5">
        {bottomNav.map((item) => (
          <NavLink key={item.href} item={item} active={isActive(item.href)} />
        ))}
      </nav>
    </aside>
  )
}