import { useEffect, useState } from "react";
import { Link, useNavigate } from "@tanstack/react-router";
import {
  User as UserIcon,
  Settings2,
  LogOut,
  Sun,
  Moon,
  Languages,
} from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { useAuth } from "@/hooks/useAuth";
import { useSettings, useT } from "@/hooks/useSettings";
import { supabase } from "@/integrations/supabase/client";

/**
 * Top-right account menu — avatar trigger with profile, theme, language and sign-out.
 * Avatar comes from user_preferences.avatar_url, with initials fallback.
 */
export function UserMenu() {
  const { user, signOut } = useAuth();
  const { theme, toggleTheme } = useSettings();
  const t = useT();
  const navigate = useNavigate();
  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
  const [displayName, setDisplayName] = useState<string>("");

  useEffect(() => {
    if (!user?.id) return;
    let cancelled = false;
    supabase
      .from("user_preferences")
      .select("avatar_url, display_name")
      .eq("user_id", user.id)
      .maybeSingle()
      .then(({ data }) => {
        if (cancelled) return;
        setAvatarUrl((data?.avatar_url as string | null) ?? null);
        setDisplayName((data?.display_name as string | null) ?? "");
      });

    const channel = supabase
      .channel(`user-prefs-${user.id}-${Math.random().toString(36).slice(2)}`)
      .on(
        "postgres_changes",
        {
          event: "*",
          schema: "public",
          table: "user_preferences",
          filter: `user_id=eq.${user.id}`,
        },
        (payload) => {
          const row = (payload.new ?? payload.old) as
            | { avatar_url?: string | null; display_name?: string | null }
            | undefined;
          if (!row) return;
          setAvatarUrl(row.avatar_url ?? null);
          setDisplayName(row.display_name ?? "");
        },
      )
      .subscribe();

    return () => {
      cancelled = true;
      supabase.removeChannel(channel);
    };
  }, [user?.id]);

  const initials = (displayName || user?.email || "U")
    .split(/[\s@.]+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((s) => s[0]?.toUpperCase())
    .join("") || "U";

  async function handleSignOut() {
    await signOut();
    navigate({ to: "/login" });
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button
          className="flex h-9 w-9 items-center justify-center rounded-full ring-1 ring-border transition-shadow hover:ring-2 hover:ring-brand/40 focus:outline-none focus:ring-2 focus:ring-brand/60"
          aria-label="Account menu"
        >
          <Avatar className="h-9 w-9">
            {avatarUrl ? <AvatarImage src={avatarUrl} alt="" /> : null}
            <AvatarFallback className="bg-brand text-[11px] font-medium text-primary-foreground">
              {initials}
            </AvatarFallback>
          </Avatar>
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-60">
        <DropdownMenuLabel className="flex flex-col gap-0.5">
          <span className="truncate text-sm font-medium text-foreground">
            {displayName || "Your account"}
          </span>
          <span className="truncate text-[11px] font-normal text-muted-foreground">
            {user?.email ?? ""}
          </span>
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem asChild>
          <Link to="/profile" className="gap-2">
            <UserIcon className="h-4 w-4" />
            {t("shell.profile")}
          </Link>
        </DropdownMenuItem>
        <DropdownMenuItem onClick={toggleTheme} className="gap-2">
          {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
          {theme === "dark" ? t("shell.theme.light") : t("shell.theme.dark")}
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem onClick={handleSignOut} className="gap-2 text-destructive focus:text-destructive">
          <LogOut className="h-4 w-4" />
          {t("shell.signOut")}
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}