"use client"

import { useState } from "react"
import { cn } from "@/lib/utils"

interface Props {
  className?: string
  inputClassName?: string
  buttonLabel?: string
}

export function NewsletterForm({ className, inputClassName, buttonLabel = "S'inscrire" }: Props) {
  const [email, setEmail] = useState("")
  const [status, setStatus] = useState<"idle" | "loading" | "ok" | "error">("idle")

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setStatus("loading")
    try {
      const res = await fetch("/api/newsletter", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      })
      setStatus(res.ok ? "ok" : "error")
      if (res.ok) setEmail("")
    } catch {
      setStatus("error")
    }
  }

  if (status === "ok") {
    return (
      <p className={cn("font-mono text-sm text-[var(--accent)]", className)}>
        ✓ Inscrit. À bientôt pour le prochain drop.
      </p>
    )
  }

  return (
    <form onSubmit={handleSubmit} className={cn("flex gap-0", className)}>
      <input
        type="email"
        required
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="ton@email.com"
        className={cn(
          "flex-1 h-12 bg-[var(--bg)] border border-[var(--border)] border-r-0 px-4 text-sm text-[var(--text)] placeholder:text-[var(--text-muted)] focus:outline-none focus:border-[var(--accent)]",
          inputClassName
        )}
      />
      <button
        type="submit"
        disabled={status === "loading"}
        className="h-12 px-6 bg-[var(--accent)] text-white text-xs font-mono uppercase tracking-widest hover:bg-[var(--accent-dark)] transition-colors shrink-0 disabled:opacity-50"
      >
        {status === "loading" ? "..." : buttonLabel}
      </button>
      {status === "error" && (
        <p className="absolute mt-14 text-xs text-red-500 font-mono">Erreur, réessaie.</p>
      )}
    </form>
  )
}