"use client"

import { useEffect, useState } from "react"
import { getApiUrl } from "@/lib/api-config"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Check, X } from "lucide-react"

interface Report {
    id: number
    reason: string
    details: string
    entity_type: string
    entity_id: number
    status: string
    created_at: string
}

export function ReportQueue() {
    const [reports, setReports] = useState<Report[]>([])
    const [loading, setLoading] = useState(true)

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

        fetch(`${getApiUrl()}/moderation/queue/reports`, {
            headers: { Authorization: `Bearer ${token}` }
        })
            .then(res => res.json())
            .then(setReports)
            .catch(console.error)
            .finally(() => setLoading(false))
    }

    useEffect(() => {
        fetchQueue()
    }, [])

    const moderate = (id: number, action: "resolve" | "dismiss") => {
        const token = localStorage.getItem("token")
        if (!token) return

        fetch(`${getApiUrl()}/moderation/reports/${id}/${action}`, {
            method: "PUT",
            headers: { Authorization: `Bearer ${token}` }
        }).then(() => {
            setReports(prev => prev.filter(r => r.id !== id))
        })
    }

    if (loading) return <div>Loading queue...</div>

    return (
        <div className="space-y-4">
            <h2 className="text-xl font-semibold">Pending Reports</h2>
            {reports.length === 0 ? (
                <p className="text-muted-foreground">No pending reports.</p>
            ) : (
                <div className="grid gap-4">
                    {reports.map((report) => (
                        <Card key={report.id}>
                            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                                <CardTitle className="text-base font-medium">
                                    {report.reason}
                                </CardTitle>
                                <div className="flex gap-2">
                                    <Button size="sm" variant="outline" className="text-green-600 hover:text-green-700 hover:bg-green-50" onClick={() => moderate(report.id, "resolve")}>
                                        Resolve
                                    </Button>
                                    <Button size="sm" variant="outline" className="text-red-600 hover:text-red-700 hover:bg-red-50" onClick={() => moderate(report.id, "dismiss")}>
                                        Dismiss
                                    </Button>
                                </div>
                            </CardHeader>
                            <CardContent>
                                <p className="text-sm text-muted-foreground">{report.details}</p>
                                <p className="text-xs text-muted-foreground mt-2">
                                    Target: {report.entity_type} #{report.entity_id}
                                </p>
                                <p className="text-xs text-muted-foreground">
                                    {new Date(report.created_at).toLocaleDateString()}
                                </p>
                            </CardContent>
                        </Card>
                    ))}
                </div>
            )}
        </div>
    )
}