"use client"

import Link                                           from "next/link";
import { useRouter }                                  from "next/navigation";
import { Button }                                     from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage }        from "@/components/ui/avatar";
import { toast }                                      from "sonner";
import { DropdownMenu, DropdownMenuContent }          from "@/components/ui/dropdown-menu";
import { DropdownMenuItem, DropdownMenuLabel }        from "@/components/ui/dropdown-menu";
import { DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Settings, MessageCircleQuestionMark }        from "lucide-react";
import { LogOut, User, Crown, CreditCard }            from "lucide-react";
import { authClient }                                 from '@/lib/auth-client';

const { data: session } = await authClient.getSession();

export function UserMenu() {
  const router = useRouter();

  const handleLogout = async () => {
    try {
      await authClient.signOut();
      toast("You have been logged out of your account.");
      router.push("/login");
    } catch (error) {
      toast.error("Logout failed. Something went wrong. Please try again.");
    }
  }

  const getUserInitials = () => {
    if (session?.user.name) {
      return session.user.name
        .split(" ")
        .map((n) => n[0])
        .join("")
        .toUpperCase()
        .slice(0, 2)
    }

    if (session?.user.email) {
      return session.user.email.slice(0, 2).toUpperCase()
    }

    return ""
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" className="relative h-9 w-9 rounded-full cursor-pointer">
          <Avatar className="h-9 w-9">
            <AvatarImage src={session?.user?.image || undefined} alt={session?.user?.name || "User"} />
            <AvatarFallback>{getUserInitials()}</AvatarFallback>
          </Avatar>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuLabel>
          <div className="flex flex-col space-y-1">
            <p className="text-sm font-medium">{session?.user.name || ""}</p>
            <p className="text-xs text-muted-foreground">{session?.user.email || ""}</p>
          </div>
        </DropdownMenuLabel>
        <DropdownMenuSeparator />

        <DropdownMenuItem asChild className="cursor-pointer">
          <Link href="/subscription">
            <Crown className="mr-1 h-4 w-4" />
            Subscription
          </Link>
        </DropdownMenuItem>

        <DropdownMenuItem asChild className="cursor-pointer">
          <Link href="/billing">
            <CreditCard className="mr-1 h-4 w-4" />
            Billing
          </Link>
        </DropdownMenuItem>

        <DropdownMenuItem asChild className="cursor-pointer">
          <Link href="/preferences">
            <Settings className="mr-1 h-4 w-4" />
            Preferences
          </Link>
        </DropdownMenuItem>

        <DropdownMenuItem asChild className="cursor-pointer">
          <Link href="#">
            <MessageCircleQuestionMark className="mr-1 h-4 w-4" />
            Feedback
          </Link>
        </DropdownMenuItem>

        <DropdownMenuSeparator />

        <DropdownMenuItem onClick={handleLogout} className="cursor-pointer">
          <LogOut className="mr-1 h-4 w-4" />
          Log out
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}