"use client";

import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import { FloatingInput } from "@/components/ui/floating-field";

const schema = z.object({
  email: z.email("Please enter a valid email address"),
  // Honeypot — accept any value; a non-empty value is treated as a bot.
  company: z.string().optional(),
});
type Values = z.infer<typeof schema>;

/**
 * Newsletter opt-in (spec §60). Floating label + real API submission + inline
 * success (no full Thank-You page). Wire a real list provider in the API route.
 */
export function NewsletterForm() {
  const [done, setDone] = useState(false);
  const [serverError, setServerError] = useState<string | null>(null);

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<Values>({ resolver: zodResolver(schema), mode: "onBlur" });

  async function onSubmit(values: Values) {
    if (values.company) {
      setDone(true);
      return;
    }
    setServerError(null);
    try {
      const res = await fetch("/api/newsletter", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email: values.email }),
      });
      const data = (await res.json().catch(() => ({}))) as { ok?: boolean; error?: string };
      if (!res.ok || !data.ok) {
        setServerError(data.error || "Something went wrong. Please try again.");
        return;
      }
      setDone(true);
    } catch {
      setServerError("Couldn't reach the server. Please try again.");
    }
  }

  if (done) {
    return (
      <div
        role="status"
        className="flex items-center gap-2.5 rounded-xl border border-border bg-muted p-3.5 text-sm text-foreground motion-safe:animate-in motion-safe:fade-in"
      >
        <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground">
          <Check className="size-3.5" />
        </span>
        <div>
          <p className="font-semibold">You&apos;re on the list.</p>
          <p className="text-xs text-muted-foreground">We&apos;ll send occasional updates — no spam.</p>
        </div>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="relative flex flex-col gap-2.5" noValidate>
      {/* Honeypot */}
      <div aria-hidden className="pointer-events-none absolute left-[-9999px] h-0 w-0 overflow-hidden">
        <label htmlFor="nl-company">Company</label>
        <input id="nl-company" type="text" tabIndex={-1} autoComplete="off" {...register("company")} />
      </div>

      <FloatingInput
        id="nl-email"
        label="Work email"
        type="email"
        autoComplete="email"
        error={errors.email?.message}
        {...register("email")}
      />
      {serverError && (
        <p role="alert" className="text-xs font-medium text-destructive">
          {serverError}
        </p>
      )}
      <Button type="submit" variant="brand" size="pill" loading={isSubmitting} className="w-full">
        {isSubmitting ? "Subscribing…" : "Subscribe"}
      </Button>
    </form>
  );
}