"use client";
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 { Button } from "_components/ui/Button";
import { Switch } from "_components/ui/Switch";
import { Trash } from "lucide-react";
import { useSession } from "next-auth/react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useForm } from "react-hook-form";
import toast from "react-hot-toast";

export const ReportSenderInfo = ({
	report,
}: {
	report: IReport & {
		Reported?: User;
		Sender?: User;
	};
}) => {
	const { Reported, Sender } = report;
	return (
		<div className="card-body">
			<Link
				href={`/admin/user/${Reported?.id}`}
				className="card-title link link-hover"
			>
				{Reported?.firstname} {Reported?.lastname} ({Reported?.publicId})
			</Link>
			<div className="textarea w-full text-left">{report.text}</div>
			<Link
				href={`/admin/user/${Reported?.id}`}
				className="text-sm text-gray-600 text-right link link-hover"
			>
				Meldet 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;
		Reviewer?: User | null;
	};
}) => {
	const { Reviewer } = report;
	const [isEditLoading, setIsEditLoading] = useState(false);

	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) => {
				setIsEditLoading(true);
				const newReport = await editReport(values.id, {
					reviewerUserId: session.data?.user.id,
					reviewerComment: values.reviewerComment,
					reviewed: values.reviewed,
				});
				form.reset(newReport);
				setIsEditLoading(false);
				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-sm text-gray-600 text-right">
				{report.Reviewer &&
					`Kommentar von ${Reviewer?.firstname} ${Reviewer?.lastname} (${Reviewer?.publicId})`}
			</p>
			<Switch
				form={form}
				name="reviewed"
				label="Report als geklärt 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={isEditLoading}
				>
					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>
	);
};
