"use client";

import { FormEvent, useState } from "react";
import { submitContactForm } from "@/lib/api";
import { Button } from "@/components/ui/Button";

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

const TOPICS = ["General question", "Order support", "Press / partnerships", "Careers", "Other"];

/** POSTs to abos-api's generic form-submission system, form key "contact". */
export default function ContactForm() {
  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);
    try {
      await submitContactForm({
        name: String(data.get("name") || ""),
        email: String(data.get("email") || ""),
        phone: String(data.get("phone") || "") || undefined,
        topic: String(data.get("topic") || "") || undefined,
        message: String(data.get("message") || "")
      });
      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-lg border border-divider bg-surface p-8 text-center">
        <p className="text-ink font-medium">Thanks — your message is in.</p>
        <p className="text-sm text-neutral-600 mt-1">A member of the allBETs team will reach out shortly.</p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-5">
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
        <Field label="Name" name="name" required />
        <Field label="Email" name="email" type="email" required />
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
        <Field label="Phone" name="phone" type="tel" />
        <label className="flex flex-col gap-1.5">
          <span className="text-xs font-semibold uppercase tracking-wide text-neutral-600">Topic</span>
          <select
            name="topic"
            className="bg-surface border-0 rounded-lg px-4 py-3 text-sm text-ink focus:outline-none focus:ring-2 focus:ring-accent-500"
          >
            {TOPICS.map((t) => (
              <option key={t} value={t}>{t}</option>
            ))}
          </select>
        </label>
      </div>
      <label className="flex flex-col gap-1.5">
        <span className="text-xs font-semibold uppercase tracking-wide text-neutral-600">Message</span>
        <textarea
          name="message"
          required
          rows={5}
          className="bg-surface border-0 rounded-lg px-4 py-3 text-sm text-ink focus:outline-none focus:ring-2 focus:ring-accent-500"
        />
      </label>

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

      <Button type="submit" variant="gold" disabled={status === "submitting"} className="self-start">
        {status === "submitting" ? "Sending…" : "Submit"}
      </Button>
    </form>
  );
}

function Field({
  label,
  name,
  type = "text",
  required
}: {
  label: string;
  name: string;
  type?: string;
  required?: boolean;
}) {
  return (
    <label className="flex flex-col gap-1.5">
      <span className="text-xs font-semibold uppercase tracking-wide text-neutral-600">{label}</span>
      <input
        name={name}
        type={type}
        required={required}
        className="bg-surface border-0 rounded-lg px-4 py-3 text-sm text-ink focus:outline-none focus:ring-2 focus:ring-accent-500"
      />
    </label>
  );
}