"use client";

import Link from "next/link";
import { useActionState } from "react";
import { saveProjectAction } from "@/app/admin/actions";
import { PHOTO_KINDS, PROJECT_CATEGORIES } from "@/lib/form";
import type { ActionState } from "@/lib/form";

type ProjectInput = {
  id: string;
  slug: string;
  title: string;
  category: string;
  location: string;
  year: string;
  size: string;
  summary: string;
  story: string;
  scope: string;
  materials: string;
  rooms: string;
  palette: string;
  testimonialQuote: string;
  testimonialAuthor: string;
  image: string;
  published: boolean;
};

export function ProjectForm({
  initial,
  mode,
}: {
  initial: ProjectInput;
  mode: "new" | "edit";
}) {
  const [state, formAction, pending] = useActionState<ActionState, FormData>(
    saveProjectAction,
    null,
  );

  return (
    <form action={formAction} className="space-y-6">
      <input type="hidden" name="originalId" value={mode === "edit" ? initial.id : ""} />

      {state?.error ? (
        <p
          role="alert"
          className="rounded-xl border border-coral/40 bg-coral-soft px-4 py-3 text-sm font-medium text-coral-dark"
        >
          {state.error}
        </p>
      ) : null}

      <div className="grid gap-6 lg:grid-cols-[1.6fr_1fr]">
        {/* Main column */}
        <div className="space-y-6">
          <section className="card-soft space-y-5 p-7">
            <h2 className="display-3">Content</h2>
            <div>
              <label htmlFor="title" className="field-label">
                Title *
              </label>
              <input
                id="title"
                name="title"
                type="text"
                required
                defaultValue={initial.title}
                placeholder="Alder House"
                className="field-input"
              />
            </div>
            <div className="grid gap-5 sm:grid-cols-2">
              <div>
                <label htmlFor="slug" className="field-label">
                  URL slug ( /portfolio/slug )
                </label>
                <input
                  id="slug"
                  name="slug"
                  type="text"
                  defaultValue={initial.slug}
                  placeholder="auto-generated from the title"
                  className="field-input"
                />
              </div>
              <div>
                <label htmlFor="id" className="field-label">
                  ID (admin URL)
                </label>
                <input
                  id="id"
                  name="id"
                  type="text"
                  defaultValue={initial.id}
                  placeholder="auto-generated"
                  className="field-input"
                />
              </div>
            </div>
            <div>
              <label htmlFor="summary" className="field-label">
                Summary * (cards + search description)
              </label>
              <textarea
                id="summary"
                name="summary"
                rows={2}
                required
                defaultValue={initial.summary}
                className="field-textarea resize-y"
              />
            </div>
            <div>
              <label htmlFor="story" className="field-label">
                The story *
              </label>
              <textarea
                id="story"
                name="story"
                rows={8}
                required
                defaultValue={initial.story}
                className="field-textarea resize-y"
              />
            </div>
          </section>

          <section className="card-soft space-y-5 p-7">
            <h2 className="display-3">Details</h2>
            <div className="grid gap-5 sm:grid-cols-2">
              <div>
                <label htmlFor="scope" className="field-label">
                  Scope (one per line)
                </label>
                <textarea
                  id="scope"
                  name="scope"
                  rows={4}
                  defaultValue={initial.scope}
                  className="field-textarea resize-y font-mono text-[0.9rem]"
                />
              </div>
              <div>
                <label htmlFor="materials" className="field-label">
                  Materials (one per line)
                </label>
                <textarea
                  id="materials"
                  name="materials"
                  rows={4}
                  defaultValue={initial.materials}
                  className="field-textarea resize-y font-mono text-[0.9rem]"
                />
              </div>
              <div>
                <label htmlFor="rooms" className="field-label">
                  Gallery photos (one photo kind or URL per line)
                </label>
                <textarea
                  id="rooms"
                  name="rooms"
                  rows={4}
                  defaultValue={initial.rooms}
                  className="field-textarea resize-y font-mono text-[0.9rem]"
                />
                <p className="mt-2 text-xs text-ink-mute">
                  Photo kinds: living, bedroom, kitchen, bath, dining, office,
                  cafe, loft, studio, terrace, heroAlt… — or paste /uploads and
                  https:// URLs.
                </p>
              </div>
              <div>
                <label htmlFor="palette" className="field-label">
                  Palette (one hex per line, e.g. #E9E0D0)
                </label>
                <textarea
                  id="palette"
                  name="palette"
                  rows={4}
                  defaultValue={initial.palette}
                  className="field-textarea resize-y font-mono text-[0.9rem]"
                />
              </div>
            </div>
          </section>
        </div>

        {/* Side column */}
        <div className="space-y-6">
          <section className="card-soft space-y-5 p-7">
            <h2 className="display-3">Publish</h2>
            <label className="flex items-center gap-3 text-sm font-medium text-ink">
              <input
                type="checkbox"
                name="published"
                defaultChecked={initial.published}
                className="h-4 w-4 accent-[#0f7b7b]"
              />
              Published (visible on the website)
            </label>
            <div className="grid gap-4">
              <div>
                <label htmlFor="category" className="field-label">
                  Category
                </label>
                <select
                  id="category"
                  name="category"
                  defaultValue={initial.category}
                  className="field-input"
                >
                  {PROJECT_CATEGORIES.map((c) => (
                    <option key={c} value={c}>
                      {c}
                    </option>
                  ))}
                </select>
              </div>
              <div>
                <label htmlFor="location" className="field-label">
                  Location
                </label>
                <input
                  id="location"
                  name="location"
                  type="text"
                  defaultValue={initial.location}
                  placeholder="Portland, OR"
                  className="field-input"
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label htmlFor="year" className="field-label">
                    Year
                  </label>
                  <input
                    id="year"
                    name="year"
                    type="text"
                    defaultValue={initial.year}
                    placeholder="2025"
                    className="field-input"
                  />
                </div>
                <div>
                  <label htmlFor="size" className="field-label">
                    Size
                  </label>
                  <input
                    id="size"
                    name="size"
                    type="text"
                    defaultValue={initial.size}
                    placeholder="210 m² family home"
                    className="field-input"
                  />
                </div>
              </div>
              <div>
                <label htmlFor="image" className="field-label">
                  Hero photo (library kind or URL — optional)
                </label>
                <input
                  id="image"
                  name="image"
                  type="text"
                  list="hero-photo-kinds"
                  defaultValue={initial.image}
                  placeholder="falls back to the first gallery photo"
                  className="field-input"
                />
                <datalist id="hero-photo-kinds">
                  {PHOTO_KINDS.map((p) => (
                    <option key={p} value={p} />
                  ))}
                </datalist>
              </div>
            </div>
          </section>

          <section className="card-soft space-y-5 p-7">
            <h2 className="display-3">Client quote</h2>
            <p className="text-sm text-ink-mute">
              Optional — shown on the project page.
            </p>
            <div>
              <label htmlFor="testimonialQuote" className="field-label">
                Quote
              </label>
              <textarea
                id="testimonialQuote"
                name="testimonialQuote"
                rows={3}
                defaultValue={initial.testimonialQuote}
                className="field-textarea resize-y"
              />
            </div>
            <div>
              <label htmlFor="testimonialAuthor" className="field-label">
                Author
              </label>
              <input
                id="testimonialAuthor"
                name="testimonialAuthor"
                type="text"
                defaultValue={initial.testimonialAuthor}
                className="field-input"
              />
            </div>
          </section>
        </div>
      </div>

      <div className="flex flex-wrap items-center gap-4">
        <button
          type="submit"
          disabled={pending}
          className="btn btn-teal disabled:cursor-not-allowed disabled:opacity-60"
        >
          {pending ? "Saving…" : mode === "new" ? "Add project" : "Save changes"}
        </button>
        <Link href="/admin/projects" className="btn btn-outline">
          Cancel
        </Link>
      </div>
    </form>
  );
}