'use client';

import { useState, FormEvent } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

type FeedbackState =
  | { type: 'idle' }
  | { type: 'loading' }
  | { type: 'success'; message: string }
  | { type: 'error'; message: string; canRetry?: boolean; retryAfter?: number }
  | { type: 'info'; message: string };

export default function EmailCapture() {
  const [email, setEmail] = useState('');
  const [feedback, setFeedback] = useState<FeedbackState>({ type: 'idle' });

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    
    if (!email) {
      setFeedback({ type: 'error', message: "That email doesn't look right." });
      return;
    }

    setFeedback({ type: 'loading' });

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

      const data = await response.json();

      if (!response.ok) {
        if (response.status === 429) {
          setFeedback({
            type: 'error',
            message: data.error,
            retryAfter: data.retryAfter
          });
        } else if (response.status === 409) {
          setFeedback({ type: 'info', message: data.error });
          setTimeout(() => setFeedback({ type: 'idle' }), 4000);
        } else {
          setFeedback({
            type: 'error',
            message: data.error || 'Something broke. Try again?',
            canRetry: true
          });
        }
        return;
      }

      setFeedback({ type: 'success', message: data.message });
      setEmail('');
      setTimeout(() => setFeedback({ type: 'idle' }), 5000);
    } catch (error) {
      setFeedback({
        type: 'error',
        message: 'Something broke. Try again?',
        canRetry: true
      });
      console.error('Signup error:', error);
    }
  };

  const getMessageColor = () => {
    if (feedback.type === 'success') return 'text-performance-green';
    if (feedback.type === 'info') return 'text-gray-400';
    if (feedback.type === 'error' && feedback.retryAfter) return 'text-warning-amber';
    if (feedback.type === 'error') return 'text-red-400';
    return '';
  };

  const getGlowColor = () => {
    if (feedback.type === 'success') return 'shadow-[0_0_80px_rgba(111,227,122,0.15)]';
    if (feedback.type === 'info') return 'shadow-[0_0_80px_rgba(34,38,42,0.15)]';
    if (feedback.type === 'error' && feedback.retryAfter) return 'shadow-[0_0_80px_rgba(255,197,86,0.15)]';
    if (feedback.type === 'error') return 'shadow-[0_0_80px_rgba(248,113,113,0.15)]';
    return 'shadow-[0_0_80px_rgba(25,140,255,0.15)]';
  };

  return (
    <section id="early-access" className="relative py-24 bg-gradient-to-b from-deep-graphite to-iron-gray">
      <div className="max-w-2xl mx-auto px-6">
        <AnimatePresence mode="wait">
          {feedback.type === 'success' ? (
            <motion.div
              key="success"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.25 }}
              className={`relative rounded-xl bg-gradient-to-br from-iron-gray via-deep-graphite to-iron-gray p-12 text-center border border-charcoal-outline ${getGlowColor()}`}
            >
              <motion.div
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ delay: 0.15, type: 'spring', stiffness: 200, damping: 15 }}
                className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-performance-green/20 mb-6"
              >
                <svg className="w-8 h-8 text-performance-green" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
              </motion.div>
              <h2 className="text-3xl font-semibold text-white mb-4">{feedback.message}</h2>
              <p className="text-base text-gray-400 font-light">
                I'll send updates as I build. Zero spam, zero BS.
              </p>
            </motion.div>
          ) : (
            <motion.div
              key="form"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              className={`relative rounded-xl bg-gradient-to-br from-iron-gray via-deep-graphite to-iron-gray p-8 md:p-16 border border-charcoal-outline transition-shadow duration-300 ${getGlowColor()}`}
            >
              <div className="text-center mb-10">
                <h2 className="text-3xl md:text-4xl font-semibold text-white mb-3">
                  Let me know if this resonates
                </h2>
                <div className="w-32 h-1 bg-gradient-to-r from-primary-blue to-neon-aqua mx-auto mb-6 rounded-full" />
                <p className="text-lg text-gray-400 font-light max-w-lg mx-auto mb-4">
                  I'm building GridPilot because I got tired of the chaos. If this resonates with you, drop your email.
                </p>
                <p className="text-base text-gray-400/80 font-light max-w-lg mx-auto">
                  It means someone out there cares about the same problems. That keeps me going.
                </p>
              </div>

              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="flex flex-col sm:flex-row gap-4">
                  <div className="flex-1 relative">
                    <input
                      type="email"
                      value={email}
                      onChange={(e) => {
                        setEmail(e.target.value);
                        if (feedback.type !== 'loading') {
                          setFeedback({ type: 'idle' });
                        }
                      }}
                      placeholder="your@email.com"
                      disabled={feedback.type === 'loading'}
                      className={`w-full px-6 py-4 rounded-lg bg-iron-gray text-white placeholder-gray-500 border transition-all duration-150 ${
                        feedback.type === 'error' && !feedback.retryAfter
                          ? 'border-red-500 focus:ring-2 focus:ring-red-500'
                          : feedback.type === 'error' && feedback.retryAfter
                          ? 'border-warning-amber focus:ring-2 focus:ring-warning-amber/50'
                          : 'border-charcoal-outline focus:border-neon-aqua focus:ring-2 focus:ring-neon-aqua/50'
                      } hover:scale-[1.01] disabled:opacity-50 disabled:cursor-not-allowed`}
                      aria-label="Email address"
                    />
                    <AnimatePresence>
                      {(feedback.type === 'error' || feedback.type === 'info') && (
                        <motion.p
                          initial={{ opacity: 0, y: -10 }}
                          animate={{ opacity: 1, y: 0 }}
                          exit={{ opacity: 0 }}
                          transition={{ duration: 0.15 }}
                          className={`mt-2 text-sm ${getMessageColor()}`}
                        >
                          {feedback.message}
                          {feedback.type === 'error' && feedback.retryAfter && (
                            <span className="block mt-1 text-xs text-gray-500">
                              Retry in {feedback.retryAfter}s
                            </span>
                          )}
                        </motion.p>
                      )}
                    </AnimatePresence>
                  </div>
                  <motion.button
                    type="submit"
                    disabled={feedback.type === 'loading'}
                    whileHover={{ scale: 1.05 }}
                    whileTap={{ scale: 0.95 }}
                    transition={{ duration: 0.15 }}
                    className="px-8 py-4 rounded-full bg-gradient-to-r from-primary-blue to-neon-aqua text-white font-semibold transition-all duration-150 hover:shadow-glow-strong active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 whitespace-nowrap"
                  >
                    {feedback.type === 'loading' ? (
                      <span className="flex items-center gap-2">
                        <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
                          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                        </svg>
                        Joining...
                      </span>
                    ) : (
                      'Count me in'
                    )}
                  </motion.button>
                </div>
              </form>

              <motion.div
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2 }}
                className="mt-8 flex flex-col sm:flex-row gap-4 justify-center text-sm text-gray-400 font-light"
              >
                <div className="flex items-center gap-2">
                  <svg className="w-4 h-4 text-performance-green" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                  </svg>
                  <span>I'll send updates as I build</span>
                </div>
                <div className="flex items-center gap-2">
                  <svg className="w-4 h-4 text-performance-green" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                  </svg>
                  <span>You can tell me what matters most</span>
                </div>
                <div className="flex items-center gap-2">
                  <svg className="w-4 h-4 text-performance-green" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                  </svg>
                  <span>Zero spam, zero BS</span>
                </div>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </section>
  );
}