'use client'

import Link from 'next/link'
import { signOut } from '@/app/(auth)/actions'
import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'

/** Account dropdown in the app header: profile, settings, alerts, support, sign out. */
export function UserMenu({ name, role }: { name: string; role: string }) {
  const initials = name
    .split(/\s+/)
    .map((w) => w[0])
    .slice(0, 2)
    .join('')
    .toUpperCase()

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button
          className="grid h-8 w-8 place-items-center rounded-full bg-[#0f1b2d] text-xs font-bold text-[#f5a623] transition hover:opacity-90"
          title="Account menu"
        >
          {initials || 'U'}
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-48">
        <DropdownMenuLabel>
          <p className="truncate text-sm font-semibold">{name}</p>
          <p className="text-xs font-normal capitalize text-neutral-500">{role}</p>
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem asChild><Link href="/profile">Profile</Link></DropdownMenuItem>
        <DropdownMenuItem asChild><Link href="/settings">Settings</Link></DropdownMenuItem>
        {(role === 'broker' || role === 'dispatcher') && (
          <DropdownMenuItem asChild><Link href="/company">Company</Link></DropdownMenuItem>
        )}
        <DropdownMenuItem asChild><Link href="/alerts">Alerts</Link></DropdownMenuItem>
        <DropdownMenuItem asChild><Link href="/billing">Billing &amp; Wallet</Link></DropdownMenuItem>
        <DropdownMenuItem asChild><Link href="/support">Support</Link></DropdownMenuItem>
        {role === 'admin' && (
          <>
            <DropdownMenuSeparator />
            <DropdownMenuLabel className="text-[11px] font-normal text-neutral-400">Admin</DropdownMenuLabel>
            <DropdownMenuItem asChild><Link href="/admin/users">Users</Link></DropdownMenuItem>
            <DropdownMenuItem asChild><Link href="/admin/moderation">Moderator Dashboard</Link></DropdownMenuItem>
            <DropdownMenuItem asChild><Link href="/admin/email-templates">Email Templates</Link></DropdownMenuItem>
            <DropdownMenuItem asChild><Link href="/admin/company-review">Company Review</Link></DropdownMenuItem>
            <DropdownMenuLabel className="text-[11px] font-normal text-neutral-400">Pilot car preview</DropdownMenuLabel>
            <DropdownMenuItem asChild><Link href="/signup/pilot">Pilot Signup</Link></DropdownMenuItem>
            <DropdownMenuItem asChild><Link href="/pd-dashboard">Pilot Dispatch</Link></DropdownMenuItem>
            <DropdownMenuItem asChild><Link href="/pc-dashboard">Pilot Driver</Link></DropdownMenuItem>
          </>
        )}
        <DropdownMenuSeparator />
        <form action={signOut}>
          <DropdownMenuItem asChild>
            <Button variant="ghost" size="sm" type="submit" className="w-full justify-start px-2 font-normal">
              Sign out
            </Button>
          </DropdownMenuItem>
        </form>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}