'use client';

import { useState } from 'react';
import { Check } from 'lucide-react';
import GlowEffect from './GlowEffect';
import WaitlistPopup from './WaitlistPopup';
import { submitEmail, submitWaitlistData } from '@/lib/actions/waitlistActions';

const styles = `
  .hero-btn {
    transition: all 0.2s ease;
  }

  .hero-btn.enabled {
    cursor: pointer;
  }

  .hero-btn.disabled {
    cursor: not-allowed;
  }

  .hero-btn.disabled:hover {
    background: rgba(100, 100, 120, 0.4) !important;
  }

  .success-checkmark-ring {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .success-checkmark-inner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
    display: flex;
    align-items: center;
    justify-content: center;
  }
`;

const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

export function WaitlistEmailForm() {
  const [email, setEmail] = useState('');
  const [isInvalid, setIsInvalid] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [showPopup, setShowPopup] = useState(false);

  const isEnabled = email.length > 0 && isValidEmail(email);

  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEmail(e.target.value);
    if (isInvalid) setIsInvalid(false);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!isValidEmail(email)) {
      setIsInvalid(true);
      return;
    }
    setIsInvalid(false);

    submitEmail(email).catch(console.error);
    setShowPopup(true);
  };

  const handlePopupClose = () => {
    setShowPopup(false);
    setIsSubmitted(true);
  };

  const handleWaitlistSubmit = (data: { selected: string[]; other: string }) => {
    submitWaitlistData(email, data).catch(console.error);
  };

  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: styles }} />
      <GlowEffect id="get-access">
        {isSubmitted ? (
          <div
            className="flex items-center justify-center gap-3 px-4 py-3 rounded-[10px]"
            style={{ background: 'rgba(10, 6, 18, 0.95)' }}
          >
            <div className="success-checkmark-ring">
              <div className="success-checkmark-inner">
                <Check className="w-3 h-3 text-white" strokeWidth={3} />
              </div>
            </div>
            <span className="text-white font-medium">Done! You're in the list</span>
          </div>
        ) : (
          <form
            onSubmit={handleSubmit}
            className="flex flex-col sm:flex-row gap-2 rounded-[10px] p-1.5 sm:pl-3"
            style={{ background: 'rgba(10, 6, 18, 0.95)' }}
          >
            <input
              type="email"
              value={email}
              onChange={handleEmailChange}
              placeholder="your@email.com"
              className={`flex-1 px-4 py-3 bg-transparent border-none rounded-md outline-none placeholder:text-white/40 focus:bg-white/[0.03] ${
                isInvalid ? 'text-red-400' : 'text-white'
              }`}
            />
            <button
              type="submit"
              disabled={!isEnabled}
              className={`hero-btn px-6 py-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-md text-white font-semibold transition-all whitespace-nowrap ${
                isEnabled ? 'enabled hover:from-indigo-600 hover:to-purple-600' : 'disabled'
              }`}
            >
              Get Early Access
            </button>
          </form>
        )}
      </GlowEffect>
      <WaitlistPopup isOpen={showPopup} onClose={handlePopupClose} onSubmit={handleWaitlistSubmit} />
    </>
  );
}
