'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'

export function WaitlistSection() {
  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()
    setStatus('loading')

    try {
      const response = await fetch('/api/waitlist', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      })

      const data = await response.json()

      if (response.ok) {
        setStatus('success')
        setMessage('Welcome to the underground. We\'ll reach out when nodes are ready.')
        setEmail('')
      } else {
        setStatus('error')
        setMessage(data.error || 'Something went wrong. Try again.')
      }
    } catch (error) {
      setStatus('error')
      setMessage('Connection failed. The network is watching.')
    }
  }

  return (
    <section className="py-24 px-4 border-t border-border">
      <div className="max-w-2xl mx-auto">
        <div className="text-center mb-12">
          <div className="text-xs font-mono text-primary tracking-widest uppercase mb-4">
            Join the Underground
          </div>
          <h2 className="text-3xl md:text-5xl font-bold mb-6 font-mono text-balance">
            Secure Your Node
          </h2>
          <p className="text-muted-foreground leading-relaxed text-pretty">
            Exclusive access to the first run of sovereign edge nodes. Add your signal to the
            network. We&apos;ll reach out when devices are ready for pre-order.
          </p>
        </div>

        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="bg-card border border-border p-8">
            <div className="space-y-4">
              <div>
                <label htmlFor="email" className="text-sm font-mono text-muted-foreground mb-2 block">
                  Your encrypted signal
                </label>
                <Input
                  id="email"
                  type="email"
                  placeholder="your@email.xyz"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                  disabled={status === 'loading' || status === 'success'}
                  className="bg-background border-border font-mono"
                />
              </div>

              <Button
                type="submit"
                disabled={status === 'loading' || status === 'success'}
                className="w-full bg-primary text-primary-foreground hover:bg-primary/90 font-mono tracking-wider"
              >
                {status === 'loading' ? 'CONNECTING...' : status === 'success' ? 'CONNECTED' : 'JOIN THE NETWORK'}
              </Button>
            </div>
          </div>

          {message && (
            <div
              className={`text-center text-sm font-mono ${
                status === 'success' ? 'text-accent' : 'text-destructive'
              }`}
            >
              {message}
            </div>
          )}
        </form>

        <div className="mt-12 text-center text-xs text-muted-foreground font-mono">
          <p className="text-pretty">Your data is sovereign. Zero-knowledge. Encrypted. Always yours.</p>
        </div>
      </div>
    </section>
  )
}