"use client";

import Link from "next/link";
import { useActionState } from "react";
import { saveServiceAction } from "@/app/admin/actions";
import { ServiceIcon } from "@/components/artwork";
import { PHOTO_KINDS, SERVICE_ICONS } from "@/lib/form";
import type { ActionState } from "@/lib/form";

type ServiceInput = {
  id: string;
  slug: string;
  title: string;
  short: string;
  description: string;
  includes: string; // textarea string
  icon: string;
  photo: string;
  published: boolean;
};

export function ServiceForm({
  initial,
  mode,
}: {
  initial: ServiceInput;
  mode: "new" | "edit";
}) {
  const [state, formAction, pending] = useActionState<ActionState, FormData>(
    saveServiceAction,
    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 */}
        <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="Full-Service Design"
              className="field-input"
            />
          </div>
          <div className="grid gap-5 sm:grid-cols-2">
            <div>
              <label htmlFor="slug" className="field-label">
                URL anchor (links as /services#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="short" className="field-label">
              Short blurb (homepage cards)
            </label>
            <textarea
              id="short"
              name="short"
              rows={2}
              defaultValue={initial.short}
              className="field-textarea resize-y"
            />
          </div>
          <div>
            <label htmlFor="description" className="field-label">
              Full description *
            </label>
            <textarea
              id="description"
              name="description"
              rows={5}
              required
              defaultValue={initial.description}
              className="field-textarea resize-y"
            />
          </div>
          <div>
            <label htmlFor="includes" className="field-label">
              What&apos;s included (one per line, optional leading dashes)
            </label>
            <textarea
              id="includes"
              name="includes"
              rows={6}
              defaultValue={initial.includes}
              placeholder={"- Concept development\n- Space planning\n- Procurement"}
              className="field-textarea resize-y font-mono text-[0.9rem] leading-relaxed"
            />
          </div>
        </section>

        {/* 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>
              <label htmlFor="icon" className="field-label">
                Icon
              </label>
              <select
                id="icon"
                name="icon"
                defaultValue={initial.icon}
                className="field-input"
              >
                {SERVICE_ICONS.map((icon) => (
                  <option key={icon} value={icon}>
                    {icon}
                  </option>
                ))}
              </select>
              <p className="mt-2 flex items-center gap-2 text-xs text-ink-mute">
                Preview:
                <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-teal-soft text-teal">
                  <ServiceIcon name={initial.icon || "plan"} className="h-4.5 w-4.5" />
                </span>
              </p>
            </div>
            <div>
              <label htmlFor="photo" className="field-label">
                Photo (library kind or image URL / /uploads path)
              </label>
              <input
                id="photo"
                name="photo"
                type="text"
                list="photo-kinds"
                defaultValue={initial.photo}
                placeholder="e.g. heroAlt — or paste a URL"
                className="field-input"
              />
              <datalist id="photo-kinds">
                {PHOTO_KINDS.map((p) => (
                  <option key={p} value={p} />
                ))}
              </datalist>
              <p className="mt-2 text-xs text-ink-mute">
                Leave empty to use the default photo for this card.
              </p>
            </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 service" : "Save changes"}
        </button>
        <Link href="/admin/services" className="btn btn-outline">
          Cancel
        </Link>
      </div>
    </form>
  );
}