"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { getApiUrl } from "@/lib/api-config"

interface SuggestNicknameDialogProps {
    performanceId: number
    songTitle: string
}

export function SuggestNicknameDialog({ performanceId, songTitle }: SuggestNicknameDialogProps) {
    const [open, setOpen] = useState(false)
    const [nickname, setNickname] = useState("")
    const [description, setDescription] = useState("")
    const [loading, setLoading] = useState(false)

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault()
        setLoading(true)

        const token = localStorage.getItem("token")
        if (!token) {
            alert("You must be logged in to suggest a nickname.")
            setLoading(false)
            return
        }

        try {
            const res = await fetch(`${getApiUrl()}/nicknames/`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    Authorization: `Bearer ${token}`
                },
                body: JSON.stringify({
                    performance_id: performanceId,
                    nickname,
                    description
                })
            })

            if (!res.ok) throw new Error("Failed to submit nickname")

            alert("Nickname suggested! It will appear after moderator approval.")
            setOpen(false)
            setNickname("")
            setDescription("")
        } catch (err) {
            console.error(err)
            alert("Error submitting nickname")
        } finally {
            setLoading(false)
        }
    }

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
                <button className="opacity-0 group-hover:opacity-100 text-xs text-muted-foreground hover:text-primary transition-opacity ml-auto">
                    + Suggest Nickname
                </button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[425px]">
                <DialogHeader>
                    <DialogTitle>Suggest Nickname</DialogTitle>
                    <DialogDescription>
                        Suggest a "City Song" nickname for this performance of {songTitle}.
                    </DialogDescription>
                </DialogHeader>
                <form onSubmit={handleSubmit} className="grid gap-4 py-4">
                    <div className="grid grid-cols-4 items-center gap-4">
                        <Label htmlFor="nickname" className="text-right">
                            Nickname
                        </Label>
                        <Input
                            id="nickname"
                            value={nickname}
                            onChange={(e) => setNickname(e.target.value)}
                            className="col-span-3"
                            placeholder="e.g. Tahoe Tweezer"
                            required
                        />
                    </div>
                    <div className="grid grid-cols-4 items-center gap-4">
                        <Label htmlFor="description" className="text-right">
                            Why?
                        </Label>
                        <Input
                            id="description"
                            value={description}
                            onChange={(e) => setDescription(e.target.value)}
                            className="col-span-3"
                            placeholder="Optional context..."
                        />
                    </div>
                    <DialogFooter>
                        <Button type="submit" disabled={loading}>
                            {loading ? "Submitting..." : "Submit Suggestion"}
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    )
}