import React, { useState } from 'react';
import { Mail, Phone, MapPin, Send, AlertCircle, CheckCircle } from 'lucide-react';

interface FormData {
  name: string;
  email: string;
  subject: string;
  message: string;
}

interface FormErrors {
  name?: string;
  email?: string;
  subject?: string;
  message?: string;
}

export const Contact: React.FC = () => {
  const [formData, setFormData] = useState<FormData>({
    name: '',
    email: '',
    subject: '',
    message: ''
  });

  const [errors, setErrors] = useState<FormErrors>({});
  const [touched, setTouched] = useState<Record<string, boolean>>({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  // Validation Logic
  const validateField = (name: string, value: string): string | undefined => {
    switch (name) {
      case 'name':
        if (!value.trim()) return 'Name is required';
        if (value.trim().length < 2) return 'Name must be at least 2 characters';
        return undefined;
      case 'email':
        if (!value.trim()) return 'Email is required';
        // Basic email regex
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return 'Please enter a valid email address';
        return undefined;
      case 'subject':
        if (!value.trim()) return 'Subject is required';
        if (value.trim().length < 5) return 'Subject must be at least 5 characters';
        return undefined;
      case 'message':
        if (!value.trim()) return 'Message is required';
        if (value.trim().length < 10) return 'Message must be at least 10 characters';
        return undefined;
      default:
        return undefined;
    }
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    
    setFormData(prev => ({ ...prev, [name]: value }));

    // Real-time validation if field was already touched
    if (touched[name]) {
      const error = validateField(name, value);
      setErrors(prev => ({ ...prev, [name]: error }));
    }
  };

  const handleBlur = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    
    setTouched(prev => ({ ...prev, [name]: true }));
    const error = validateField(name, value);
    setErrors(prev => ({ ...prev, [name]: error }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);

    // Validate all fields
    const newErrors: FormErrors = {};
    let hasError = false;

    (Object.keys(formData) as Array<keyof FormData>).forEach(key => {
      const error = validateField(key, formData[key]);
      if (error) {
        newErrors[key] = error;
        hasError = true;
      }
    });

    setErrors(newErrors);
    setTouched({
      name: true,
      email: true,
      subject: true,
      message: true
    });

    if (hasError) {
      setIsSubmitting(false);
      return;
    }

    // Simulate API call
    
    setTimeout(() => {
      alert('Thank you for your message. We will get back to you shortly.');
      setFormData({ name: '', email: '', subject: '', message: '' });
      setTouched({});
      setErrors({});
      setIsSubmitting(false);
    }, 1000);
  };

  const getInputClasses = (fieldName: keyof FormData) => {
    const baseClasses = "w-full px-4 py-3 rounded-lg border focus:outline-none transition-all";
    
    if (touched[fieldName] && errors[fieldName]) {
      return `${baseClasses} border-red-500 focus:ring-2 focus:ring-red-200 bg-red-50 text-red-900 placeholder-red-300`;
    }
    
    if (touched[fieldName] && !errors[fieldName]) {
      return `${baseClasses} border-green-500 focus:ring-2 focus:ring-green-200 bg-green-50`;
    }

    return `${baseClasses} border-gray-300 focus:ring-2 focus:ring-accent-500 focus:border-transparent`;
  };

  return (
    <div className="pt-24 pb-16 min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div className="text-center mb-16">
          <h1 className="text-4xl md:text-5xl font-serif font-bold text-primary-900 mb-6">Get In Touch</h1>
          <p className="text-gray-600 max-w-2xl mx-auto">
            Ready to take your business to the next level? Contact us for a free initial consultation.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Contact Info */}
          <div className="space-y-8">
             <div className="bg-white p-8 rounded-2xl shadow-sm border border-gray-100">
               <h3 className="text-2xl font-bold text-primary-900 mb-6">Contact Information</h3>
               
               <div className="space-y-6">
                 <div className="flex items-start gap-4">
                   <div className="w-12 h-12 bg-accent-50 rounded-lg flex items-center justify-center flex-shrink-0 text-accent-600">
                     <MapPin size={24} />
                   </div>
                   <div>
                     <h4 className="font-semibold text-primary-900">Our Office</h4>
                     <p className="text-gray-600">12 Birchdale Gardens, Romford,<br />England, RM6 4DT</p>
                   </div>
                 </div>

                 <div className="flex items-start gap-4">
                   <div className="w-12 h-12 bg-accent-50 rounded-lg flex items-center justify-center flex-shrink-0 text-accent-600">
                     <Mail size={24} />
                   </div>
                   <div>
                     <h4 className="font-semibold text-primary-900">Email Us</h4>
                     <p className="text-gray-600">zeshan@alfalahconsultants.co.uk</p>
                   </div>
                 </div>

                 <div className="flex items-start gap-4">
                   <div className="w-12 h-12 bg-accent-50 rounded-lg flex items-center justify-center flex-shrink-0 text-accent-600">
                     <Phone size={24} />
                   </div>
                   <div>
                     <h4 className="font-semibold text-primary-900">Call Us</h4>
                     <p className="text-gray-600">+44 02079936028</p>
                   </div>
                 </div>
               </div>
             </div>

             {/* Map Integration */}
             <div className="h-64 bg-gray-200 rounded-2xl overflow-hidden relative shadow-sm border border-gray-100">
               <iframe 
                 width="100%" 
                 height="100%" 
                 frameBorder="0" 
                 title="Alfalah Consultants Location"
                 scrolling="no" 
                 src="https://maps.google.com/maps?q=12%20Birchdale%20Gardens%2C%20Romford%2C%20England%2C%20RM6%204DT&t=&z=15&ie=UTF8&iwloc=&output=embed"
                 style={{ border: 0 }}
                 loading="lazy"
               ></iframe>
             </div>
          </div>

          {/* Form */}
          <div className="bg-white p-8 md:p-10 rounded-2xl shadow-lg border border-gray-100">
            <h3 className="text-2xl font-bold text-primary-900 mb-8">Send Us a Message</h3>
            <form onSubmit={handleSubmit} className="space-y-6" noValidate>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <label htmlFor="name" className="block text-sm font-medium text-gray-700">
                    Full Name <span className="text-red-500">*</span>
                  </label>
                  <div className="relative">
                    <input
                      type="text"
                      id="name"
                      name="name"
                      value={formData.name}
                      onChange={handleChange}
                      onBlur={handleBlur}
                      className={getInputClasses('name')}
                      placeholder="John Doe"
                    />
                    {touched.name && !errors.name && (
                      <CheckCircle className="absolute right-3 top-3.5 text-green-500" size={18} />
                    )}
                  </div>
                  {touched.name && errors.name && (
                    <p className="text-red-500 text-xs flex items-center gap-1 mt-1">
                      <AlertCircle size={12} /> {errors.name}
                    </p>
                  )}
                </div>

                <div className="space-y-2">
                  <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                    Email Address <span className="text-red-500">*</span>
                  </label>
                  <div className="relative">
                    <input
                      type="email"
                      id="email"
                      name="email"
                      value={formData.email}
                      onChange={handleChange}
                      onBlur={handleBlur}
                      className={getInputClasses('email')}
                      placeholder="john@company.com"
                    />
                    {touched.email && !errors.email && (
                      <CheckCircle className="absolute right-3 top-3.5 text-green-500" size={18} />
                    )}
                  </div>
                  {touched.email && errors.email && (
                    <p className="text-red-500 text-xs flex items-center gap-1 mt-1">
                      <AlertCircle size={12} /> {errors.email}
                    </p>
                  )}
                </div>
              </div>
              
              <div className="space-y-2">
                <label htmlFor="subject" className="block text-sm font-medium text-gray-700">
                  Subject <span className="text-red-500">*</span>
                </label>
                <div className="relative">
                  <input
                    type="text"
                    id="subject"
                    name="subject"
                    value={formData.subject}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    className={getInputClasses('subject')}
                    placeholder="Audit Inquiry"
                  />
                  {touched.subject && !errors.subject && (
                    <CheckCircle className="absolute right-3 top-3.5 text-green-500" size={18} />
                  )}
                </div>
                {touched.subject && errors.subject && (
                  <p className="text-red-500 text-xs flex items-center gap-1 mt-1">
                    <AlertCircle size={12} /> {errors.subject}
                  </p>
                )}
              </div>

              <div className="space-y-2">
                <label htmlFor="message" className="block text-sm font-medium text-gray-700">
                  Message <span className="text-red-500">*</span>
                </label>
                <div className="relative">
                  <textarea
                    id="message"
                    name="message"
                    rows={4}
                    value={formData.message}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    className={`${getInputClasses('message')} resize-none`}
                    placeholder="How can we help you?"
                  ></textarea>
                </div>
                {touched.message && errors.message && (
                  <p className="text-red-500 text-xs flex items-center gap-1 mt-1">
                    <AlertCircle size={12} /> {errors.message}
                  </p>
                )}
              </div>

              <button
                type="submit"
                disabled={isSubmitting}
                className={`w-full font-bold py-4 rounded-lg flex items-center justify-center gap-2 transition-all ${
                  isSubmitting 
                    ? 'bg-gray-400 cursor-not-allowed text-gray-100' 
                    : 'bg-primary-900 text-white hover:bg-primary-800'
                }`}
              >
                {isSubmitting ? 'Sending...' : 'Send Message'} 
                {!isSubmitting && <Send size={18} />}
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

(window as any).Contact = Contact;