"use client";

import { useState, type FormEvent } from "react";
import { Loader2, Send } from "lucide-react";

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

export function ContactForm() {
  const [status, setStatus] = useState<Status>("idle");
  const [errorMessage, setErrorMessage] = useState("");

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setStatus("submitting");
    setErrorMessage("");

    const form = event.currentTarget;
    const formData = new FormData(form);
    const payload = Object.fromEntries(formData.entries());

    try {
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });

      const result = await response.json();

      if (!response.ok) {
        setStatus("error");
        setErrorMessage(result.error ?? "Something went wrong. Please try again.");
        return;
      }

      setStatus("success");
      form.reset();
    } catch {
      setStatus("error");
      setErrorMessage("Network error. Please check your connection and try again.");
    }
  }

  if (status === "success") {
    return (
      <div className="card p-8 text-center">
        <h3 className="text-lg font-semibold text-slate-950 dark:text-white">Message sent</h3>
        <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
          Thanks for reaching out — I&apos;ll get back to you as soon as I can.
        </p>
        <button
          type="button"
          onClick={() => setStatus("idle")}
          className="btn-outline mt-6"
        >
          Send another message
        </button>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-5" noValidate>
      <div className="grid gap-5 sm:grid-cols-2">
        <div>
          <label htmlFor="name" className="mb-1.5 block text-sm text-slate-600 dark:text-slate-300">
            Your name
          </label>
          <input
            id="name"
            name="name"
            type="text"
            required
            minLength={2}
            className="w-full rounded-sm border border-slate-300 bg-surface-light px-4 py-2.5 text-sm outline-none transition-colors focus:border-indigo dark:border-slate-700 dark:bg-surface-dark dark:focus:border-indigo-light"
          />
        </div>
        <div>
          <label htmlFor="email" className="mb-1.5 block text-sm text-slate-600 dark:text-slate-300">
            Your email
          </label>
          <input
            id="email"
            name="email"
            type="email"
            required
            className="w-full rounded-sm border border-slate-300 bg-surface-light px-4 py-2.5 text-sm outline-none transition-colors focus:border-indigo dark:border-slate-700 dark:bg-surface-dark dark:focus:border-indigo-light"
          />
        </div>
        <div>
          <label htmlFor="phone" className="mb-1.5 block text-sm text-slate-600 dark:text-slate-300">
            Phone number
          </label>
          <input
            id="phone"
            name="phone"
            type="text"
            required
            minLength={6}
            className="w-full rounded-sm border border-slate-300 bg-surface-light px-4 py-2.5 text-sm outline-none transition-colors focus:border-indigo dark:border-slate-700 dark:bg-surface-dark dark:focus:border-indigo-light"
          />
        </div>
        <div>
          <label htmlFor="subject" className="mb-1.5 block text-sm text-slate-600 dark:text-slate-300">
            Subject
          </label>
          <input
            id="subject"
            name="subject"
            type="text"
            required
            className="w-full rounded-sm border border-slate-300 bg-surface-light px-4 py-2.5 text-sm outline-none transition-colors focus:border-indigo dark:border-slate-700 dark:bg-surface-dark dark:focus:border-indigo-light"
          />
        </div>
      </div>

      <div>
        <label htmlFor="message" className="mb-1.5 block text-sm text-slate-600 dark:text-slate-300">
          Message
        </label>
        <textarea
          id="message"
          name="message"
          rows={5}
          required
          minLength={10}
          className="w-full resize-none rounded-sm border border-slate-300 bg-surface-light px-4 py-2.5 text-sm outline-none transition-colors focus:border-indigo dark:border-slate-700 dark:bg-surface-dark dark:focus:border-indigo-light"
        />
      </div>

      {/* Honeypot field — hidden from real visitors, catches basic bots */}
      <div className="hidden" aria-hidden="true">
        <label htmlFor="website">Website</label>
        <input id="website" name="website" type="text" tabIndex={-1} autoComplete="off" />
      </div>

      {status === "error" && (
        <p role="alert" className="text-sm text-red-600 dark:text-red-400">
          {errorMessage}
        </p>
      )}

      <button type="submit" disabled={status === "submitting"} className="btn-primary w-full sm:w-auto">
        {status === "submitting" ? (
          <>
            <Loader2 className="h-4 w-4 animate-spin" />
            Sending
          </>
        ) : (
          <>
            <Send className="h-4 w-4" />
            Send message
          </>
        )}
      </button>
    </form>
  );
}