memegoat/frontend/src/app/(dashboard)/admin/reports/page.tsx

"use client";

import {
	AlertCircle,
	ArrowLeft,
	CheckCircle,
	MoreHorizontal,
	XCircle,
} from "lucide-react";
import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { toast } from "sonner";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";
import { adminService } from "@/services/admin.service";
import { type Report, ReportStatus } from "@/services/report.service";

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

	const fetchReports = useCallback(async () => {
		setLoading(true);
		try {
			const data = await adminService.getReports();
			setReports(data);
		} catch (_error) {
			toast.error("Erreur lors du chargement des signalements.");
		} finally {
			setLoading(false);
		}
	}, []);

	useEffect(() => {
		fetchReports();
	}, [fetchReports]);

	const handleUpdateStatus = async (reportId: string, status: ReportStatus) => {
		try {
			await adminService.updateReportStatus(reportId, status);
			toast.success("Statut mis à jour.");
			fetchReports();
		} catch (_error) {
			toast.error("Erreur lors de la mise à jour du statut.");
		}
	};

	const getStatusBadge = (status: ReportStatus) => {
		switch (status) {
			case ReportStatus.PENDING:
				return <Badge variant="outline">En attente</Badge>;
			case ReportStatus.REVIEWED:
				return <Badge variant="secondary">Examiné</Badge>;
			case ReportStatus.RESOLVED:
				return <Badge variant="success">Résolu</Badge>;
			case ReportStatus.DISMISSED:
				return <Badge variant="destructive">Rejeté</Badge>;
			default:
				return <Badge variant="default">{status}</Badge>;
		}
	};

	return (
		<div className="flex-1 space-y-8 p-4 pt-6 md:p-8">
			<div className="flex items-center gap-4">
				<Button variant="ghost" size="icon" asChild>
					<Link href="/admin">
						<ArrowLeft className="h-4 w-4" />
					</Link>
				</Button>
				<h2 className="text-3xl font-bold tracking-tight">Signalements</h2>
			</div>

			<Card>
				<CardHeader>
					<CardTitle>Liste des signalements</CardTitle>
					<CardDescription>
						Gérez les signalements de contenu inapproprié.
					</CardDescription>
				</CardHeader>
				<CardContent>
					<Table>
						<TableHeader>
							<TableRow>
								<TableHead>Signalé par</TableHead>
								<TableHead>Cible</TableHead>
								<TableHead>Raison</TableHead>
								<TableHead>Description</TableHead>
								<TableHead>Statut</TableHead>
								<TableHead>Date</TableHead>
								<TableHead className="text-right">Actions</TableHead>
							</TableRow>
						</TableHeader>
						<TableBody>
							{loading ? (
								<TableRow>
									<TableCell colSpan={7} className="text-center py-8">
										Chargement...
									</TableCell>
								</TableRow>
							) : reports.length === 0 ? (
								<TableRow>
									<TableCell colSpan={7} className="text-center py-8">
										Aucun signalement trouvé.
									</TableCell>
								</TableRow>
							) : (
								reports.map((report) => (
									<TableRow key={report.uuid}>
										<TableCell>{report.reporterId.substring(0, 8)}...</TableCell>
										<TableCell>
											{report.contentId ? (
												<Link
													href={`/meme/${report.contentId}`}
													className="text-primary hover:underline"
												>
													Contenu
												</Link>
											) : (
												"Tag"
											)}
										</TableCell>
										<TableCell className="font-medium capitalize">
											{report.reason}
										</TableCell>
										<TableCell className="max-w-xs truncate">
											{report.description || "-"}
										</TableCell>
										<TableCell>{getStatusBadge(report.status)}</TableCell>
										<TableCell>
											{new Date(report.createdAt).toLocaleDateString()}
										</TableCell>
										<TableCell className="text-right">
											<DropdownMenu>
												<DropdownMenuTrigger asChild>
													<Button variant="ghost" size="icon">
														<MoreHorizontal className="h-4 w-4" />
													</Button>
												</DropdownMenuTrigger>
												<DropdownMenuContent align="end">
													<DropdownMenuItem
														onClick={() =>
															handleUpdateStatus(report.uuid, ReportStatus.REVIEWED)
														}
													>
														<AlertCircle className="h-4 w-4 mr-2" />
														Marquer comme examiné
													</DropdownMenuItem>
													<DropdownMenuItem
														onClick={() =>
															handleUpdateStatus(report.uuid, ReportStatus.RESOLVED)
														}
													>
														<CheckCircle className="h-4 w-4 mr-2" />
														Marquer comme résolu
													</DropdownMenuItem>
													<DropdownMenuItem
														onClick={() =>
															handleUpdateStatus(report.uuid, ReportStatus.DISMISSED)
														}
														className="text-destructive"
													>
														<XCircle className="h-4 w-4 mr-2" />
														Rejeter
													</DropdownMenuItem>
													{report.contentId && (
														<DropdownMenuItem asChild>
															<Link href={`/meme/${report.contentId}`}>Voir le contenu</Link>
														</DropdownMenuItem>
													)}
												</DropdownMenuContent>
											</DropdownMenu>
										</TableCell>
									</TableRow>
								))
							)}
						</TableBody>
					</Table>
				</CardContent>
			</Card>
		</div>
	);
}