'use client'

import { useState } from 'react'

export default function NewsletterForm() {
  const [email, setEmail] = useState('')
  const [message, setMessage] = useState('')
  const [loading, setLoading] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setMessage('')

    try {
      const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api'}/subscribe`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      })
      const data = await res.json()
      setMessage(data.message || 'Terima kasih!')
      setEmail('')
    } catch {
      setMessage('Gagal berlangganan. Coba lagi nanti.')
    } finally {
      setLoading(false)
    }
  }

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-2 max-w-md mx-auto">
      <div className="flex gap-2">
        <input
          type="email"
          placeholder="Masukkan email Anda"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="flex-1 px-5 py-3.5 rounded-xl text-sm outline-none bg-white/95 focus:ring-2 focus:ring-[#f59e0b]"
          required
        />
        <button
          type="submit"
          disabled={loading}
          className="bg-[#c8102e] text-white px-7 py-3.5 rounded-xl text-sm font-medium hover:bg-[#a00d24] transition-all shadow-lg shadow-[#c8102e]/25 hover:shadow-xl hover:shadow-[#c8102e]/30 shrink-0 disabled:opacity-50"
        >
          {loading ? 'Mengirim...' : 'Berlangganan'}
        </button>
      </div>
      {message && (
        <p className={`text-sm text-center mt-1 ${message.includes('Berhasil') || message.includes('Terima kasih') ? 'text-green-400' : 'text-red-400'}`}>
          {message}
        </p>
      )}
    </form>
  )
}