'use client';

import { useState } from 'react';
import { subscribeNewsletter } from '@/lib/shopware-api';

export default function NewsletterSignup() {
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
  const [error, setError] = useState('');

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setStatus('loading');
    setError('');

    try {
      await subscribeNewsletter(email);
      setStatus('success');
      setEmail('');
    } catch (err: any) {
      setError(err.message || 'Something went wrong. Please try again.');
      setStatus('error');
    }
  }

  if (status === 'success') {
    return (
      <div className="text-sm text-green-400">
        ✓ You&apos;re subscribed! Check your email to confirm.
      </div>
    );
  }

  return (
    <div>
      <h3 className="text-white font-semibold text-sm mb-3">Newsletter</h3>
      <p className="text-sm mb-3">Get the latest deals and updates.</p>
      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Your email"
          required
          disabled={status === 'loading'}
          className="flex-1 min-w-0 px-3 py-1.5 text-sm rounded bg-surface-800 text-white placeholder-surface-500 border border-surface-700 focus:outline-none focus:border-primary-500 disabled:opacity-50"
        />
        <button
          type="submit"
          disabled={status === 'loading'}
          className="px-3 py-1.5 text-sm rounded bg-primary-600 text-white hover:bg-primary-700 disabled:opacity-50 whitespace-nowrap transition-colors"
        >
          {status === 'loading' ? '...' : 'Subscribe'}
        </button>
      </form>
      {status === 'error' && (
        <p className="mt-2 text-xs text-red-400">{error}</p>
      )}
    </div>
  );
}