"use client";

import { useActionState } from "react";
import type { ActionState } from "@/app/lib/definitions";
import { AdminField, FieldError, adminInputCls } from "@/app/admin/_components/ui";

type ItemValues = {
  label?: string;
  text?: string;
  href?: string;
  altText?: string;
  imageUrl?: string;
  sortOrder?: number;
  published?: boolean;
};

export default function HomepageItemForm({
  action,
  initial,
  submitLabel,
  showImage = true,
  showHref = false,
  showText = false,
}: {
  action: (
    prevState: ActionState | undefined,
    formData: FormData,
  ) => Promise<ActionState>;
  initial?: ItemValues;
  submitLabel: string;
  showImage?: boolean;
  showHref?: boolean;
  showText?: boolean;
}) {
  const [state, formAction, pending] = useActionState(action, undefined);

  return (
    <form
      action={formAction}
      className="rounded-2xl border border-[#d9e2f7] bg-white p-5 sm:p-6 space-y-5 max-w-2xl"
    >
      <AdminField label="Label / name" name="label" error={state?.errors?.label?.[0]}>
        <input
          id="label"
          name="label"
          required
          defaultValue={initial?.label ?? ""}
          className={adminInputCls}
        />
      </AdminField>

      {showText ? (
        <AdminField label="Text" name="text" error={state?.errors?.text?.[0]}>
          <textarea
            id="text"
            name="text"
            rows={3}
            defaultValue={initial?.text ?? ""}
            className={`${adminInputCls} resize-y`}
          />
        </AdminField>
      ) : (
        <input type="hidden" name="text" value="" />
      )}

      {showHref ? (
        <AdminField label="Link" name="href" error={state?.errors?.href?.[0]}>
          <input
            id="href"
            name="href"
            defaultValue={initial?.href ?? ""}
            className={adminInputCls}
          />
        </AdminField>
      ) : (
        <input type="hidden" name="href" value="" />
      )}

      {showImage ? (
        <>
          {initial?.imageUrl ? (
            <div className="rounded-xl border border-[#e9eefc] bg-[#f8faff] p-3">
              <p className="text-xs font-medium text-[#5a688d] mb-2">
                Current image
              </p>
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={initial.imageUrl}
                alt={initial.altText || initial.label || "Item image"}
                className="h-40 w-full rounded-lg object-cover"
              />
            </div>
          ) : null}
          <AdminField label="Upload image" name="image">
            <input
              id="image"
              name="image"
              type="file"
              accept="image/jpeg,image/png,image/webp"
              className={adminInputCls}
            />
          </AdminField>
          <AdminField
            label="Alt text"
            name="altText"
            error={state?.errors?.altText?.[0]}
          >
            <input
              id="altText"
              name="altText"
              defaultValue={initial?.altText ?? ""}
              className={adminInputCls}
            />
          </AdminField>
        </>
      ) : (
        <>
          <input type="hidden" name="altText" value="" />
        </>
      )}

      <AdminField
        label="Sort order"
        name="sortOrder"
        error={state?.errors?.sortOrder?.[0]}
      >
        <input
          id="sortOrder"
          name="sortOrder"
          type="number"
          min={0}
          defaultValue={initial?.sortOrder ?? 0}
          className={adminInputCls}
        />
      </AdminField>

      <label className="flex items-center gap-2 text-sm">
        <input
          type="checkbox"
          name="published"
          defaultChecked={initial?.published ?? true}
          className="accent-[#1f3fb8]"
        />
        Visible on website
      </label>
      <FieldError message={state?.errors?.published?.[0]} />

      {state?.message && (
        <p className="text-sm text-red-600" role="alert">
          {state.message}
        </p>
      )}

      <button
        type="submit"
        disabled={pending}
        className="rounded-full bg-[#1f3fb8] px-6 py-2.5 text-sm font-semibold text-white hover:bg-[#18339a] disabled:opacity-60"
      >
        {pending ? "Saving..." : submitLabel}
      </button>
    </form>
  );
}
