"use client";

import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { useEffect, useMemo, useRef, useState, useTransition } from "react";
import { useUnsavedChanges } from "@/hooks/use-unsaved-changes";
import type { ArticleSaveResult } from "@/lib/article-input";
import { slugify } from "@/lib/format";
import { ArticlePreview, type ArticlePreviewData } from "./article-preview";
import { MediaPicker } from "./media-picker";
import { RichText } from "./rich-text";

export function ArticleForm({
	action,
	defaultValues,
}: {
	action: (formData: FormData) => Promise<ArticleSaveResult | undefined>;
	edit?: boolean;
	defaultValues?: {
		title?: string;
		slug?: string;
		image?: string;
		shortStory?: string;
		fullStory?: string;
		status?: string;
		publishAt?: string;
	};
}) {
	const t = useTranslations("pages.admin.articles.form");
	const tAction = useTranslations("pages.admin.actions");
	const [dirty, setDirty] = useState(false);
	const [pending, startTransition] = useTransition();
	const [saveError, setSaveError] = useState<string | null>(null);
	const router = useRouter();
	const saving = useRef(false);
	const editVersion = useRef(0);
	function markDirty() {
		editVersion.current++;
		setDirty(true);
	}
	useUnsavedChanges(dirty, tAction("leaveUnsaved"));
	const [title, setTitle] = useState(defaultValues?.title ?? "");
	const [slug, setSlug] = useState(defaultValues?.slug ?? "");
	const [slugTouched, setSlugTouched] = useState(Boolean(defaultValues?.slug));
	const [image, setImage] = useState(defaultValues?.image ?? "");
	const [imageError, setImageError] = useState(false);
	const [status, setStatus] = useState(defaultValues?.status ?? "published");
	const [publishAt, setPublishAt] = useState("");
	useEffect(() => {
		if (!defaultValues?.publishAt) return;
		const date = new Date(defaultValues.publishAt);
		if (Number.isNaN(date.getTime())) return;
		const local = new Date(date.getTime() - date.getTimezoneOffset() * 60_000);
		setPublishAt(local.toISOString().slice(0, 16));
	}, [defaultValues?.publishAt]);

	const formRef = useRef<HTMLFormElement>(null);
	const [preview, setPreview] = useState<ArticlePreviewData | null>(null);
	const suggestedSlug = useMemo(() => slugify(title), [title]);

	return (
		<form
			ref={formRef}
			onChangeCapture={markDirty}
			onSubmit={(event) => {
				event.preventDefault();
				if (saving.current) return;
				const data = new FormData(event.currentTarget);
				if (status === "scheduled" && publishAt) {
					const date = new Date(publishAt);
					if (!Number.isNaN(date.getTime()))
						data.set("publishAt", date.toISOString());
				}
				const submittedVersion = editVersion.current;
				saving.current = true;
				setSaveError(null);
				startTransition(async () => {
					try {
						const result = await action(data);
						if (result && !result.ok) {
							setSaveError(result.error);
							return;
						}
						if (editVersion.current === submittedVersion) setDirty(false);
						if (result?.ok && result.data?.redirectTo)
							router.push(result.data.redirectTo);
					} catch (error) {
						if (
							error &&
							typeof error === "object" &&
							"digest" in error &&
							String(error.digest).startsWith("NEXT_REDIRECT")
						) {
							setDirty(false);
							throw error;
						}
						setSaveError(tAction("saveError"));
					} finally {
						saving.current = false;
					}
				});
			}}
			className="admin-card"
			style={{ display: "grid", gap: "1rem" }}
		>
			<fieldset disabled={pending} className="contents">
				{saveError && (
					<p role="alert" className="text-sm">
						{saveError}
					</p>
				)}
				<div className="grid gap-4 md:grid-cols-2">
					<label className="block">
						<span className="text-xs font-medium text-[var(--admin-text-muted)]">
							{t("title")}
						</span>
						<input
							name="title"
							maxLength={255}
							value={title}
							onChange={(e) => setTitle(e.target.value)}
							placeholder={t("titlePlaceholder")}
							required
							className="input input-bordered mt-1 w-full"
						/>
					</label>

					<label className="block">
						<span className="text-xs font-medium text-[var(--admin-text-muted)]">
							{t("slug")}
						</span>
						<input
							name="slug"
							maxLength={255}
							value={slugTouched ? slug : suggestedSlug}
							onChange={(e) => {
								setSlug(e.target.value);
								setSlugTouched(true);
							}}
							placeholder={t("slugPlaceholder")}
							className="input input-bordered mt-1 w-full"
						/>
					</label>
				</div>

				<div className="block">
					<span className="text-xs font-medium text-[var(--admin-text-muted)]">
						{t("image")}
					</span>
					<div className="mt-1 flex gap-2 items-start">
						<input
							aria-label={t("image")}
							name="image"
							maxLength={255}
							value={image}
							onChange={(e) => {
								setImage(e.target.value);
								setImageError(false);
							}}
							placeholder={t("imagePlaceholder")}
							className="input input-bordered min-w-0 flex-1"
						/>
						<MediaPicker
							onSelect={(url) => {
								setImage(url);
								markDirty();
								setImageError(false);
							}}
							current={image}
						/>
					</div>
					{image && !imageError ? (
						// eslint-disable-next-line @next/next/no-img-element
						<img
							src={image}
							alt={t("imagePreview")}
							onError={() => setImageError(true)}
							className="mt-2 rounded-lg border border-[var(--admin-text-muted)]/14 object-cover"
							style={{ maxHeight: 160 }}
						/>
					) : null}
					{imageError ? (
						<p className="muted mt-1" style={{ fontSize: "0.78rem" }}>
							{t("imageNotFound")}
						</p>
					) : null}
				</div>

				<label className="block">
					<span className="text-xs font-medium text-[var(--admin-text-muted)]">
						{t("summary")}
					</span>
					<textarea
						name="shortStory"
						maxLength={255}
						defaultValue={defaultValues?.shortStory ?? ""}
						placeholder={t("bodyPlaceholder")}
						rows={2}
						className="input input-bordered mt-1 w-full resize-y"
					/>
				</label>

				<div className="block">
					<span className="text-xs font-medium text-[var(--admin-text-muted)]">
						{t("body")}
					</span>
					<RichText
						onChange={markDirty}
						name="fullStory"
						defaultValue={defaultValues?.fullStory ?? ""}
						placeholder={t("bodyPlaceholder")}
						rows={12}
					/>
				</div>

				<div className="grid gap-4 md:grid-cols-2">
					<label className="block">
						<span className="text-xs font-medium text-[var(--admin-text-muted)]">
							{t("status")}
						</span>
						<select
							name="status"
							value={status}
							onChange={(e) => setStatus(e.target.value)}
							className="input input-bordered mt-1 w-full"
						>
							<option value="draft">{t("statusDraft")}</option>
							<option value="scheduled">{t("statusScheduled")}</option>
							<option value="published">{t("statusPublished")}</option>
						</select>
					</label>

					{status === "scheduled" ? (
						<label className="block">
							<span className="text-xs font-medium text-[var(--admin-text-muted)]">
								{t("publishAt")}
							</span>
							<input
								type="datetime-local"
								name="publishAt"
								value={publishAt}
								onChange={(e) => setPublishAt(e.target.value)}
								required
								className="input input-bordered mt-1 w-full"
							/>
						</label>
					) : null}
				</div>

				<div className="sticky bottom-0 flex flex-wrap gap-2 border-t border-[var(--admin-border)] bg-[var(--admin-surface)] py-3">
					<button
						type="button"
						className="btn btn-outline"
						onClick={() => {
							if (!formRef.current) return;
							const values = new FormData(formRef.current);
							setPreview({
								title: String(values.get("title") ?? ""),
								image: String(values.get("image") ?? ""),
								summary: String(values.get("shortStory") ?? ""),
								body: String(values.get("fullStory") ?? ""),
							});
						}}
					>
						{tAction("preview")}
					</button>
					<button
						type="submit"
						className="btn btn-primary"
						disabled={pending}
						aria-busy={pending}
					>
						{pending ? tAction("saving") : t("save")}
					</button>
					{dirty && (
						<span
							role="status"
							className="self-center text-xs text-[var(--admin-text-muted)]"
						>
							{tAction("unsaved")}
						</span>
					)}
				</div>
				<ArticlePreview data={preview} onClose={() => setPreview(null)} />
			</fieldset>
		</form>
	);
}