"use client";

import { useTranslations } from "next-intl";
import { useActionState } from "react";
import { type ContactState, submitContactForm } from "@/app/[locale]/contact-us/actions";

const INITIAL: ContactState = { status: "idle" };

type FieldProps = {
  name: string;
  label: string;
  type?: string;
  placeholder?: string;
  textarea?: boolean;
  error?: string | null;
};

function Field({ name, label, type = "text", placeholder, textarea, error }: FieldProps) {
  const base =
    "w-full rounded-none border-0 border-b border-brushed-steel bg-transparent px-0 py-2 text-foreground placeholder:text-brushed-steel focus:border-foreground focus:outline-none focus:ring-0";
  return (
    <div className="flex flex-col">
      <label
        htmlFor={name}
        className="mb-2 text-xs font-semibold uppercase tracking-[0.15em] text-on-surface-variant"
      >
        {label}
      </label>
      {textarea ? (
        <textarea
          id={name}
          name={name}
          rows={4}
          placeholder={placeholder}
          aria-label={label}
          className={base}
        />
      ) : (
        <input
          id={name}
          name={name}
          type={type}
          placeholder={placeholder}
          aria-label={label}
          className={base}
        />
      )}
      {error ? <p className="mt-2 text-xs text-destructive">{error}</p> : null}
    </div>
  );
}

export default function ContactForm() {
  const t = useTranslations("ContactUsPage.form");
  const [state, action, pending] = useActionState(submitContactForm, INITIAL);

  const fieldError = (f: keyof NonNullable<ContactState["fieldErrors"]>) => {
    const code = state.fieldErrors?.[f];
    return code ? t(`errors.${code}`) : null;
  };

  return (
    <form
      action={action}
      className="border border-outline-soft bg-surface-container-lowest p-8 sm:p-10"
    >
      <h2 className="font-semibold text-2xl tracking-tight text-foreground sm:text-3xl">
        {t("heading")}
      </h2>

      <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2">
        <Field name="firstName" label={t("firstName")} error={fieldError("firstName")} />
        <Field name="lastName" label={t("lastName")} error={fieldError("lastName")} />
        <Field name="email" label={t("email")} type="email" error={fieldError("email")} />
        <Field name="phone" label={t("phone")} type="tel" error={fieldError("phone")} />
      </div>
      <div className="mt-6">
        <Field name="message" label={t("message")} textarea error={fieldError("message")} />
      </div>

      {/* Honeypot: out of the tab order and out of the accessibility tree.
          `display:none` also keeps it out of autofill. */}
      <div aria-hidden="true" className="hidden">
        <input
          name="website"
          type="text"
          aria-label="Website"
          tabIndex={-1}
          autoComplete="off"
          defaultValue=""
        />
      </div>

      <button
        type="submit"
        disabled={pending}
        className="mt-8 inline-flex items-center rounded-none bg-primary px-6 py-3 text-sm font-semibold uppercase tracking-[0.1em] text-primary-foreground transition-colors hover:bg-tertiary disabled:opacity-60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tertiary"
      >
        {pending ? t("sending") : t("submit")}
      </button>

      {state.status === "success" ? (
        <p className="mt-6 text-sm text-tertiary">{t("success")}</p>
      ) : null}
      {state.status === "error" ? (
        <p className="mt-6 text-sm text-destructive">{t("error")}</p>
      ) : null}
    </form>
  );
}