"use client"

import Link from "next/link"
import { LogIn, UserPlus, LogOut, User as UserIcon } from "lucide-react"
import { authClient } from "@/lib/auth-client"
import { useRouter } from "next/navigation"
import { toast } from "sonner"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { buttonVariants } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { getPublicUrl } from "@/lib/utils/storage"

interface UserProps {
  user?: {
    name: string
    email: string
    image?: string | null
  }
  /** Extra classes applied to the trigger/link buttons */
  className?: string
}

export default function User({ user, className }: UserProps) {
  const router = useRouter();

  const profileImage = user?.image ? getPublicUrl(user.image) : undefined;

  async function handleSignOut() {
    await authClient.signOut({
      fetchOptions: {
        onSuccess: () => {
          toast.success("Logged out successfully")
          router.push("/auth/login")
        },
        onError: () => {
          toast.error("Failed to sign out")
        },
      },
    })
  }

  // ── Not logged in ──────────────────────────────────────────────────────────
  if (!user) {
    return (
      <div className="flex items-center gap-2">
        <Link
          href="/auth/login"
          className={buttonVariants({
            variant: "ghost",
            className: `${className ?? ""}`,
          })}
        >
          <LogIn className="w-4 h-4" />
          Login
        </Link>

        <Link
          href="/auth/signup"
          className={buttonVariants({
            variant: "secondary",
            className: `${className ?? ""}`,
          })}
        >
          <UserPlus className="w-4 h-4" />
          Sign up
        </Link>
      </div>
    )
  }

  // ── Logged in ──────────────────────────────────────────────────────────────
  const initials = user.name
    .split(" ")
    .map((n) => n[0])
    .join("")
    .toUpperCase()
    .slice(0, 2)

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button
          className="rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          aria-label="User menu"
        >
          <Avatar className="w-9 h-9 border-2 border-background shadow-sm">
            {profileImage && <AvatarImage src={profileImage} alt={user.name} />}
            <AvatarFallback className="text-xs font-semibold">
              {initials}
            </AvatarFallback>
          </Avatar>
        </button>
      </DropdownMenuTrigger>

      <DropdownMenuContent align="end" className="w-52">
        <DropdownMenuLabel className="pb-1">
          <p className="font-medium truncate">{user.name}</p>
          <p className="text-xs text-muted-foreground font-normal truncate">
            {user.email}
          </p>
        </DropdownMenuLabel>

        <DropdownMenuSeparator />

        <DropdownMenuItem asChild>
          <Link href="/profile" className="cursor-pointer gap-2">
            <UserIcon className="w-4 h-4" />
            Profile
          </Link>
        </DropdownMenuItem>

        <DropdownMenuItem asChild>
          <Link href="/loans" className="cursor-pointer gap-2">
            My loans
          </Link>
        </DropdownMenuItem>

        <DropdownMenuSeparator />

        <DropdownMenuItem
          onClick={handleSignOut}
          className="text-destructive focus:text-destructive cursor-pointer gap-2"
        >
          <LogOut className="w-4 h-4" />
          Sign out
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}