"use client"

import { useUser, useStackApp } from "@stackframe/stack"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { User, Settings, Star, FileText, LogOut, ChevronDown } from "lucide-react"

export function UserButton() {
    const user = useUser()
    const app = useStackApp()

    if (!user) {
        return (
            <div className="flex gap-2">
                <Link href="/sign-in">
                    <Button variant="ghost" size="sm">
                        Sign In
                    </Button>
                </Link>
                <Link href="/sign-up">
                    <Button size="sm">
                        Sign Up
                    </Button>
                </Link>
            </div>
        )
    }

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="gap-2">
                    <div className="h-7 w-7 rounded-full bg-linear-to-br from-primary to-accent flex items-center justify-center text-xs font-medium text-white">
                        {user.displayName?.[0]?.toUpperCase() || user.primaryEmail?.[0]?.toUpperCase() || "U"}
                    </div>
                    <span className="hidden sm:block max-w-24 truncate">
                        {user.displayName || user.primaryEmail?.split("@")[0]}
                    </span>
                    <ChevronDown className="h-3 w-3 opacity-50" />
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-56">
                <div className="px-2 py-1.5">
                    <p className="text-sm font-medium">{user.displayName || "User"}</p>
                    <p className="text-xs text-muted-foreground truncate">{user.primaryEmail}</p>
                </div>
                <DropdownMenuSeparator />
                <DropdownMenuItem asChild>
                    <Link href="/my-prompts" className="flex items-center gap-2 cursor-pointer">
                        <FileText className="h-4 w-4" />
                        My Prompts
                    </Link>
                </DropdownMenuItem>
                <DropdownMenuItem asChild>
                    <Link href="/starred" className="flex items-center gap-2 cursor-pointer">
                        <Star className="h-4 w-4" />
                        Starred
                    </Link>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem asChild>
                    <Link href="/settings" className="flex items-center gap-2 cursor-pointer">
                        <Settings className="h-4 w-4" />
                        Settings
                    </Link>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem
                    onClick={() => user.signOut()}
                    className="text-destructive focus:text-destructive cursor-pointer"
                >
                    <LogOut className="h-4 w-4 mr-2" />
                    Sign Out
                </DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    )
}