import React, { useState } from 'react';
import axios from 'axios';
import { mdiSend, mdiPhone, mdiEmail, mdiMapMarker, mdiCheckCircleOutline } from '@mdi/js';
import BaseIcon from '../BaseIcon';
import ScrollReveal from './ScrollReveal';

const ContactForm = () => {
  const [formData, setFormData] = useState({
    full_name: '',
    email: '',
    phone: '',
    message: '',
    city: '',
    preferred_contact_method: 'phone'
  });

  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);
  const [error, setError] = useState('');

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

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

    try {
      await axios.post('/leads', {
        data: {
          ...formData,
          source: 'website_form',
          requested_at: new Date().toISOString(),
          consent_to_contact: true
        }
      });
      setIsSuccess(true);
      setFormData({
        full_name: '',
        email: '',
        phone: '',
        message: '',
        city: '',
        preferred_contact_method: 'phone'
      });
    } catch (err) {
      console.error(err);
      setError('Mesajınız iletilemedi. Lütfen daha sonra tekrar deneyiniz.');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <section id="iletisim" className="py-24 bg-gray-50 overflow-hidden relative">
      {/* Background Decor */}
      <div className="absolute top-0 right-0 w-1/3 h-full bg-amber-600/5 -skew-x-12 translate-x-1/2 -z-10"></div>
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
          <div>
            <ScrollReveal animation="fade-in-left">
              <h2 className="text-xs font-black text-amber-600 uppercase tracking-[0.2em] mb-4 font-sans">Hemen İletişime Geçin</h2>
              <h3 className="text-4xl md:text-5xl font-black text-gray-900 mb-8 leading-tight font-sans">Projeniz İçin Ücretsiz <br />Keşif ve Fiyat Alın</h3>
              
              <p className="text-xl text-gray-500 mb-12 max-w-lg leading-relaxed font-medium font-body">
                Uzman ekibimizle en kısa sürede size geri dönüş sağlayacağız. İster arayın, ister formu doldurun.
              </p>
            </ScrollReveal>

            <div className="space-y-8">
              {[
                { icon: mdiPhone, label: 'Telefon', value: '+90 500 000 00 00', delay: 100 },
                { icon: mdiEmail, label: 'E-Posta', value: 'info@bekakaplama.com', delay: 200 },
                { icon: mdiMapMarker, label: 'Adres', value: 'İstanbul, Türkiye', delay: 300 }
              ].map((item, i) => (
                <ScrollReveal key={i} animation="fade-in-left" delay={item.delay}>
                  <div className="flex items-start space-x-6 group cursor-default">
                    <div className="p-5 bg-white shadow-lg rounded-2xl group-hover:bg-amber-600 group-hover:scale-110 transition-all duration-300 border border-gray-100">
                      <BaseIcon path={item.icon} size={28} className="text-amber-600 group-hover:text-white transition-colors" />
                    </div>
                    <div>
                      <h4 className="text-xs font-black text-amber-600 uppercase tracking-widest mb-1 font-sans">{item.label}</h4>
                      <p className="text-2xl font-black text-gray-900 group-hover:text-amber-600 transition-colors font-sans">{item.value}</p>
                    </div>
                  </div>
                </ScrollReveal>
              ))}
            </div>
          </div>

          <ScrollReveal animation="fade-in-right" delay={200}>
            <div className="bg-white p-10 rounded-[3rem] shadow-2xl border border-gray-100 relative overflow-hidden group">
              {/* Decorative circle */}
              <div className="absolute -top-24 -right-24 w-48 h-48 bg-amber-600/5 rounded-full blur-3xl transition-all duration-1000 group-hover:bg-amber-600/10"></div>
              
              {isSuccess ? (
                <div className="text-center py-20 animate-scale-in">
                  <div className="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-8 animate-bounce">
                    <BaseIcon path={mdiCheckCircleOutline} size={48} className="text-green-600" />
                  </div>
                  <h4 className="text-3xl font-black text-gray-900 mb-4 tracking-tight font-sans">Mesajınız Alındı!</h4>
                  <p className="text-gray-600 mb-10 font-medium font-body">En kısa sürede uzman ekibimiz tarafından aranacaksınız.</p>
                  <button 
                    onClick={() => setIsSuccess(false)}
                    className="px-10 py-4 bg-amber-600 text-white rounded-2xl font-black hover:bg-amber-700 transition-all shadow-xl shadow-amber-900/20 active:scale-95 font-sans"
                  >
                    Yeni Mesaj Gönder
                  </button>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-6 relative z-10 font-sans">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <label className="text-xs font-black text-gray-400 uppercase tracking-widest px-1">Ad Soyad</label>
                      <input
                        type="text"
                        name="full_name"
                        required
                        value={formData.full_name}
                        onChange={handleChange}
                        placeholder="Örn: Ahmet Yılmaz"
                        className="w-full px-6 py-4 bg-gray-50 border-2 border-transparent rounded-2xl focus:outline-none focus:bg-white focus:border-amber-600 transition-all font-bold text-gray-800 placeholder:font-medium placeholder:text-gray-300"
                      />
                    </div>
                    <div className="space-y-2">
                      <label className="text-xs font-black text-gray-400 uppercase tracking-widest px-1">Telefon</label>
                      <input
                        type="tel"
                        name="phone"
                        required
                        value={formData.phone}
                        onChange={handleChange}
                        placeholder="05XX XXX XX XX"
                        className="w-full px-6 py-4 bg-gray-50 border-2 border-transparent rounded-2xl focus:outline-none focus:bg-white focus:border-amber-600 transition-all font-bold text-gray-800 placeholder:font-medium placeholder:text-gray-300"
                      />
                    </div>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <label className="text-xs font-black text-gray-400 uppercase tracking-widest px-1">E-Posta (İsteğe Bağlı)</label>
                      <input
                        type="email"
                        name="email"
                        value={formData.email}
                        onChange={handleChange}
                        placeholder="ahmet@example.com"
                        className="w-full px-6 py-4 bg-gray-50 border-2 border-transparent rounded-2xl focus:outline-none focus:bg-white focus:border-amber-600 transition-all font-bold text-gray-800 placeholder:font-medium placeholder:text-gray-300"
                      />
                    </div>
                    <div className="space-y-2">
                      <label className="text-xs font-black text-gray-400 uppercase tracking-widest px-1">Şehir</label>
                      <input
                        type="text"
                        name="city"
                        value={formData.city}
                        onChange={handleChange}
                        placeholder="Örn: İstanbul"
                        className="w-full px-6 py-4 bg-gray-50 border-2 border-transparent rounded-2xl focus:outline-none focus:bg-white focus:border-amber-600 transition-all font-bold text-gray-800 placeholder:font-medium placeholder:text-gray-300"
                      />
                    </div>
                  </div>

                  <div className="space-y-2">
                    <label className="text-xs font-black text-gray-400 uppercase tracking-widest px-1">Ulaşım Tercihi</label>
                    <select
                      name="preferred_contact_method"
                      value={formData.preferred_contact_method}
                      onChange={handleChange}
                      className="w-full px-6 py-4 bg-gray-50 border-2 border-transparent rounded-2xl focus:outline-none focus:bg-white focus:border-amber-600 transition-all font-black text-gray-700 appearance-none cursor-pointer"
                    >
                      <option value="phone">Telefon Araması</option>
                      <option value="whatsapp">WhatsApp Mesajı</option>
                      <option value="email">E-Posta</option>
                    </select>
                  </div>

                  <div className="space-y-2">
                    <label className="text-xs font-black text-gray-400 uppercase tracking-widest px-1">Mesajınız</label>
                    <textarea
                      name="message"
                      required
                      rows={4}
                      value={formData.message}
                      onChange={handleChange}
                      placeholder="Projeniz hakkında kısa bir bilgi veriniz..."
                      className="w-full px-6 py-4 bg-gray-50 border-2 border-transparent rounded-2xl focus:outline-none focus:bg-white focus:border-amber-600 transition-all font-bold text-gray-800 placeholder:font-medium placeholder:text-gray-300 resize-none"
                    ></textarea>
                  </div>

                  {error && <p className="text-red-500 font-bold text-center animate-pulse">{error}</p>}

                  <button
                    type="submit"
                    disabled={isSubmitting}
                    className="w-full py-5 bg-amber-600 text-white rounded-[1.5rem] font-black text-lg hover:bg-amber-700 transition-all flex items-center justify-center space-x-3 shadow-xl shadow-amber-900/20 disabled:opacity-70 group active:scale-95 font-sans"
                  >
                    <span>{isSubmitting ? 'Gönderiliyor...' : 'Teklif Almayı Tamamla'}</span>
                    {!isSubmitting && <BaseIcon path={mdiSend} size={24} className="group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform" />}
                  </button>
                </form>
              )}
            </div>
          </ScrollReveal>
        </div>
      </div>
    </section>
  );
};

export default ContactForm;
