sandbox-web-ide/frontend/components/ui/userButton.tsx

"use client"

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { User } from "@/lib/types"
import { useClerk } from "@clerk/nextjs"
import { Crown, LogOut, Sparkles } from "lucide-react"
import { useRouter } from "next/navigation"
import { useEffect, useState } from "react"
import Avatar from "./avatar"
import { Button } from "./button"
import { TIERS } from "@/lib/tiers"

// TODO: Remove this once we have a proper tier system
const TIER_INFO = {
  FREE: {
    color: "text-gray-500",
    icon: Sparkles,
    limit: TIERS.FREE.generations,
  },
  PRO: {
    color: "text-blue-500",
    icon: Crown,
    limit: TIERS.PRO.generations,
  },
  ENTERPRISE: {
    color: "text-purple-500",
    icon: Crown,
    limit: TIERS.ENTERPRISE.generations,
  },
} as const

export default function UserButton({ userData: initialUserData }: { userData: User }) {
  const [userData, setUserData] = useState<User>(initialUserData)
  const [isOpen, setIsOpen] = useState(false)
  const { signOut } = useClerk()
  const router = useRouter()

  const fetchUserData = async () => {
    try {
      const res = await fetch(
        `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user?id=${userData.id}`,
        {
          headers: {
            Authorization: `${process.env.NEXT_PUBLIC_WORKERS_KEY}`,
          },
          cache: 'no-store'
        }
      )
      if (res.ok) {
        const updatedUserData = await res.json()
        setUserData(updatedUserData)
      }
    } catch (error) {
      console.error("Failed to fetch user data:", error)
    }
  }

  useEffect(() => {
    if (isOpen) {
      fetchUserData()
    }
  }, [isOpen])

  const tierInfo = TIER_INFO[userData.tier as keyof typeof TIER_INFO] || TIER_INFO.FREE
  const TierIcon = tierInfo.icon
  const usagePercentage = Math.floor((userData.generations || 0) * 100 / tierInfo.limit)

  const handleUpgrade = async () => {
    router.push('/upgrade')
  }

  return (
    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
      <DropdownMenuTrigger>
        <Avatar name={userData.name} avatarUrl={userData.avatarUrl} />
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-64" align="end">
        <div className="py-1.5 px-2 w-full">
          <div className="font-medium">{userData.name}</div>
          <div className="text-sm w-full overflow-hidden text-ellipsis whitespace-nowrap text-muted-foreground">
            {userData.email}
          </div>
        </div>

        <DropdownMenuSeparator />

        <div className="py-1.5 px-2 w-full">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-1.5">
              <TierIcon className={`h-4 w-4 ${tierInfo.color}`} />
              <span className="text-sm font-medium">{userData.tier || "FREE"} Plan</span>
            </div>
            {/* {(userData.tier === "FREE" || userData.tier === "PRO") && (
              <Button
                variant="ghost"
                size="sm"
                className="h-7 text-xs border-b hover:border-b-foreground"
                onClick={handleUpgrade}
              >
                Upgrade
              </Button>
            )} */}
          </div>
        </div>

        <DropdownMenuSeparator />

        <div className="py-1.5 px-2 w-full">
          <div className="flex items-center justify-between text-sm text-muted-foreground mb-2">
            <span>AI Usage</span>
            <span>{userData.generations}/{tierInfo.limit}</span>
          </div>

          <div className="rounded-full w-full h-2 overflow-hidden bg-secondary">
            <div
              className={`h-full rounded-full transition-all duration-300 ${
                usagePercentage > 90 ? 'bg-red-500' : 
                usagePercentage > 75 ? 'bg-yellow-500' : 
                tierInfo.color.replace('text-', 'bg-')
              }`}
              style={{
                width: `${Math.min(usagePercentage, 100)}%`,
              }}
            />
          </div>
        </div>

        <DropdownMenuSeparator />

        {/* <DropdownMenuItem className="cursor-pointer">
          <Pencil className="mr-2 h-4 w-4" />
          <span>Edit Profile</span>
        </DropdownMenuItem> */}
        <DropdownMenuItem
          onClick={() => signOut(() => router.push("/"))}
          className="!text-destructive cursor-pointer"
        >
          <LogOut className="mr-2 h-4 w-4" />
          <span>Log Out</span>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}