'use client'

import { useState } from 'react'

export default function Signup() {
  const [email, setEmail] = useState('')
  const [whatsapp, setWhatsapp] = useState('')
  const [loading, setLoading] = useState(false)
  const [showPopup, setShowPopup] = useState(false)
  const [error, setError] = useState('')

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')
    
    // Validate that at least one field is filled
    if (!email.trim() && !whatsapp.trim()) {
      setError('Please enter at least an email or phone number')
      return
    }

    setLoading(true)

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

      const data = await response.json()

      if (!response.ok) {
        throw new Error(data.error || 'Failed to subscribe')
      }

      // Show success popup
      setShowPopup(true)
      
      // Clear form
      setEmail('')
      setWhatsapp('')
      
      // Hide popup after 5 seconds
      setTimeout(() => {
        setShowPopup(false)
      }, 5000)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred')
    } finally {
      setLoading(false)
    }
  }

  return (
    <>
      <div className="signup">
        <h2>Drop Notifications</h2>
        <p>Receive updates about new drops via email or WhatsApp.</p>
        <form onSubmit={handleSubmit}>
          <input
            type="email"
            placeholder="E-Mail"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            disabled={loading}
          />
          <input
            type="text"
            placeholder="WhatsApp Number"
            value={whatsapp}
            onChange={(e) => setWhatsapp(e.target.value)}
            disabled={loading}
          />
          <br />
          {error && <div style={{ color: '#ff4444', marginTop: '10px', fontSize: '14px' }}>{error}</div>}
          <button type="submit" disabled={loading}>
            {loading ? 'Subscribing...' : 'Get Notified'}
          </button>
        </form>
      </div>

      {showPopup && (
        <div
          style={{
            position: 'fixed',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            background: '#1c1c1c',
            border: '1px solid #2a2a2a',
            borderRadius: '16px',
            padding: '30px 40px',
            zIndex: 1000,
            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.5)',
            maxWidth: '400px',
            textAlign: 'center',
          }}
        >
          <p style={{ margin: 0, fontSize: '16px', color: '#eaeaea' }}>
            You will receive a notification as soon as a new drop drops.
          </p>
          <button
            onClick={() => setShowPopup(false)}
            style={{
              marginTop: '20px',
              padding: '10px 20px',
              background: '#3ddc84',
              color: '#000',
              border: 'none',
              borderRadius: '8px',
              cursor: 'pointer',
              fontSize: '14px',
            }}
          >
            OK
          </button>
        </div>
      )}

      {showPopup && (
        <div
          style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            background: 'rgba(0, 0, 0, 0.7)',
            zIndex: 999,
          }}
          onClick={() => setShowPopup(false)}
        />
      )}
    </>
  )
}