'use client';

import { Button } from '@/components/ui/Button';
import { Heading, Text } from '@/components/ui/Typography';
import { useState } from 'react';

interface NewsletterProps {
  title?: string;
  subtitle?: string;
  buttonText?: string;
  disclaimer?: string;
}

export function Newsletter({ 
  title = 'Join our newsletter', 
  subtitle = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
  buttonText = 'Sign Up',
  disclaimer = 'By clicking Sign Up you\'re confirming that you agree with our Terms and Conditions.'
}: NewsletterProps) {
  // Form state
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);
  
  // Handle input change
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEmail(e.target.value);
    if (error) setError('');
  };
  
  // Validate email
  const validateEmail = () => {
    if (!email.trim()) {
      setError('Molimo unesite vašu email adresu');
      return false;
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setError('Molimo unesite ispravnu email adresu');
      return false;
    }
    return true;
  };
  
  // Handle form submission
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    if (validateEmail()) {
      setIsSubmitting(true);
      
      // Simulate API call
      setTimeout(() => {
        setIsSubmitting(false);
        setIsSubmitted(true);
        setEmail('');
        
        // Reset success message after 5 seconds
        setTimeout(() => {
          setIsSubmitted(false);
        }, 5000);
      }, 1000);
    }
  };
  
  return (
    <div className="w-full">
      <div className="flex flex-col md:flex-row items-start justify-between gap-8">
        <div className="md:w-1/2">
          <Heading level={3} className="mb-4">{title}</Heading>
          <Text size="lg">{subtitle}</Text>
        </div>
        
        <div className="md:w-1/2 w-full">
          {isSubmitted ? (
            <div className="p-4 bg-green-50 border border-green-200 rounded-md animate-fade-in">
              <div className="flex items-center mb-2">
                <div className="mr-3 bg-green-500 rounded-full p-1">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <Text className="text-green-700 font-medium">Uspješno ste se pretplatili!</Text>
              </div>
              <Text className="text-green-600">Hvala na prijavi. Uskoro ćete primiti našu prvu newsletter poruku.</Text>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="w-full">
              <div className="flex flex-col sm:flex-row gap-4">
                <div className="flex-1">
                  <div className="relative">
                    <input 
                      type="email" 
                      placeholder="Enter your email" 
                      value={email}
                      onChange={handleChange}
                      className={`w-full p-3 border ${error ? 'border-red-500' : 'border-gray-300'} rounded`}
                    />
                  </div>
                  {error && (
                    <Text size="sm" className="mt-1 text-red-500">{error}</Text>
                  )}
                </div>
                <Button 
                  type="submit" 
                  variant="primary" 
                  className="bg-black text-white px-6 w-[120px] h-[48px]"
                  disabled={isSubmitting}
                >
                  {isSubmitting ? 'Sending...' : buttonText}
                </Button>
              </div>
              
              {!isSubmitted && (
                <Text className="mt-4 text-gray-500 text-[12px] leading-[14.4px]">
                  {disclaimer}
                </Text>
              )}
            </form>
          )}
        </div>
      </div>
    </div>
  );
}