'use client'

import { useState, FormEvent } from 'react'
import { Puzzle, Gavel, Coins, Building2, Check } from 'lucide-react'

const plugins = [
  {
    icon: Puzzle,
    title: 'Custom policy plugins',
    desc: 'Heuristics as code. Allow or deny on whatever context you care about.',
  },
  {
    icon: Gavel,
    title: 'Model Council',
    desc: 'A panel of models votes on ambiguous requests. Guardrails without the friction.',
  },
  {
    icon: Coins,
    title: 'Token-saving MITM',
    desc: 'Cache, redact, and rewrite LLM traffic. Smaller bills.',
  },
  {
    icon: Building2,
    title: 'Enterprise controls',
    desc: 'SSO, audit trails, team rulesets, managed deployments.',
  },
]

type Mode = 'button' | 'input' | 'submitting' | 'success' | 'error'

export function Waitlist() {
  const [mode, setMode] = useState<Mode>('button')
  const [email, setEmail] = useState('')
  const [error, setError] = useState('')

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault()
    if (mode === 'submitting') return
    setMode('submitting')
    setError('')

    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
        },
        body: JSON.stringify({
          access_key: '85d3252e-5890-450c-aa93-12dc89c7c9b5',
          subject: 'Greywall enterprise / plugin SDK waitlist',
          from_name: 'Greywall waitlist',
          email,
          message: '(waitlist section signup)',
          botcheck: '',
        }),
      })
      const data = await res.json()
      if (data.success) {
        setMode('success')
        setEmail('')
      } else {
        setMode('error')
        setError(data.message || 'Something went wrong. Try again?')
      }
    } catch {
      setMode('error')
      setError('Network error. Try again?')
    }
  }

  return (
    <section id="waitlist" className="py-24 px-4 sm:px-6 border-t border-border/30">
      <div className="mx-auto max-w-5xl">
        <div className="max-w-2xl mb-10">
          <div className="flex items-center gap-2 mb-4">
            <Puzzle className="h-4 w-4 text-primary" />
            <span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
              Plugin SDK &middot; Beta
            </span>
          </div>
          <h2 className="font-serif text-3xl sm:text-4xl font-semibold tracking-tight mb-4">
            Extend Greyproxy.
          </h2>
          <p className="text-muted-foreground font-serif text-lg leading-relaxed">
            We&apos;re building a plugin SDK on top of Greyproxy, and we&apos;ll help you
            build the plugins you need on top of it.
          </p>
        </div>

        {/* Plugin cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-6">
          {plugins.map((p) => (
            <div
              key={p.title}
              className="p-4 sm:p-6 rounded-lg border border-border/40 bg-card/30"
            >
              <div className="flex items-center gap-3 mb-3">
                <p.icon className="h-5 w-5 text-primary" />
                <h3 className="font-sans font-semibold text-sm">{p.title}</h3>
              </div>
              <p className="text-sm text-muted-foreground font-serif leading-relaxed">
                {p.desc}
              </p>
            </div>
          ))}
        </div>

        {/* Freedom guarantee */}
        <div className="mb-12 p-5 rounded-lg border border-primary/15 bg-primary/[0.03]">
          <p className="text-sm text-muted-foreground font-serif leading-relaxed">
            <span className="text-primary font-medium">Core stays free and open source.</span>{' '}
            Sandbox, Greyproxy, and the dashboard stay Apache 2.0 forever. Plugin SDK and
            enterprise ride on top.
          </p>
        </div>

        {/* Waitlist CTA */}
        <div className="flex flex-col items-center gap-2">
          {mode === 'button' && (
            <button
              onClick={() => setMode('input')}
              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md bg-primary text-primary-foreground font-sans text-sm font-medium hover:bg-primary/90 transition-colors cursor-pointer"
            >
              Join closed beta
              <span aria-hidden="true">&rarr;</span>
            </button>
          )}
          {(mode === 'input' || mode === 'submitting') && (
            <form onSubmit={onSubmit} className="flex items-center gap-2">
              <input
                type="email"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="you@company.com"
                autoFocus
                className="rounded-md border border-border/40 bg-background/40 px-4 py-2.5 text-sm font-sans text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:border-primary/40 transition-colors w-56 sm:w-64"
              />
              <button
                type="submit"
                disabled={mode === 'submitting'}
                className="px-4 py-2.5 rounded-md bg-primary text-primary-foreground font-sans text-sm font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {mode === 'submitting' ? '...' : 'Join'}
              </button>
            </form>
          )}
          {mode === 'success' && (
            <div className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md border border-primary/20 bg-primary/[0.05] font-sans text-sm text-primary font-medium">
              <Check className="h-4 w-4" />
              You&apos;re on the list.
            </div>
          )}
          {mode === 'error' && (
            <p className="text-xs text-red-400/80 font-sans text-center">{error}</p>
          )}
          <p className="text-xs text-muted-foreground/60 font-serif">
            No spam. Just one email when it&apos;s ready.
          </p>
        </div>
      </div>
    </section>
  )
}