"use client";

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

type BlogValues = {
  title?: string;
  category?: string;
  excerpt?: string;
  imageUrl?: string;
  featured?: boolean;
  sortOrder?: number;
  published?: boolean;
};

export default function BlogForm({
  action,
  initial,
  submitLabel,
}: {
  action: (
    prevState: ActionState | undefined,
    formData: FormData,
  ) => Promise<ActionState>;
  initial?: BlogValues;
  submitLabel: string;
}) {
  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="Title" name="title" error={state?.errors?.title?.[0]}>
        <input
          id="title"
          name="title"
          required
          defaultValue={initial?.title ?? ""}
          className={adminInputCls}
        />
      </AdminField>

      <AdminField
        label="Category"
        name="category"
        error={state?.errors?.category?.[0]}
      >
        <input
          id="category"
          name="category"
          required
          defaultValue={initial?.category ?? ""}
          className={adminInputCls}
        />
      </AdminField>

      <AdminField
        label="Excerpt"
        name="excerpt"
        error={state?.errors?.excerpt?.[0]}
      >
        <textarea
          id="excerpt"
          name="excerpt"
          required
          rows={4}
          defaultValue={initial?.excerpt ?? ""}
          className={`${adminInputCls} resize-y`}
        />
      </AdminField>

      {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.title || "Blog 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>

      <input type="hidden" name="imageUrl" defaultValue={initial?.imageUrl ?? ""} />

      <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="featured"
          defaultChecked={initial?.featured ?? false}
          className="accent-[#1f3fb8]"
        />
        Featured story
      </label>

      <label className="flex items-center gap-2 text-sm">
        <input
          type="checkbox"
          name="published"
          defaultChecked={initial?.published ?? true}
          className="accent-[#1f3fb8]"
        />
        Published 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>
  );
}
