"use client";

import Link from "next/link";
import { CircleUser, LogOut, Moon, Settings, Sun, Monitor } from "lucide-react";
import { Avatar } from "@/components/ui/primitives";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuRadioGroup, DropdownMenuRadioItem } from "@/components/ui/dropdown-menu";
import type { ShellUser } from "./app-shell";
import { useRouter } from "next/navigation";
import { useAuthActions } from "@convex-dev/auth/react";
import { recordLogoutAction } from "@/app/(auth)/login/actions";
import { applyTheme } from "@/lib/theme";
import * as React from "react";

export function UserMenu({ user }: { user: ShellUser }) {
  const { signOut } = useAuthActions();
  const router = useRouter();
  const [signingOut, setSigningOut] = React.useState(false);
  async function logout() {
    setSigningOut(true);
    try {
      await recordLogoutAction();
      await signOut();
    } finally {
      router.replace("/login");
      router.refresh();
    }
  }
  const [theme, setTheme] = React.useState<"light" | "dark" | "system">("system");
  React.useEffect(() => {
    setTheme((document.documentElement.dataset.theme as "light" | "dark" | "system") ?? "system");
  }, []);
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button type="button" className="ml-1 flex items-center gap-2 rounded-full transition-transform duration-200 hover:scale-105 active:scale-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:ring-2 data-[state=open]:ring-primary/40" aria-label="Account menu">
          <Avatar name={user.fullName} src={user.avatarUrl} size="md" online />
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-60">
        <div className="px-2 py-2">
          <p className="text-sm font-semibold text-fg truncate">{user.fullName}</p>
          <p className="text-xs text-fg-muted truncate">{user.email}</p>
          <p className="mt-1 inline-flex rounded-full bg-primary/10 px-2 py-0.5 text-2xs font-medium text-primary">{user.roleName}</p>
        </div>
        <DropdownMenuSeparator />
        <DropdownMenuItem asChild>
          <Link href="/profile">
            <CircleUser /> My profile
          </Link>
        </DropdownMenuItem>
        {user.isAdmin ? (
          <DropdownMenuItem asChild>
            <Link href="/settings">
              <Settings /> Settings
            </Link>
          </DropdownMenuItem>
        ) : null}
        <DropdownMenuSeparator />
        <DropdownMenuLabel>Theme</DropdownMenuLabel>
        <DropdownMenuRadioGroup
          value={theme}
          onValueChange={(v) => {
            setTheme(v as typeof theme);
            applyTheme(v as typeof theme);
          }}
        >
          <DropdownMenuRadioItem value="light">
            <Sun className="mr-2 size-4 text-fg-muted" /> Light
          </DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="dark">
            <Moon className="mr-2 size-4 text-fg-muted" /> Dark
          </DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="system">
            <Monitor className="mr-2 size-4 text-fg-muted" /> System
          </DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem destructive onSelect={() => void logout()} disabled={signingOut}>
          <LogOut /> {signingOut ? "Signing out…" : "Sign out"}
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}