"use client";

import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { ReportReason, ReportService } from "@/services/report.service";

interface ReportDialogProps {
	contentId?: string;
	tagId?: string;
	open: boolean;
	onOpenChange: (open: boolean) => void;
}

export function ReportDialog({
	contentId,
	tagId,
	open,
	onOpenChange,
}: ReportDialogProps) {
	const [reason, setReason] = useState<ReportReason>(ReportReason.INAPPROPRIATE);
	const [description, setDescription] = useState("");
	const [isSubmitting, setIsSubmitting] = useState(false);

	const handleSubmit = async () => {
		setIsSubmitting(true);
		try {
			await ReportService.create({
				contentId,
				tagId,
				reason,
				description,
			});
			toast.success(
				"Signalement envoyé avec succès. Merci de nous aider à maintenir la communauté sûre.",
			);
			onOpenChange(false);
			setDescription("");
		} catch (_error) {
			toast.error("Erreur lors de l'envoi du signalement.");
		} finally {
			setIsSubmitting(false);
		}
	};

	return (
		<Dialog open={open} onOpenChange={onOpenChange}>
			<DialogContent className="sm:max-w-[425px]">
				<DialogHeader>
					<DialogTitle>Signaler le contenu</DialogTitle>
					<DialogDescription>
						Pourquoi signalez-vous ce contenu ? Un modérateur examinera votre demande.
					</DialogDescription>
				</DialogHeader>
				<div className="grid gap-4 py-4">
					<div className="grid gap-2">
						<Label htmlFor="reason">Raison</Label>
						<Select
							value={reason}
							onValueChange={(value) => setReason(value as ReportReason)}
						>
							<SelectTrigger id="reason">
								<SelectValue placeholder="Sélectionnez une raison" />
							</SelectTrigger>
							<SelectContent>
								<SelectItem value={ReportReason.INAPPROPRIATE}>Inapproprié</SelectItem>
								<SelectItem value={ReportReason.SPAM}>Spam</SelectItem>
								<SelectItem value={ReportReason.COPYRIGHT}>Droit d'auteur</SelectItem>
								<SelectItem value={ReportReason.OTHER}>Autre</SelectItem>
							</SelectContent>
						</Select>
					</div>
					<div className="grid gap-2">
						<Label htmlFor="description">Description (optionnelle)</Label>
						<Textarea
							id="description"
							placeholder="Détaillez votre signalement..."
							value={description}
							onChange={(e) => setDescription(e.target.value)}
						/>
					</div>
				</div>
				<DialogFooter>
					<Button
						variant="outline"
						onClick={() => onOpenChange(false)}
						disabled={isSubmitting}
					>
						Annuler
					</Button>
					<Button
						variant="destructive"
						onClick={handleSubmit}
						disabled={isSubmitting}
					>
						{isSubmitting ? "Envoi..." : "Signaler"}
					</Button>
				</DialogFooter>
			</DialogContent>
		</Dialog>
	);
}