"use client";

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

export function SettingsSaveForm({
  action,
  children,
  successRedirect,
}: {
  action: (
    prevState: ActionState | undefined,
    formData: FormData,
  ) => Promise<ActionState>;
  children: React.ReactNode;
  successRedirect?: 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-3xl"
    >
      {children}
      {state?.message && (
        <p
          className={`text-sm ${state.success ? "text-emerald-700" : "text-red-600"}`}
          role="status"
        >
          {state.message}
          {state.success && successRedirect ? (
            <>
              {" "}
              <Link href={successRedirect} className="underline">
                Back
              </Link>
            </>
          ) : null}
        </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..." : "Save changes"}
      </button>
    </form>
  );
}

export function ImageField({
  label,
  name,
  currentUrl,
  alt,
}: {
  label: string;
  name: string;
  currentUrl?: string;
  alt?: string;
}) {
  return (
    <div className="space-y-2">
      {currentUrl ? (
        <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={currentUrl}
            alt={alt || label}
            className="h-40 w-full rounded-lg object-cover"
          />
        </div>
      ) : null}
      <AdminField label={label} name={name}>
        <input
          id={name}
          name={name}
          type="file"
          accept="image/jpeg,image/png,image/webp"
          className={adminInputCls}
        />
      </AdminField>
    </div>
  );
}

export function TextInput({
  label,
  name,
  defaultValue,
  error,
  type = "text",
  rows,
}: {
  label: string;
  name: string;
  defaultValue?: string;
  error?: string;
  type?: string;
  rows?: number;
}) {
  return (
    <AdminField label={label} name={name} error={error}>
      {rows ? (
        <textarea
          id={name}
          name={name}
          rows={rows}
          defaultValue={defaultValue ?? ""}
          className={`${adminInputCls} resize-y`}
        />
      ) : (
        <input
          id={name}
          name={name}
          type={type}
          defaultValue={defaultValue ?? ""}
          className={adminInputCls}
        />
      )}
    </AdminField>
  );
}
