"use client";
import { penaltyColumns as penaltyColumns } from "(app)/admin/penalty/columns";
import { editReport } from "(app)/admin/report/actions";
import { zodResolver } from "@hookform/resolvers/zod";
import { Report as IReport, User } from "@repo/db";
import { ReportSchema, Report as IReportZod } from "@repo/db/zod";
import { PaginatedTable } from "_components/PaginatedTable";
import { Button } from "_components/ui/Button";
import { Switch } from "_components/ui/Switch";
import { Shield, Trash } from "lucide-react";
import { useSession } from "next-auth/react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import toast from "react-hot-toast";

export const ReportSenderInfo = ({
	report,
}: {
	report: IReport & {
		Reported: User;
		Sender: User | null;
	};
}) => {
	const { Reported, Sender } = report;
	return (
		<div className="card-body">
			<h2 className="card-title">
				<Link href={`/admin/user/${Reported?.id}`} className="link link-hover">
					{Reported?.firstname} {Reported?.lastname} ({Reported?.publicId}) als{" "}
				</Link>
				<span className="text-primary">{report.reportedUserRole}</span>
			</h2>
			<div className="textarea w-full text-left">{report.text}</div>
			<Link
				href={`/admin/user/${Sender?.id}`}
				className="link link-hover text-right text-sm text-gray-600"
			>
				gemeldet von Nutzer {Sender?.firstname} {Sender?.lastname} ({Sender?.publicId}) am{" "}
				{new Date(report.timestamp).toLocaleString()}
			</Link>
		</div>
	);
};

export const ReportAdmin = ({
	report,
}: {
	report: IReport & {
		Reported?: User;
		Sender: User | null;

		Reviewer?: User | null;
	};
}) => {
	const { Reviewer } = report;

	const session = useSession();
	const router = useRouter();
	const form = useForm<IReportZod>({
		resolver: zodResolver(ReportSchema),
		defaultValues: report,
	});
	return (
		<form
			className="card-body"
			onSubmit={form.handleSubmit(async (values) => {
				const newReport = await editReport(values.id, {
					reviewerUserId: session.data?.user.id,
					reviewerComment: values.reviewerComment,
					reviewed: values.reviewed,
				});
				form.reset(newReport);
				router.refresh();
				toast.success("Deine Änderungen wurden gespeichert!", {
					style: {
						background: "var(--color-base-100)",
						color: "var(--color-base-content)",
					},
				});
			})}
		>
			<h2 className="card-title">Staff Kommentar</h2>
			<textarea {...form.register("reviewerComment")} className="textarea w-full" placeholder="" />
			<p className="text-right text-sm text-gray-600">
				{report.Reviewer &&
					`Kommentar von ${Reviewer?.firstname} ${Reviewer?.lastname} (${Reviewer?.publicId})`}
			</p>
			<Switch form={form} name="reviewed" label="Report als erledigt markieren" />
			<div className="card-actions flex justify-between">
				<Button
					role="submit"
					className="btn-sm btn-wide btn-outline btn-primary"
					disabled={!form.formState.isDirty}
					isLoading={form.formState.isSubmitting}
				>
					Speichern
				</Button>
				<Button
					role="button"
					className="btn btn-sm btn-warning"
					onSubmit={() => false}
					onClick={async () => {
						await editReport(report.id, {
							reviewerUserId: null,
							reviewerComment: null,
							reviewed: false,
						});
						form.reset({
							...report,
							reviewerComment: null,
							reviewed: false,
						});
						router.refresh();

						toast.success("Kommentar gelöscht!", {
							style: {
								background: "var(--color-base-100)",
								color: "var(--color-base-content)",
							},
						});
					}}
				>
					<Trash /> Kommentar löschen
				</Button>
			</div>
		</form>
	);
};

export const ReportPenalties = ({
	report,
}: {
	report: IReport & {
		Reported?: User;
		Sender: User | null;

		Reviewer?: User | null;
	};
}) => {
	return (
		<div className="card-body">
			<h2 className="card-title">
				<Shield className="h-5 w-5" /> Strafen zu diesem Report
			</h2>
			<PaginatedTable
				prismaModel="penalty"
				include={{
					CreatedUser: true,
					Report: true,
				}}
				filter={{
					reportId: report.id,
				}}
				columns={penaltyColumns}
			/>
		</div>
	);
};
