import { redirect } from "next/navigation";
import { getTranslations } from "next-intl/server";
import { createTicket } from "@/actions/help-tickets";
import { ContentCard, EmptyState, StatBlock } from "@/components/public/ui";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

function formatDate(d: Date | null): string {
	return d ? d.toISOString().slice(0, 16).replace("T", " ") : "";
}

export default async function HelpTicketsPage() {
	const session = await auth();
	if (!session?.user?.id) redirect("/login");

	const t = await getTranslations("pages.helpTickets");

	const userId = Number(session.user.id);

	let tickets: Awaited<
		ReturnType<typeof prisma.websiteHelpCenterTickets.findMany>
	> = [];
	try {
		tickets = await prisma.websiteHelpCenterTickets.findMany({
			where: { userId },
			orderBy: { createdAt: "desc" },
			take: 100,
		});
	} catch {
		tickets = [];
	}

	const openCount = tickets.filter((t) => t.open).length;
	const closedCount = tickets.length - openCount;

	return (
		<main style={{ display: "grid", gap: "1.5rem" }}>
			<ContentCard icon="🎫" title={t("title")} subtitle={t("subtitle")}>
				<div className="stat-grid">
					<StatBlock icon="🎫" value={tickets.length} label={t("statTotal")} />
					<StatBlock icon="📬" value={openCount} label={t("statOpen")} />
					<StatBlock icon="✅" value={closedCount} label={t("statClosed")} />
				</div>
			</ContentCard>

			<ContentCard icon="✏️" title={t("newTitle")} subtitle={t("newSubtitle")}>
				<form action={createTicket}>
					<div
						style={{ display: "flex", flexDirection: "column", gap: "0.6rem" }}
					>
						<input
							name="title"
							placeholder={t("subjectPlaceholder")}
							maxLength={255}
							required
						/>
						<textarea
							name="content"
							placeholder={t("contentPlaceholder")}
							rows={5}
							maxLength={5000}
							required
						/>
						<div>
							<button type="submit" className="btn btn-primary">
								{t("submit")}
							</button>
						</div>
					</div>
				</form>
			</ContentCard>

			<ContentCard
				icon="📋"
				title={t("listTitle")}
				subtitle={t("listSubtitle")}
				padded={tickets.length === 0}
			>
				{tickets.length === 0 ? (
					<EmptyState icon="🎫">{t("listEmpty")}</EmptyState>
				) : (
					<table>
						<thead>
							<tr>
								<th>{t("colId")}</th>
								<th>{t("colSubject")}</th>
								<th>{t("colStatus")}</th>
								<th>{t("colCreated")}</th>
							</tr>
						</thead>
						<tbody>
							{tickets.map((t2) => (
								<tr key={String(t2.id)}>
									<td>{String(t2.id)}</td>
									<td>{t2.title}</td>
									<td>
										<span className={`online-badge${t2.open ? " online" : ""}`}>
											<span className="online-dot" aria-hidden />
											{t2.open ? t("statusOpen") : t("statusClosed")}
										</span>
									</td>
									<td className="muted">{formatDate(t2.createdAt)}</td>
								</tr>
							))}
						</tbody>
					</table>
				)}
			</ContentCard>
		</main>
	);
}