"use client";

import { useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  name: z.string().min(2, "Please share your name"),
  email: z.string().email("A valid email helps us reply"),
  company: z.string().optional(),
  reason: z.enum([
    "Speaking engagement",
    "Board & advisory",
    "Media & interview",
    "Partnership",
    "Mentorship",
    "Other",
  ]),
  message: z.string().min(10, "A sentence or two goes a long way"),
  consent: z.literal(true, {
    errorMap: () => ({ message: "POPIA consent is required so we may respond" }),
  }),
  website: z.string().max(0).optional(), // honeypot
});

type FormData = z.infer<typeof schema>;

const inputClass =
  "w-full border border-ivory/15 bg-transparent px-4 py-3.5 text-[0.95rem] text-ivory placeholder:text-warmgrey/60 focus:border-gold focus:outline-none transition-colors";

export default function ContactForm() {
  const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">("idle");
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: { reason: "Speaking engagement" },
  });

  const onSubmit = async (data: FormData) => {
    setStatus("sending");
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      });
      if (!res.ok) throw new Error(String(res.status));
      setStatus("sent");
      reset();
    } catch {
      setStatus("error");
    }
  };

  if (status === "sent") {
    return (
      <div className="border border-gold/40 bg-charcoal p-10 text-center">
        <div className="font-display text-3xl font-black text-gold">Received.</div>
        <p className="mx-auto mt-4 max-w-sm text-ivory/70">
          Thank you — your message is in. Expect a reply from Damian&apos;s office
          within two business days.
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-5">
      <div className="grid gap-5 sm:grid-cols-2">
        <div>
          <label htmlFor="cf-name" className="kicker mb-2 block">Name</label>
          <input id="cf-name" {...register("name")} className={inputClass} placeholder="Your name" autoComplete="name" />
          {errors.name && <p className="mt-2 text-[0.75rem] text-amber">{errors.name.message}</p>}
        </div>
        <div>
          <label htmlFor="cf-email" className="kicker mb-2 block">Email</label>
          <input id="cf-email" type="email" {...register("email")} className={inputClass} placeholder="you@company.co.za" autoComplete="email" />
          {errors.email && <p className="mt-2 text-[0.75rem] text-amber">{errors.email.message}</p>}
        </div>
      </div>

      <div className="grid gap-5 sm:grid-cols-2">
        <div>
          <label htmlFor="cf-company" className="kicker mb-2 block">Company</label>
          <input id="cf-company" {...register("company")} className={inputClass} placeholder="Optional" autoComplete="organization" />
        </div>
        <div>
          <label htmlFor="cf-reason" className="kicker mb-2 block">Reason for reaching out</label>
          <select id="cf-reason" {...register("reason")} className={`${inputClass} bg-obsidian`}>
            {["Speaking engagement", "Board & advisory", "Media & interview", "Partnership", "Mentorship", "Other"].map((r) => (
              <option key={r} value={r}>{r}</option>
            ))}
          </select>
        </div>
      </div>

      <div>
        <label htmlFor="cf-message" className="kicker mb-2 block">Message</label>
        <textarea id="cf-message" rows={5} {...register("message")} className={inputClass} placeholder="What are we building together?" />
        {errors.message && <p className="mt-2 text-[0.75rem] text-amber">{errors.message.message}</p>}
      </div>

      {/* Honeypot — invisible to humans */}
      <input type="text" tabIndex={-1} autoComplete="off" {...register("website")} className="hidden" aria-hidden />

      <label className="flex items-start gap-3 text-[0.8rem] leading-relaxed text-warmgrey">
        <input type="checkbox" {...register("consent")} className="mt-1 h-4 w-4 accent-[#c9a961]" />
        <span>
          I consent to my details being used to respond to this enquiry, per the{" "}
          <a href="/privacy" className="text-gold underline underline-offset-2">POPIA &amp; Privacy Notice</a>.
          Nothing else, no lists.
        </span>
      </label>
      {errors.consent && <p className="text-[0.75rem] text-amber">{errors.consent.message}</p>}

      <button
        type="submit"
        disabled={status === "sending"}
        className="bg-gold px-8 py-4 font-mono text-[0.7rem] uppercase tracking-[0.24em] text-obsidian transition-colors hover:bg-amber disabled:opacity-60"
      >
        {status === "sending" ? "Sending…" : "Send the message →"}
      </button>

      {status === "error" && (
        <p className="text-[0.8rem] text-amber">
          Something misfired. Email directly instead:{" "}
          <a className="underline" href="mailto:damian@innovonet.co.za">damian@innovonet.co.za</a>
        </p>
      )}
    </form>
  );
}