"use client";
import { useEffect, useState } from "react";
import { Check, Eye, X } from "lucide-react";
import Link from "next/link";
import { getReports, handleMarkAsResolved } from "./actions";

export default function ReportPage() {
	const [reports, setReports] = useState<
		{
			id: number;
			timestamp: string;
			erledigt: boolean;
			sender: {
				id: string;
				firstname: string;
				lastname: string;
				publicId: string;
			};
			reported: {
				id: string;
				firstname: string;
				lastname: string;
				publicId: string;
			};
		}[]
	>([]);

	useEffect(() => {
		const fetchReports = async () => {
			const reps = await getReports();
			const transformedReports = reps.map((report) => ({
				id: report.id,
				timestamp: report.timestamp.toISOString(),
				erledigt: report.erledigt,
				sender: {
					id: report.sender.id,
					firstname: report.sender.firstname,
					lastname: report.sender.lastname,
					publicId: report.sender.publicId,
				},
				reported: {
					id: report.reported.id,
					firstname: report.reported.firstname,
					lastname: report.reported.lastname,
					publicId: report.reported.publicId,
				},
			}));
			setReports(transformedReports);
		};
		fetchReports();
	}, []);

	return (
		<>
			<div className="flex items-center gap-2 mb-4">
				<Eye className="w-5 h-5" />{" "}
				<span className="text-lg font-bold">Reports</span>
			</div>
			<div className="overflow-x-auto">
				<table className="table table-zebra w-full">
					<thead>
						<tr>
							<th>Erledigt</th>
							<th>Sender</th>
							<th>Reported</th>
							<th>Time</th>
							<th>ID</th>
							<th>Actions</th>
						</tr>
					</thead>
					<tbody>
						{reports.map((report) => (
							<tr key={report.id}>
								<td className="text-center">
									{report.erledigt ? (
										<Check className="text-green-500 w-5 h-5" />
									) : (
										<X className="text-red-500 w-5 h-5" />
									)}
								</td>
								<td>{`${report.sender.firstname} ${report.sender.lastname} (${report.sender.publicId})`}</td>
								<td>{`${report.reported.firstname} ${report.reported.lastname} (${report.reported.publicId})`}</td>
								<td>{new Date(report.timestamp).toLocaleString()}</td>
								<td>{report.id}</td>
								<td>
									<div className="flex gap-2">
										<Link href={`/admin/report/${report.id}`}>
											<button className="btn btn-sm btn-outline btn-info flex items-center gap-2">
												<Eye className="w-4 h-4" /> Anzeigen
											</button>
										</Link>
										{!report.erledigt && (
											<button
												className="btn btn-sm btn-outline btn-success flex items-center gap-2"
												onClick={async () => {
													const result = await handleMarkAsResolved(report.id);
													if (result.success) {
														setReports((prevReports) =>
															prevReports.map((r) =>
																r.id === report.id
																	? { ...r, erledigt: true }
																	: r,
															),
														);
													} else {
														alert("Error: " + result.error);
													}
												}}
											>
												<Check className="w-4 h-4" /> Erledigen
											</button>
										)}
									</div>
								</td>
							</tr>
						))}
					</tbody>
				</table>
			</div>
		</>
	);
}