"use client";

import { useState } from "react";

export default function ContactForm() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [message, setMessage] = useState("");
  const [company, setCompany] = useState(""); // honeypot — left blank by real visitors
  const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">("idle");
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setStatus("sending");
    setError(null);

    const res = await fetch("/api/contact", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name, email, phone, message, company }),
    });

    if (!res.ok) {
      const data = await res.json().catch(() => null);
      setError(data?.error ?? "Could not send your message. Please try again.");
      setStatus("error");
      return;
    }

    setStatus("sent");
    setName("");
    setEmail("");
    setPhone("");
    setMessage("");
  }

  if (status === "sent") {
    return (
      <div className="rounded-2xl border border-brand-green/40 bg-brand-green-wash p-6 text-center">
        <p className="font-bold text-white">Message sent — thanks!</p>
        <p className="mt-1 text-sm text-muted">
          We&apos;ll get back to you at {email || "your email"} shortly.
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      {/* Honeypot — hidden from real visitors via CSS, not aria-hidden (a
          screen reader should still be able to skip it via tabIndex/name). */}
      <input
        type="text"
        name="company"
        value={company}
        onChange={(e) => setCompany(e.target.value)}
        tabIndex={-1}
        autoComplete="off"
        className="absolute left-[-9999px] h-0 w-0 opacity-0"
        aria-hidden="true"
      />

      <div>
        <label htmlFor="contact-name" className="mb-1.5 block text-sm font-medium text-white">
          Full name
        </label>
        <input
          id="contact-name"
          required
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Enter first and last name"
          className="w-full rounded-xl border border-line bg-panel-soft px-4 py-3 text-white placeholder:text-muted focus:border-brand-green focus:outline-none"
        />
      </div>

      <div>
        <label htmlFor="contact-email" className="mb-1.5 block text-sm font-medium text-white">
          Email address
        </label>
        <input
          id="contact-email"
          required
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Enter email address"
          className="w-full rounded-xl border border-line bg-panel-soft px-4 py-3 text-white placeholder:text-muted focus:border-brand-green focus:outline-none"
        />
      </div>

      <div>
        <label htmlFor="contact-phone" className="mb-1.5 block text-sm font-medium text-white">
          Phone number
        </label>
        <input
          id="contact-phone"
          required
          type="tel"
          value={phone}
          onChange={(e) => setPhone(e.target.value)}
          placeholder="07xx xxx xxx"
          className="w-full rounded-xl border border-line bg-panel-soft px-4 py-3 text-white placeholder:text-muted focus:border-brand-green focus:outline-none"
        />
      </div>

      <div>
        <label htmlFor="contact-message" className="mb-1.5 block text-sm font-medium text-white">
          Message
        </label>
        <textarea
          id="contact-message"
          required
          rows={4}
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder="Type your message…"
          className="w-full rounded-xl border border-line bg-panel-soft px-4 py-3 text-white placeholder:text-muted focus:border-brand-green focus:outline-none"
        />
      </div>

      {error && <p className="text-sm text-red-400">{error}</p>}

      <button
        type="submit"
        disabled={status === "sending"}
        className="w-full rounded-xl bg-brand-green px-4 py-3 text-sm font-bold text-white transition-colors hover:bg-brand-green-deep disabled:opacity-50"
      >
        {status === "sending" ? "Sending…" : "Submit"}
      </button>
    </form>
  );
}