import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Mail, Rocket, CheckCircle, Loader, ArrowLeft } from 'lucide-react';
import { Button, Input, Card } from '../../ui';
import { publicContactService } from '../../../api/services/publicContact';

interface PrelaunchEmailFormProps {
  onLoginClick?: () => void;
  className?: string;
}

export const PrelaunchEmailForm: React.FC<PrelaunchEmailFormProps> = ({
  onLoginClick,
  className = '',
}) => {
  const { t } = useTranslation(['auth', 'common']);
  const [email, setEmail] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const validateEmail = (email: string): boolean => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);

    if (!email.trim()) {
      setError(t('auth:prelaunch.email_required'));
      return;
    }

    if (!validateEmail(email)) {
      setError(t('auth:prelaunch.email_invalid'));
      return;
    }

    setIsSubmitting(true);

    try {
      await publicContactService.submitPrelaunchEmail({ email });
      setIsSubmitted(true);
    } catch {
      setError(t('auth:prelaunch.submit_error'));
    } finally {
      setIsSubmitting(false);
    }
  };

  if (isSubmitted) {
    return (
      <Card className={`max-w-lg mx-auto p-8 ${className}`}>
        <div className="text-center">
          <div className="mx-auto w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mb-6">
            <CheckCircle className="w-8 h-8 text-green-600 dark:text-green-400" />
          </div>

          <h2 className="text-2xl font-bold text-[var(--text-primary)] mb-3">
            {t('auth:prelaunch.success_title')}
          </h2>

          <p className="text-[var(--text-secondary)] mb-6">
            {t('auth:prelaunch.success_message')}
          </p>

          <div className="space-y-3">
            <Button
              onClick={() => window.location.href = '/'}
              variant="outline"
              className="w-full"
            >
              <ArrowLeft className="w-4 h-4 mr-2" />
              {t('auth:prelaunch.back_to_home')}
            </Button>

            {onLoginClick && (
              <p className="text-sm text-[var(--text-secondary)]">
                {t('auth:register.have_account')}{' '}
                <button
                  onClick={onLoginClick}
                  className="text-[var(--color-primary)] hover:underline font-medium"
                >
                  {t('auth:register.login_link')}
                </button>
              </p>
            )}
          </div>
        </div>
      </Card>
    );
  }

  return (
    <Card className={`max-w-lg mx-auto p-8 ${className}`}>
      <div className="text-center mb-8">
        <div className="mx-auto w-16 h-16 bg-gradient-to-br from-amber-500 to-orange-500 rounded-full flex items-center justify-center mb-6 shadow-lg">
          <Rocket className="w-8 h-8 text-white" />
        </div>

        <h1 className="text-3xl font-bold text-[var(--text-primary)] mb-3">
          {t('auth:prelaunch.title')}
        </h1>

        <p className="text-lg text-[var(--text-secondary)] mb-2">
          {t('auth:prelaunch.subtitle')}
        </p>

        <p className="text-[var(--text-tertiary)]">
          {t('auth:prelaunch.description')}
        </p>
      </div>

      <form onSubmit={handleSubmit} className="space-y-6">
        <Input
          type="email"
          label={t('auth:register.email')}
          placeholder={t('auth:register.email_placeholder')}
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          leftIcon={<Mail className="w-5 h-5" />}
          error={error || undefined}
          isRequired
          size="lg"
        />

        <Button
          type="submit"
          disabled={isSubmitting}
          className="w-full py-4 text-lg font-semibold"
        >
          {isSubmitting ? (
            <>
              <Loader className="w-5 h-5 mr-2 animate-spin" />
              {t('auth:prelaunch.submitting')}
            </>
          ) : (
            <>
              <Mail className="w-5 h-5 mr-2" />
              {t('auth:prelaunch.subscribe_button')}
            </>
          )}
        </Button>
      </form>

      <div className="mt-8 pt-6 border-t border-[var(--border-primary)]">
        <h3 className="text-sm font-semibold text-[var(--text-primary)] mb-3">
          {t('auth:prelaunch.benefits_title')}
        </h3>
        <ul className="space-y-2 text-sm text-[var(--text-secondary)]">
          <li className="flex items-center gap-2">
            <CheckCircle className="w-4 h-4 text-green-500" />
            {t('auth:prelaunch.benefit_1')}
          </li>
          <li className="flex items-center gap-2">
            <CheckCircle className="w-4 h-4 text-green-500" />
            {t('auth:prelaunch.benefit_2')}
          </li>
          <li className="flex items-center gap-2">
            <CheckCircle className="w-4 h-4 text-green-500" />
            {t('auth:prelaunch.benefit_3')}
          </li>
        </ul>
      </div>

      {onLoginClick && (
        <div className="mt-6 text-center">
          <p className="text-sm text-[var(--text-secondary)]">
            {t('auth:register.have_account')}{' '}
            <button
              onClick={onLoginClick}
              className="text-[var(--color-primary)] hover:underline font-medium"
            >
              {t('auth:register.login_link')}
            </button>
          </p>
        </div>
      )}
    </Card>
  );
};

export default PrelaunchEmailForm;
