EpicNext-Cms/src/components/admin/article-form.tsx

"use client";

import { useMemo, useState } from "react";
import { useTranslations } from "next-intl";
import { MediaPicker } from "./media-picker";
import { RichText } from "./rich-text";
import { slugify } from "@/lib/format";

export function ArticleForm({
	action,
	defaultValues,
}: {
	action: (formData: FormData) => Promise<void>;
	edit?: boolean;
	defaultValues?: {
		title?: string;
		slug?: string;
		image?: string;
		shortStory?: string;
		fullStory?: string;
	};
}) {
	const t = useTranslations("pages.admin.articles.form");
	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 suggestedSlug = useMemo(() => slugify(title), [title]);

	return (
		<form action={action} className="admin-card" style={{ display: "grid", gap: "1rem" }}>
			<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"
						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"
						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
						name="image"
						value={image}
						onChange={(e) => {
							setImage(e.target.value);
							setImageError(false);
						}}
						placeholder={t("imagePlaceholder")}
						className="input input-bordered flex-1"
					/>
					<MediaPicker
						onSelect={(url) => {
							setImage(url);
							setImageError(false);
						}}
						current={image}
					/>
				</div>
				{image && !imageError ? (
					// eslint-disable-next-line @next/next/no-img-element
					<img
						src={image}
						alt="preview"
						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" }}>
						Image not found — enter a valid URL or browse.
					</p>
				) : null}
			</div>

			<label className="block">
				<span className="text-xs font-medium text-[var(--admin-text-muted)]">
					{t("body")}
				</span>
				<textarea
					name="shortStory"
					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
					name="fullStory"
					defaultValue={defaultValues?.fullStory ?? ""}
					placeholder={t("bodyPlaceholder")}
					rows={12}
				/>
			</div>

			<button type="submit" className="btn btn-primary justify-self-start">
				{t("save")}
			</button>
		</form>
	);
}