import { Link, useNavigate, useRouter } from "@tanstack/react-router";
import { LogOut, Settings, User, CreditCard, LifeBuoy, Shield, ShieldCheck } from "lucide-react";
import { toast } from "sonner";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { getDisplayName, getInitials, useAuth } from "@/lib/auth/use-auth";
import { ROLE_LABELS } from "@/lib/auth/roles";
import { logoutFn } from "@/lib/auth/auth.functions";

export function ProfileMenu() {
  const router = useRouter();
  const navigate = useNavigate();
  const { user, setUser, refresh } = useAuth();

  const onSignOut = async () => {
    try {
      await logoutFn({ data: {} });
    } catch {
      // Swallow — we still clear local state and redirect.
    }
    setUser(null);
    await refresh();
    await router.invalidate();
    toast.success("Signed out");
    navigate({ to: "/login" });
  };

  const displayName = getDisplayName(user);
  const initials = getInitials(user);

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon" className="rounded-full" aria-label="Profile menu">
          <Avatar className="h-8 w-8">
            <AvatarFallback className="bg-gradient-to-br from-primary to-accent text-primary-foreground text-xs font-semibold">
              {initials}
            </AvatarFallback>
          </Avatar>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-60">
        <DropdownMenuLabel>
          <div className="text-sm font-medium">{displayName}</div>
          <div className="text-xs text-muted-foreground font-normal">{user?.email ?? "—"}</div>
          {user && (
            <div className="mt-1 inline-flex items-center gap-1 text-[10px] text-muted-foreground">
              <ShieldCheck className="h-3 w-3" />
              {ROLE_LABELS[user.role]}
            </div>
          )}
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem asChild>
          <Link to="/settings/profile">
            <User className="mr-2 h-4 w-4" /> Profile
          </Link>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <Link to="/settings/preferences">
            <Settings className="mr-2 h-4 w-4" /> Preferences
          </Link>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <Link to="/settings/notifications">
            <Shield className="mr-2 h-4 w-4" /> Notifications
          </Link>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <Link to="/wallet">
            <CreditCard className="mr-2 h-4 w-4" /> Billing
          </Link>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem asChild>
          <Link to="/help">
            <LifeBuoy className="mr-2 h-4 w-4" /> Help & support
          </Link>
        </DropdownMenuItem>
        <DropdownMenuItem onSelect={onSignOut} className="text-destructive focus:text-destructive">
          <LogOut className="mr-2 h-4 w-4" /> Sign out
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}