"use client";

import Link from "next/link";
import { signOut } from "next-auth/react";
import { LogOut, Lightbulb, KeyRound } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { MobileNav } from "@/components/layout/mobile-nav";
import { initials } from "@/lib/utils";

interface TopNavProps {
  user: { name: string; email: string; role: string };
}

export function TopNav({ user }: TopNavProps) {
  return (
    <header className="h-14 border-b flex items-center justify-between px-4 md:px-6 shrink-0 bg-background">
      <div className="flex items-center gap-2">
        <MobileNav />
        <span className="font-display font-semibold md:hidden">Moon Base</span>
      </div>

      <div className="flex items-center gap-1">
        <Link
          href="/suggestions"
          aria-label="Suggestions & feedback"
          title="Suggestions & feedback"
          className="p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
        >
          <Lightbulb className="h-5 w-5" />
        </Link>

        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="sm" className="gap-2">
              <div className="h-6 w-6 rounded-full bg-[hsl(var(--leaf))] flex items-center justify-center text-white text-[10px] font-bold">
                {initials(user.name)}
              </div>
              <span className="text-sm hidden sm:inline">{user.name}</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <div className="px-2 py-1.5 text-xs text-muted-foreground">{user.email}</div>
            <DropdownMenuSeparator />
            <DropdownMenuItem asChild>
              <Link href="/change-password">
                <KeyRound className="h-4 w-4 mr-2" />
                Change password
              </Link>
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => signOut({ callbackUrl: "/login" })}>
              <LogOut className="h-4 w-4 mr-2" />
              Sign out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  );
}