"use client"

import { useState } from "react"

const NEWSLETTER_API = "https://newsletter.jeffemmett.com/api/subscribe"
const LIST_UUID = "3856d3c3-fbae-452d-acb1-523ab7932ceb" // Psilo Cybernetics list

export function NewsletterSignup() {
  const [email, setEmail] = useState("")
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
  const [message, setMessage] = useState("")

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    if (!email) return

    setStatus("loading")

    try {
      const response = await fetch(`${NEWSLETTER_API}/subscribe`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          email: email,
          list_uuid: LIST_UUID,
        }),
      })

      if (response.ok) {
        setStatus("success")
        setMessage("Welcome to a more adaptive future. The network grows.")
        setEmail("")
      } else {
        throw new Error("Subscription failed")
      }
    } catch {
      setStatus("error")
      setMessage("Something went wrong. Please try again.")
    }
  }

  return (
    <section className="py-16 bg-black/50 border-t border-cyan-500/20">
      <div className="container mx-auto px-4">
        <div className="max-w-xl mx-auto text-center space-y-6">
          <div className="space-y-2">
            <h2 className="text-2xl font-bold text-cyan-400 font-mono">
              JOIN THE NETWORK
            </h2>
            <p className="text-cyan-300/70">
              Subscribe for updates on institutional neuroplasticity,
              distributed intelligence, and collective consciousness.
            </p>
          </div>

          {status === "success" ? (
            <div className="p-4 rounded-lg bg-cyan-500/10 border border-cyan-500/30 text-cyan-400">
              {message}
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-3">
              <input
                type="email"
                placeholder="your@email.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                className="flex-1 px-4 py-2 bg-black/50 border border-cyan-500/30 text-cyan-100 placeholder:text-cyan-500/50 focus:outline-none focus:border-cyan-400 font-mono"
              />
              <button
                type="submit"
                disabled={status === "loading"}
                className="px-6 py-2 border border-cyan-400 text-cyan-400 font-mono hover:bg-cyan-400/10 disabled:opacity-50 transition-all"
              >
                {status === "loading" ? "CONNECTING..." : "SUBSCRIBE"}
              </button>
            </form>
          )}

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

          <p className="text-xs text-cyan-500/50 font-mono">
            NO SPAM. UNSUBSCRIBE ANYTIME.
          </p>
        </div>
      </div>
    </section>
  )
}