"use client"

import { useState } from "react"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Flag } from "lucide-react"
import { getApiUrl } from "@/lib/api-config"
import { Textarea } from "@/components/ui/textarea"

interface ReportDialogProps {
    entityType: "comment" | "review" | "nickname"
    entityId: number
    trigger?: React.ReactNode
}

export function ReportDialog({ entityType, entityId, trigger }: ReportDialogProps) {
    const [open, setOpen] = useState(false)
    const [reason, setReason] = useState("spam")
    const [details, setDetails] = useState("")
    const [loading, setLoading] = useState(false)

    const handleSubmit = async () => {
        const token = localStorage.getItem("token")
        if (!token) return

        setLoading(true)
        try {
            const res = await fetch(`${getApiUrl()}/moderation/reports`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    Authorization: `Bearer ${token}`
                },
                body: JSON.stringify({
                    entity_type: entityType,
                    entity_id: entityId,
                    reason: reason,
                    details: details // Schema might not have details yet, check backend
                })
            })

            if (res.ok) {
                setOpen(false)
                alert("Report submitted. Thank you for helping keep the community safe.")
            } else {
                alert("Failed to submit report.")
            }
        } catch (error) {
            console.error(error)
        } finally {
            setLoading(false)
        }
    }

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
                {trigger || (
                    <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-muted-foreground hover:text-red-500">
                        <Flag className="h-3 w-3" />
                        <span className="sr-only">Report</span>
                    </Button>
                )}
            </DialogTrigger>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Report Content</DialogTitle>
                    <DialogDescription>
                        Help us understand what's wrong with this content.
                    </DialogDescription>
                </DialogHeader>

                <div className="grid gap-4 py-4">
                    <RadioGroup value={reason} onValueChange={setReason} className="gap-3">
                        <div className="flex items-center space-x-2">
                            <RadioGroupItem value="spam" id="spam" />
                            <Label htmlFor="spam">Spam or unwanted commercial content</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                            <RadioGroupItem value="harassment" id="harassment" />
                            <Label htmlFor="harassment">Harassment or hate speech</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                            <RadioGroupItem value="spoiler" id="spoiler" />
                            <Label htmlFor="spoiler">Spoiler or incorrect info</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                            <RadioGroupItem value="other" id="other" />
                            <Label htmlFor="other">Other</Label>
                        </div>
                    </RadioGroup>

                    {reason === "other" && (
                        <Textarea
                            placeholder="Please provide more details..."
                            value={details}
                            onChange={(e) => setDetails(e.target.value)}
                        />
                    )}
                </div>

                <DialogFooter>
                    <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
                    <Button variant="destructive" onClick={handleSubmit} disabled={loading}>
                        {loading ? "Submitting..." : "Submit Report"}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    )
}