"use client";

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

export function TestimonialForm({
  initial,
  mode,
}: {
  initial: TestimonialFormValues;
  mode: "new" | "edit";
}) {
  const [state, formAction, pending] = useActionState<ActionState, FormData>(
    saveTestimonialAction,
    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="quote" className="field-label">
              Quote *
            </label>
            <textarea
              id="quote"
              name="quote"
              rows={5}
              required
              defaultValue={initial.quote}
              placeholder="They didn't just redesign our house — they redesigned how our family lives in it."
              className="field-textarea resize-y"
            />
          </div>
          <div className="grid gap-5 sm:grid-cols-2">
            <div>
              <label htmlFor="author" className="field-label">
                Author *
              </label>
              <input
                id="author"
                name="author"
                type="text"
                required
                defaultValue={initial.author}
                placeholder="The Okonkwo Family"
                className="field-input"
              />
            </div>
            <div>
              <label htmlFor="role" className="field-label">
                Role / project
              </label>
              <input
                id="role"
                name="role"
                type="text"
                defaultValue={initial.role}
                placeholder="Alder House"
                className="field-input"
              />
            </div>
          </div>
        </section>

        {/* Side column */}
        <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 (shown in the homepage carousel)
          </label>
          <div>
            <label htmlFor="rating" className="field-label">
              Star rating
            </label>
            <select
              id="rating"
              name="rating"
              defaultValue={String(initial.rating)}
              className="field-input"
            >
              {[5, 4, 3, 2, 1].map((n) => (
                <option key={n} value={n}>
                  {n} star{n === 1 ? "" : "s"}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label htmlFor="id" className="field-label">
              ID (used in the admin URL)
            </label>
            <input
              id="id"
              name="id"
              type="text"
              defaultValue={initial.id}
              placeholder="auto-generated from the author"
              className="field-input"
            />
          </div>
        </section>
      </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 testimonial" : "Save changes"}
        </button>
        <Link href="/admin/testimonials" className="btn btn-outline">
          Cancel
        </Link>
      </div>
    </form>
  );
}