'use client'

import { BarChart3, Home, FolderKanban } from 'lucide-react'
import { RoleNav, type NavItem, type RoleNavUser } from '@/components/layouts/role-nav'
import { useEditionContext } from '@/components/observer/observer-edition-context'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

interface ObserverNavProps {
  user: RoleNavUser
}

function EditionSelector() {
  const { programs, selectedProgramId, setSelectedProgramId } = useEditionContext()

  if (programs.length <= 1) return null

  return (
    <Select value={selectedProgramId} onValueChange={setSelectedProgramId}>
      <SelectTrigger className="w-full md:w-[180px]">
        <SelectValue placeholder="Select edition" />
      </SelectTrigger>
      <SelectContent>
        {programs.map((p) => (
          <SelectItem key={p.id} value={p.id}>
            {p.year ? `${p.year} Edition` : p.name ?? p.id}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}

export function ObserverNav({ user }: ObserverNavProps) {
  const navigation: NavItem[] = [
    {
      name: 'Dashboard',
      href: '/observer',
      icon: Home,
    },
    {
      name: 'Projects',
      href: '/observer/projects',
      icon: FolderKanban,
    },
    {
      name: 'Reports',
      href: '/observer/reports',
      icon: BarChart3,
    },
  ]

  return (
    <RoleNav
      navigation={navigation}
      roleName="Observer"
      user={user}
      basePath="/observer"
      editionSelector={<EditionSelector />}
    />
  )
}