"use client";

import { FormEvent, useState } from "react";
import { submitDynamicForm, type PublicFormFieldDto } from "@/lib/api";

type Status = "idle" | "submitting" | "success" | "error";

export default function DynamicForm({
  formKey,
  fields,
  successMessage,
  submitLabel
}: {
  formKey: string;
  fields: PublicFormFieldDto[];
  successMessage?: string | null;
  /** CMS-driven (dim_web_forms.name) — never hardcode a submit label here,
   *  since this component is shared by every form on the site, not just
   *  "connect". Defaults to "Submit" only if the form has no name. */
  submitLabel?: string | null;
}) {
  const [status, setStatus] = useState<Status>("idle");
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("submitting");
    setError(null);

    const formEl = e.currentTarget;
    const data = new FormData(formEl);
    const dataFields = fields.filter((f) => f.fieldType !== "heading");

    try {
      const payload: Record<string, unknown> = {};
      for (const field of dataFields) {
        payload[field.fieldKey] =
          field.fieldType === "checkbox" ? data.get(field.fieldKey) === "on" : String(data.get(field.fieldKey) || "");
      }
      await submitDynamicForm(formKey, payload);
      setStatus("success");
      formEl.reset();
    } catch (err) {
      setStatus("error");
      setError(err instanceof Error ? err.message : "Something went wrong. Please try again.");
    }
  }

  if (status === "success") {
    return (
      <div className="rounded-card border border-neutral-400 bg-neutral-100 p-8 text-center">
        <p className="text-ink font-medium">{successMessage || "Thanks. Your submission is in."}</p>
      </div>
    );
  }

  // The first two short (non-select/textarea/checkbox) fields render side by
  // side in a two-column row — matches the source design's "Full Name" /
  // "Email Address" pairing — every field after that stays full width.
  const pairable = (f?: PublicFormFieldDto) => !!f && f.fieldType !== "select" && f.fieldType !== "textarea" && f.fieldType !== "checkbox";
  const pairedCount = fields.length >= 2 && pairable(fields[0]) && pairable(fields[1]) ? 2 : 0;
  const pairedFields = fields.slice(0, pairedCount);
  const restFields = fields.slice(pairedCount);

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-5">
      {pairedFields.length === 2 ? (
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
          {pairedFields.map((field) => <FormField key={field.fieldKey} field={field} />)}
        </div>
      ) : null}
      {restFields.map((field) => (
        <FormField key={field.fieldKey} field={field} />
      ))}

      {error ? <p className="text-sm text-red-600">{error}</p> : null}

      <button
        type="submit"
        disabled={status === "submitting"}
        className="inline-flex items-center justify-center gap-1.5 rounded-full bg-teal px-6 py-3.5 text-sm font-bold text-ink hover:brightness-95 disabled:opacity-60"
      >
        {status === "submitting" ? "Sending…" : (submitLabel || "Submit")} {status !== "submitting" ? <span aria-hidden>↗</span> : null}
      </button>
    </form>
  );
}

const inputClass =
  "mt-2 w-full rounded-sm border border-neutral-400 bg-white px-4 py-3 text-sm text-ink placeholder:text-ink-faint focus:outline-none focus:ring-2 focus:ring-teal";

function FormField({ field }: { field: PublicFormFieldDto }) {
  const labelEl = (
    <label className="text-xs uppercase tracking-wide text-ink-muted">
      {field.label}
      {field.isRequired ? " *" : ""}
    </label>
  );

  if (field.fieldType === "select") {
    return (
      <div>
        {labelEl}
        <select name={field.fieldKey} required={field.isRequired} defaultValue="" className={inputClass}>
          <option value="" disabled>-Select-</option>
          {(field.options || []).map((opt) => (
            <option key={opt} value={opt}>{opt}</option>
          ))}
        </select>
      </div>
    );
  }

  if (field.fieldType === "textarea") {
    return (
      <div>
        {labelEl}
        <textarea name={field.fieldKey} required={field.isRequired} rows={5} className={inputClass} />
      </div>
    );
  }

  if (field.fieldType === "checkbox") {
    return (
      <label className="flex items-start gap-3 text-sm text-ink-soft">
        <input
          type="checkbox"
          name={field.fieldKey}
          required={field.isRequired}
          className="mt-1 h-4 w-4 rounded border-neutral-400 text-teal focus:ring-teal"
        />
        <span>
          {field.label}
          {field.isRequired ? " *" : ""}
        </span>
      </label>
    );
  }

  return (
    <div>
      {labelEl}
      <input name={field.fieldKey} type={field.fieldType || "text"} required={field.isRequired} className={inputClass} />
    </div>
  );
}