'use client'

import Link from 'next/link'
import { Settings, Sun, Globe, LogOut } from 'lucide-react'
import { logoutAction } from '@/actions/auth'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'

const ROLE_LABELS: Record<string, string> = {
  PRODUCT_OWNER: 'Product Owner',
  SCRUM_MASTER: 'Scrum Master',
  DEVELOPER: 'Developer',
}

interface UserMenuProps {
  userId: string
  username: string
  email: string | null
  roles: string[]
}

export function UserMenu({ userId, username, email, roles }: UserMenuProps) {
  const initials = username.slice(0, 2).toUpperCase()
  const roleLabels = roles.map((r) => ROLE_LABELS[r]).filter(Boolean)
  const subtitle = email?.trim() ? email.trim() : 'Lokaal account'

  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        className="rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
        aria-label="Accountmenu openen"
      >
        <Avatar size="default">
          <AvatarImage src={`/api/users/${userId}/avatar`} alt={username} />
          <AvatarFallback className="bg-primary-container text-primary-container-foreground">
            {initials}
          </AvatarFallback>
        </Avatar>
      </DropdownMenuTrigger>

      <DropdownMenuContent align="end" sideOffset={8} className="w-72">
        <div className="flex items-center gap-3 px-2 py-2">
          <Avatar size="lg">
            <AvatarImage src={`/api/users/${userId}/avatar`} alt={username} />
            <AvatarFallback className="bg-primary-container text-primary-container-foreground">
              {initials}
            </AvatarFallback>
          </Avatar>
          <div className="min-w-0 flex-1">
            <div className="text-sm font-medium text-foreground truncate">{username}</div>
            <div className="text-xs text-muted-foreground truncate">{subtitle}</div>
          </div>
        </div>

        {roleLabels.length > 0 && (
          <>
            <DropdownMenuSeparator />
            <DropdownMenuLabel className="text-xs uppercase tracking-wide text-muted-foreground">
              Rollen
            </DropdownMenuLabel>
            <div className="px-2 pb-2 text-sm text-foreground">
              {roleLabels.join(', ')}
            </div>
          </>
        )}

        <DropdownMenuSeparator />

        <DropdownMenuItem render={<Link href="/settings" />}>
          <Settings className="mr-2 h-4 w-4" />
          <span>Instellingen</span>
        </DropdownMenuItem>

        <DropdownMenuItem disabled className="opacity-60">
          <Sun className="mr-2 h-4 w-4" />
          <span>Thema: licht</span>
          <Badge className="ml-auto bg-muted text-muted-foreground text-[10px] px-1.5 py-0">
            Binnenkort
          </Badge>
        </DropdownMenuItem>

        <DropdownMenuItem disabled className="opacity-60">
          <Globe className="mr-2 h-4 w-4" />
          <span>Taal: Nederlands</span>
          <Badge className="ml-auto bg-muted text-muted-foreground text-[10px] px-1.5 py-0">
            Binnenkort
          </Badge>
        </DropdownMenuItem>

        <DropdownMenuSeparator />

        <form action={logoutAction}>
          <DropdownMenuItem
            render={
              <button type="submit" className="w-full text-left cursor-pointer" />
            }
          >
            <LogOut className="mr-2 h-4 w-4" />
            <span>Uitloggen</span>
          </DropdownMenuItem>
        </form>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
