"use client";
import { usePathname } from "next/navigation";
import { useState, useEffect, useRef } from "react";
import Image from "next/legacy/image";
import { contactApiService, ContactFormData } from "@/lib/api/contactService";

const ContactSection = () => {
  const pathname = usePathname();
  const isServiceSingle = pathname === "/service-single" || pathname === "/about-us";
  
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    phone: '',
    company: '',
    jobTitle: '',
    industry: '',
    companySize: '',
    budget: '',
    timeline: '',
    projectType: '',
    message: '',
    newsletter: false,
    privacy: false
  });

  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitStatus, setSubmitStatus] = useState<{
    type: 'success' | 'error' | null;
    message: string;
  }>({ type: null, message: '' });
  
  // Refs for scrolling to status messages
  const statusRef = useRef<HTMLDivElement>(null);
  const formRef = useRef<HTMLFormElement>(null);
  
  // Scroll to status message when it appears
  useEffect(() => {
    if (submitStatus.type && statusRef.current) {
      setTimeout(() => {
        statusRef.current?.scrollIntoView({ 
          behavior: 'smooth', 
          block: 'center' 
        });
      }, 100);
    }
  }, [submitStatus]);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value, type } = e.target;
    if (type === 'checkbox') {
      const checked = (e.target as HTMLInputElement).checked;
      setFormData(prev => ({ ...prev, [name]: checked }));
    } else {
      setFormData(prev => ({ ...prev, [name]: value }));
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setSubmitStatus({ type: null, message: '' });

    try {
      // Transform form data to match API requirements
      const apiData: ContactFormData = {
        first_name: formData.firstName,
        last_name: formData.lastName,
        email: formData.email,
        phone: formData.phone || undefined,
        company: formData.company,
        job_title: formData.jobTitle,
        industry: formData.industry || undefined,
        company_size: formData.companySize || undefined,
        project_type: formData.projectType || undefined,
        timeline: formData.timeline || undefined,
        budget: formData.budget || undefined,
        message: formData.message,
        newsletter_subscription: formData.newsletter,
        privacy_consent: formData.privacy
      };

      // Submit to Django API
      const response = await contactApiService.submitContactForm(apiData);
      
      setSubmitStatus({ 
        type: 'success', 
        message: response.message || 'Thank you! We\'ll contact you within 24 hours.' 
      });
      
      // Reset form on success
      setFormData({
        firstName: '',
        lastName: '',
        email: '',
        phone: '',
        company: '',
        jobTitle: '',
        industry: '',
        companySize: '',
        budget: '',
        timeline: '',
        projectType: '',
        message: '',
        newsletter: false,
        privacy: false
      });
      
    } catch (error) {
      setSubmitStatus({ 
        type: 'error', 
        message: error instanceof Error ? error.message : 'Failed to submit form. Please try again.' 
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <section
      className={
        "tp-contact pb-60 fade-wrapper luxury-contact" +
        (isServiceSingle ? " pt-60" : " fix-top")
      }
    >
      <div className="container">
        {/* Contact Information Cards */}
        <div className="row mb-30">
          <div className="col-12 col-md-4">
            <div className="contact-info-card">
              <div className="contact-info-icon">
                <i className="fa-solid fa-phone"></i>
              </div>
              <h4>Phone Support</h4>
              <p>Main Contact & Emergency</p>
              <a href="tel:+359896138030">+359 896 13 80 30</a>
              <a href="tel:+359897338147">Emergency: +359 897 338 147</a>
              <span className="contact-hours">Available 24/7</span>
            </div>
          </div>
          <div className="col-12 col-md-4">
            <div className="contact-info-card">
              <div className="contact-info-icon">
                <i className="fa-solid fa-envelope"></i>
              </div>
              <h4>Email Support</h4>
              <p>Software Solutions</p>
              <a href="mailto:info@gnxsoft.com">info@gnxsoft.com</a>
              <a href="mailto:contact@gnxsoft.com">contact@gnxsoft.com</a>
              <span className="contact-hours">24/7 Response Time</span>
            </div>
          </div>
          <div className="col-12 col-md-4">
            <div className="contact-info-card">
              <div className="contact-info-icon">
                <i className="fa-solid fa-map-marker-alt"></i>
              </div>
              <h4>Office Locations</h4>
              <p>Our Location</p>
              <address>
                GNX Soft Ltd.<br />
                Tsar Simeon I, 56<br />
                Burgas, Burgas 8000, Bulgaria
              </address>
              <span className="contact-hours">Schedule a Visit</span>
            </div>
          </div>
        </div>

        <div className="row vertical-column-gap-md justify-content-between mt-30">
          <div className="col-12 col-lg-7">
            <div className="tp-contact__content">
              <div className="form-header-compact mb-20">
                <h2 className="luxury-title">Request Enterprise Consultation</h2>
                <p className="luxury-subtitle">Fill out the form below to get started</p>
              </div>
              <div className="contact-form">
                <form ref={formRef} onSubmit={handleSubmit} className="enterprise-form luxury-form">
                  <div className="form-section compact-section">
                    <div className="row">
                      <div className="col-12 col-md-6">
                        <div className="input-single compact-input">
                          <label htmlFor="firstName">First Name *</label>
                          <input
                            type="text"
                            name="firstName"
                            id="firstName"
                            value={formData.firstName}
                            onChange={handleInputChange}
                            placeholder="John"
                            required
                          />
                        </div>
                      </div>
                      <div className="col-12 col-md-6">
                        <div className="input-single compact-input">
                          <label htmlFor="lastName">Last Name *</label>
                          <input
                            type="text"
                            name="lastName"
                            id="lastName"
                            value={formData.lastName}
                            onChange={handleInputChange}
                            placeholder="Smith"
                            required
                          />
                        </div>
                      </div>
                    </div>
                    <div className="row">
                      <div className="col-12 col-md-6">
                        <div className="input-single compact-input">
                          <label htmlFor="email">Business Email *</label>
                          <input
                            type="email"
                            name="email"
                            id="email"
                            value={formData.email}
                            onChange={handleInputChange}
                            placeholder="john.smith@company.com"
                            required
                          />
                        </div>
                      </div>
                      <div className="col-12 col-md-6">
                        <div className="input-single compact-input">
                          <label htmlFor="phone">Phone Number</label>
                          <input
                            type="tel"
                            name="phone"
                            id="phone"
                            value={formData.phone}
                            onChange={handleInputChange}
                            placeholder="+1 (555) 123-4567"
                          />
                        </div>
                      </div>
                    </div>
                    <div className="row">
                      <div className="col-12 col-md-6">
                        <div className="input-single compact-input">
                          <label htmlFor="company">Company Name *</label>
                          <input
                            type="text"
                            name="company"
                            id="company"
                            value={formData.company}
                            onChange={handleInputChange}
                            placeholder="Acme Corporation"
                            required
                          />
                        </div>
                      </div>
                      <div className="col-12 col-md-6">
                        <div className="input-single compact-input">
                          <label htmlFor="jobTitle">Job Title *</label>
                          <input
                            type="text"
                            name="jobTitle"
                            id="jobTitle"
                            value={formData.jobTitle}
                            onChange={handleInputChange}
                            placeholder="CTO, IT Director, etc."
                            required
                          />
                        </div>
                      </div>
                    </div>
                    <div className="row">
                      <div className="col-12 col-md-6">
                        <div className="input-single compact-input">
                          <label htmlFor="industry">Industry</label>
                          <select
                            name="industry"
                            id="industry"
                            value={formData.industry}
                            onChange={handleInputChange}
                          >
                            <option value="">Select Industry</option>
                            <option value="technology">Technology</option>
                            <option value="finance">Finance</option>
                            <option value="healthcare">Healthcare</option>
                            <option value="manufacturing">Manufacturing</option>
                            <option value="retail">Retail</option>
                            <option value="education">Education</option>
                            <option value="government">Government</option>
                            <option value="other">Other</option>
                          </select>
                        </div>
                      </div>
                      <div className="col-12 col-md-6">
                        <div className="input-single compact-input">
                          <label htmlFor="companySize">Company Size</label>
                          <select
                            name="companySize"
                            id="companySize"
                            value={formData.companySize}
                            onChange={handleInputChange}
                          >
                            <option value="">Select Company Size</option>
                            <option value="1-10">1-10 employees</option>
                            <option value="11-50">11-50 employees</option>
                            <option value="51-200">51-200 employees</option>
                            <option value="201-1000">201-1000 employees</option>
                            <option value="1000+">1000+ employees</option>
                          </select>
                        </div>
                      </div>
                    </div>
                    <div className="row">
                      <div className="col-12 col-md-4">
                        <div className="input-single compact-input">
                          <label htmlFor="projectType">Project Type</label>
                          <select
                            name="projectType"
                            id="projectType"
                            value={formData.projectType}
                            onChange={handleInputChange}
                          >
                            <option value="">Select Type</option>
                            <option value="software-development">Software Development</option>
                            <option value="cloud-migration">Cloud Migration</option>
                            <option value="digital-transformation">Digital Transformation</option>
                            <option value="data-analytics">Data Analytics</option>
                            <option value="security-compliance">Security & Compliance</option>
                            <option value="integration">System Integration</option>
                            <option value="consulting">Consulting Services</option>
                          </select>
                        </div>
                      </div>
                      <div className="col-12 col-md-4">
                        <div className="input-single compact-input">
                          <label htmlFor="timeline">Timeline</label>
                          <select
                            name="timeline"
                            id="timeline"
                            value={formData.timeline}
                            onChange={handleInputChange}
                          >
                            <option value="">Select Timeline</option>
                            <option value="immediate">Immediate (0-3 months)</option>
                            <option value="short">Short-term (3-6 months)</option>
                            <option value="medium">Medium-term (6-12 months)</option>
                            <option value="long">Long-term (12+ months)</option>
                            <option value="planning">Still planning</option>
                          </select>
                        </div>
                      </div>
                      <div className="col-12 col-md-4">
                        <div className="input-single compact-input">
                          <label htmlFor="budget">Budget Range</label>
                          <select
                            name="budget"
                            id="budget"
                            value={formData.budget}
                            onChange={handleInputChange}
                          >
                            <option value="">Select Budget</option>
                            <option value="under-50k">Under €50,000</option>
                            <option value="50k-100k">€50,000 - €100,000</option>
                            <option value="100k-250k">€100,000 - €250,000</option>
                            <option value="250k-500k">€250,000 - €500,000</option>
                            <option value="500k-1m">€500,000 - €1,000,000</option>
                            <option value="over-1m">Over €1,000,000</option>
                            <option value="discuss">Prefer to discuss</option>
                          </select>
                        </div>
                      </div>
                    </div>
                    <div className="input-single compact-input">
                      <label htmlFor="message">Project Description *</label>
                      <textarea
                        name="message"
                        id="message"
                        value={formData.message}
                        onChange={handleInputChange}
                        placeholder="Please describe your project requirements, current challenges, and expected outcomes..."
                        rows={4}
                        required
                      />
                    </div>
                    <div className="checkbox-group compact-checkbox">
                      <div className="checkbox-single">
                        <input
                          type="checkbox"
                          name="newsletter"
                          id="newsletter"
                          checked={formData.newsletter}
                          onChange={handleInputChange}
                        />
                        <label htmlFor="newsletter">
                          Subscribe to newsletter
                        </label>
                      </div>
                      <div className="checkbox-single">
                        <input
                          type="checkbox"
                          name="privacy"
                          id="privacy"
                          checked={formData.privacy}
                          onChange={handleInputChange}
                          required
                        />
                        <label htmlFor="privacy">
                          I agree to the <a href="/policy?type=privacy">Privacy Policy</a> *
                        </label>
                      </div>
                    </div>
                  </div>

                  {/* Status Message */}
                  {submitStatus.type && (
                    <div 
                      ref={statusRef}
                      className={`form-status mt-20 ${submitStatus.type === 'success' ? 'success' : 'error'}`}
                    >
                      <div className="status-content">
                        <i className={`fa-solid ${submitStatus.type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}`}></i>
                        <span>{submitStatus.message}</span>
                        {submitStatus.type === 'error' && (
                          <div className="error-details mt-10">
                            <small>
                              If the problem persists, please contact us directly at{' '}
                              <a href="mailto:info@gnxsoft.com" className="text-primary">info@gnxsoft.com</a>
                            </small>
                          </div>
                        )}
                      </div>
                    </div>
                  )}

                  <div className="form-actions mt-30">
                    <button 
                      type="submit" 
                      className="btn btn-primary enterprise-btn"
                      disabled={isSubmitting}
                    >
                      {isSubmitting ? (
                        <>
                          <span>Sending...</span>
                          <i className="fa-solid fa-spinner fa-spin"></i>
                        </>
                      ) : (
                        <>
                          <span>Request Software Consultation</span>
                          <i className="fa-solid fa-arrow-right"></i>
                        </>
                      )}
                    </button>
                    <p className="form-disclaimer">
                      <i className="fa-solid fa-lock"></i>
                      Your information is secure and will only be used to provide you with relevant software solutions.
                    </p>
                  </div>
                </form>
              </div>
            </div>
          </div>
          
          <div className="col-12 col-lg-5">
            <div className="tp-contact__sidebar luxury-sidebar">
              <div className="contact-sidebar-card compact-sidebar-card">
                <div className="sidebar-header">
                  <h3>Enterprise Solutions</h3>
                  <div className="enterprise-badge">
                    <i className="fa-solid fa-award"></i>
                    <span>Premium</span>
                  </div>
                </div>
                <div className="sidebar-features compact-features">
                  <div className="feature-item compact-feature">
                    <div className="feature-icon">
                      <i className="fa-solid fa-shield-halved"></i>
                    </div>
                    <div className="feature-content">
                      <h4>Incident Management</h4>
                      <p>Real-time monitoring and automated response capabilities.</p>
                    </div>
                  </div>
                  <div className="feature-item compact-feature">
                    <div className="feature-icon">
                      <i className="fa-solid fa-users"></i>
                    </div>
                    <div className="feature-content">
                      <h4>Custom Development</h4>
                      <p>Tailored solutions with dedicated development teams.</p>
                    </div>
                  </div>
                  <div className="feature-item compact-feature">
                    <div className="feature-icon">
                      <i className="fa-solid fa-chart-line"></i>
                    </div>
                    <div className="feature-content">
                      <h4>System Integrations</h4>
                      <p>Seamless API integration for unified workflows.</p>
                    </div>
                  </div>
                </div>
              </div>
              
              <div className="contact-sidebar-card compact-sidebar-card">
                <h3>Quick Process</h3>
                <div className="next-steps compact-steps">
                  <div className="step-item compact-step">
                    <div className="step-number">1</div>
                    <div className="step-content">
                      <h4>Consultation</h4>
                      <p>24-hour response time</p>
                    </div>
                  </div>
                  <div className="step-item compact-step">
                    <div className="step-number">2</div>
                    <div className="step-content">
                      <h4>Custom Demo</h4>
                      <p>Personalized demonstration</p>
                    </div>
                  </div>
                  <div className="step-item compact-step">
                    <div className="step-number">3</div>
                    <div className="step-content">
                      <h4>Proposal</h4>
                      <p>Detailed pricing & timeline</p>
                    </div>
                  </div>
                </div>
              </div>
              
              <div className="contact-sidebar-card compact-sidebar-card">
                <h3>Location</h3>
                <div className="company-map compact-map">
                  <div className="map-container">
                    <iframe
                      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2933.123456789!2d27.4758968970689!3d42.496781103070504!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40a6b8c9d1234567%3A0x1234567890abcdef!2sBurgas%2C%20Bulgaria!5e0!3m2!1sen!2sbg!4v1234567890123!5m2!1sen!2sbg"
                      width="100%"
                      height="150"
                      style={{ border: 0, borderRadius: '8px' }}
                      allowFullScreen
                      loading="lazy"
                      referrerPolicy="no-referrer-when-downgrade"
                      title="Company Location"
                    />
                  </div>
                  <div className="map-info compact-map-info">
                    <div className="location-details">
                      <div className="location-icon">
                        <i className="fa-solid fa-map-marker-alt"></i>
                      </div>
                      <div className="location-text">
                        <h4>GNX Soft Ltd.</h4>
                        <p>Tsar Simeon I, 56, Burgas 8000</p>
                      </div>
                    </div>
                    <a href="https://maps.google.com/?q=Tsar+Simeon+I+56+Burgas+Bulgaria" target="_blank" rel="noopener noreferrer" className="map-link">
                      <i className="fa-solid fa-directions"></i>
                      Directions
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ContactSection;