"use client";

import { useState, type FormEvent } from "react";
import { useRouter } from "next/navigation";
import type { CmsPage } from "@/types/cms";
import { Button } from "@/components/ui/button";
import { Input, Select, Textarea } from "@/components/ui/input";
import { useToast } from "@/components/ui/toast";
import { clientFetch } from "@/lib/api/client";

export function CmsPageForm({ initial }: { initial?: CmsPage }) {
  const router = useRouter();
  const [title, setTitle] = useState(initial?.title ?? "");
  const [slug, setSlug] = useState(initial?.slug ?? "");
  const [content, setContent] = useState(initial?.content ?? "");
  const [status, setStatus] = useState<"draft" | "published">(initial?.status ?? "draft");
  const [metaTitle, setMetaTitle] = useState(initial?.meta_title ?? "");
  const [metaDescription, setMetaDescription] = useState(initial?.meta_description ?? "");
  const [ogImage, setOgImage] = useState(initial?.og_image ?? "");
  const [error, setError] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const { toast } = useToast();

  async function handleSubmit(formEvent: FormEvent<HTMLFormElement>) {
    formEvent.preventDefault();
    setError(null);
    setIsSubmitting(true);

    const endpoint = initial ? `/api/admin/cms/pages/${initial.id}` : "/api/admin/cms/pages";
    const method = initial ? "PUT" : "POST";

    const res = await clientFetch(endpoint, {
      method,
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        title,
        slug,
        content: content || null,
        status,
        meta_title: metaTitle || null,
        meta_description: metaDescription || null,
        og_image: ogImage || null,
      }),
    });

    setIsSubmitting(false);
    const body = await res.json().catch(() => null);

    if (!res.ok) {
      const message = body?.errors?.slug?.[0] ?? body?.message ?? "Failed to save page.";
      setError(message);
      toast(message, "error");
      return;
    }

    toast("Page saved successfully.", "success");
    router.push("/admin/cms");
    router.refresh();
  }

  return (
    <form onSubmit={handleSubmit} className="mt-4 flex max-w-2xl flex-col gap-3">
      <label className="flex flex-col gap-1 text-sm font-medium">
        Title
        <Input required value={title} onChange={(e) => setTitle(e.target.value)} />
      </label>
      <label className="flex flex-col gap-1 text-sm font-medium">
        Slug
        <Input
          required
          value={slug}
          onChange={(e) => setSlug(e.target.value)}
          placeholder="about-us"
          className="font-mono"
        />
        <span className="text-xs font-normal text-kolabora-neutral-dark/70">
          The public page will be shown at <code>/pages/{slug || "slug"}</code>.
        </span>
      </label>
      <label className="flex flex-col gap-1 text-sm font-medium">
        Content (HTML)
        <Textarea
          rows={10}
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder="<p>Write the page content here...</p>"
          className="font-mono"
        />
        <span className="text-xs font-normal text-kolabora-neutral-dark/70">
          Written as raw HTML — a visual rich text editor hasn&apos;t been built yet (FR-CMS-005).
        </span>
      </label>
      <label className="flex flex-col gap-1 text-sm font-medium">
        Status
        <Select value={status} onChange={(e) => setStatus(e.target.value as "draft" | "published")}>
          <option value="draft">Draft</option>
          <option value="published">Published</option>
        </Select>
      </label>

      <div className="mt-2 border-t border-kolabora-neutral-dark/10 pt-3">
        <p className="text-sm font-medium">SEO (FR-CMS-006)</p>
        <div className="mt-2 flex flex-col gap-3">
          <label className="flex flex-col gap-1 text-sm font-medium">
            Meta Title
            <Input value={metaTitle} onChange={(e) => setMetaTitle(e.target.value)} />
          </label>
          <label className="flex flex-col gap-1 text-sm font-medium">
            Meta Description
            <Textarea rows={2} value={metaDescription} onChange={(e) => setMetaDescription(e.target.value)} />
          </label>
          <label className="flex flex-col gap-1 text-sm font-medium">
            OG Image URL
            <Input value={ogImage} onChange={(e) => setOgImage(e.target.value)} placeholder="https://..." />
          </label>
        </div>
      </div>

      {error && <p className="text-sm text-red-600">{error}</p>}
      <div className="mt-2 flex gap-2">
        <Button type="submit" loading={isSubmitting}>
          Save
        </Button>
      </div>
    </form>
  );
}