"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import {
  FeaturedImageField,
  GalleryImagesField,
  TagsField,
  type LocalImage,
} from "@/components/catalog/CatalogFormFields";
import CatalogCategorySelect from "@/components/catalog/CatalogCategorySelect";
import RichTextArea from "@/components/RichTextArea";
import {
  createMeshkeePortfolio,
  listMeshkeeEntityCategories,
  uploadMeshkeeMediaFile,
  type MeshkeeEntityCategory,
} from "@/services/meshkee-catalog";
import styles from "./CatalogForm.module.css";

export default function AddPortfolioForm({
  meshkeeId,
  listHref,
  title,
  lead,
}: {
  meshkeeId: string;
  listHref: string;
  title: string;
  lead: string;
}) {
  const router = useRouter();
  const [categories, setCategories] = useState<MeshkeeEntityCategory[]>([]);
  const [categoryId, setCategoryId] = useState("");
  const [titleFa, setTitleFa] = useState("");
  const [titleEn, setTitleEn] = useState("");
  const [abstract, setAbstract] = useState("");
  const [projectUrl, setProjectUrl] = useState("");
  const [mainTextHtml, setMainTextHtml] = useState("");
  const [titleImage, setTitleImage] = useState<LocalImage | null>(null);
  const [gallery, setGallery] = useState<LocalImage[]>([]);
  const [tags, setTags] = useState<string[]>([]);
  const [seoMetaTitle, setSeoMetaTitle] = useState("");
  const [seoMetaDescription, setSeoMetaDescription] = useState("");
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    let cancelled = false;
    void (async () => {
      try {
        const items = await listMeshkeeEntityCategories(meshkeeId, "portfolio");
        if (!cancelled) setCategories(items);
      } catch (err) {
        if (!cancelled) {
          setError(
            err instanceof Error ? err.message : "Could not load categories.",
          );
        }
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [meshkeeId]);

  async function onSubmit(event?: React.FormEvent) {
    event?.preventDefault();
    if (!titleFa.trim()) {
      setError("Enter a Persian title.");
      return;
    }

    setSaving(true);
    setError("");
    try {
      let featuredMediaId: string | undefined;
      if (titleImage?.file) {
        featuredMediaId = (
          await uploadMeshkeeMediaFile(meshkeeId, titleImage.file)
        ).id;
      }

      const galleryMediaIds: string[] = [];
      for (const item of gallery) {
        if (item.mediaId) {
          galleryMediaIds.push(item.mediaId);
          continue;
        }
        if (item.file) {
          galleryMediaIds.push(
            (await uploadMeshkeeMediaFile(meshkeeId, item.file)).id,
          );
        }
      }

      await createMeshkeePortfolio(meshkeeId, {
        titleFa: titleFa.trim(),
        titleEn: titleEn.trim() || undefined,
        abstract: abstract.trim() || undefined,
        projectUrl: projectUrl.trim() || undefined,
        mainTextHtml: mainTextHtml || undefined,
        categoryId: categoryId || undefined,
        featuredMediaId,
        galleryMediaIds,
        tags,
        seoMetaTitle: seoMetaTitle.trim() || null,
        seoMetaDescription: seoMetaDescription.trim() || null,
      });
      router.push(listHref);
      router.refresh();
    } catch (err) {
      setError(
        err instanceof Error ? err.message : "Could not create portfolio.",
      );
    } finally {
      setSaving(false);
    }
  }

  return (
    <form className={styles.page} onSubmit={onSubmit}>
      <header className={styles.head}>
        <div>
          <h1 className={styles.title}>{title}</h1>
          <p className={styles.lead}>{lead}</p>
        </div>
        <div className={styles.headActions}>
          <Link href={listHref} className={`outline-btn ${styles.ghostBtn}`}>
            Back
          </Link>
          <button
            type="submit"
            className={`outline-btn ${styles.saveBtn}`}
            disabled={saving}
          >
            {saving ? "Saving…" : "Save"}
          </button>
        </div>
      </header>

      {error ? (
        <div className={styles.errorBox} role="alert">
          {error}
        </div>
      ) : null}

      <div className={styles.layout}>
        <section className={styles.card}>
          <h2 className={styles.sectionTitle}>Media</h2>
          <div className={styles.mediaGrid}>
            <FeaturedImageField
              label="Title image"
              value={titleImage}
              aspect={3 / 2}
              disabled={saving}
              onChange={setTitleImage}
            />
            <GalleryImagesField
              items={gallery}
              disabled={saving}
              onChange={setGallery}
            />
          </div>
        </section>

        <section className={styles.card}>
          <h2 className={styles.sectionTitle}>Identity</h2>
          <div className={styles.stack}>
            <div className={styles.identityRow3}>
              <CatalogCategorySelect
                categories={categories}
                value={categoryId}
                disabled={saving}
                optional
                placeholder="No category"
                onChange={setCategoryId}
              />
              <label className={styles.field}>
                <span>Title FA</span>
                <input
                  className="fa"
                  lang="fa"
                  dir="rtl"
                  value={titleFa}
                  disabled={saving}
                  required
                  onChange={(event) => setTitleFa(event.target.value)}
                />
              </label>
              <label className={styles.field}>
                <span>
                  Title EN <em className={styles.optional}>(optional)</em>
                </span>
                <input
                  value={titleEn}
                  disabled={saving}
                  onChange={(event) => setTitleEn(event.target.value)}
                />
              </label>
            </div>
            <label className={styles.field}>
              <span>
                Project URL <em className={styles.optional}>(optional)</em>
              </span>
              <input
                dir="ltr"
                value={projectUrl}
                disabled={saving}
                placeholder="https://"
                onChange={(event) => setProjectUrl(event.target.value)}
              />
            </label>
          </div>
        </section>

        <section className={styles.card}>
          <h2 className={styles.sectionTitle}>Content</h2>
          <div className={styles.stack}>
            <label className={styles.field}>
              <span>
                Abstract <em className={styles.optional}>(optional)</em>
              </span>
              <textarea
                rows={3}
                value={abstract}
                disabled={saving}
                onChange={(event) => setAbstract(event.target.value)}
              />
            </label>
            <div className={styles.richField}>
              <RichTextArea
                label="Content"
                value={mainTextHtml}
                onChange={setMainTextHtml}
                disabled={saving}
                minHeight={220}
              />
            </div>
            <TagsField tags={tags} disabled={saving} onChange={setTags} />
          </div>
        </section>

        <section className={styles.card}>
          <h2 className={styles.sectionTitle}>SEO</h2>
          <div className={styles.identityRow}>
            <label className={styles.field}>
              <span>
                SEO title <em className={styles.optional}>(optional)</em>
              </span>
              <input
                value={seoMetaTitle}
                maxLength={70}
                disabled={saving}
                onChange={(event) => setSeoMetaTitle(event.target.value)}
              />
            </label>
            <label className={styles.field}>
              <span>
                SEO description <em className={styles.optional}>(optional)</em>
              </span>
              <input
                value={seoMetaDescription}
                maxLength={160}
                disabled={saving}
                onChange={(event) => setSeoMetaDescription(event.target.value)}
              />
            </label>
          </div>
        </section>

        <div className={styles.footerActions}>
          <Link href={listHref} className={`outline-btn ${styles.ghostBtn}`}>
            Cancel
          </Link>
          <button
            type="submit"
            className={`outline-btn ${styles.saveBtn}`}
            disabled={saving}
          >
            {saving ? "Saving…" : "Save"}
          </button>
        </div>
      </div>
    </form>
  );
}