import React, { useState } from 'react'
import { mdiPhone, mdiEmail, mdiMapMarker } from '@mdi/js'
import BaseIcon from '../BaseIcon'
import axios from 'axios'
import { toast } from 'react-toastify'

const Contact = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    subject: '',
    message: '',
  })
  const [loading, setLoading] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    try {
      await axios.post('/contact_messages', { data: formData })
      toast.success('تم إرسال رسالتك بنجاح!')
      setFormData({ name: '', email: '', subject: '', message: '' })
    } catch (error) {
      console.error(error)
      toast.error('حدث خطأ أثناء إرسال الرسالة. يرجى المحاولة مرة أخرى.')
    } finally {
      setLoading(false)
    }
  }

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

  return (
    <section id="contact" className="py-20 bg-white font-cairo" dir="rtl">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl md:text-4xl font-bold text-center text-medicalGreen-900 mb-16">
          تواصل معنا
        </h2>

        <div className="flex flex-col lg:flex-row gap-12">
          {/* Contact Info */}
          <div className="w-full lg:w-1/3 space-y-8">
            <div className="bg-gray-50 p-8 rounded-3xl space-y-6">
              <h3 className="text-2xl font-bold text-medicalGreen-900 mb-6">معلومات التواصل</h3>
              
              <div className="flex items-start gap-4">
                <div className="text-medicalGreen-700">
                  <BaseIcon path={mdiMapMarker} size={24} />
                </div>
                <div>
                  <h4 className="font-bold text-medicalGreen-950">العنوان</h4>
                  <p className="text-gray-600">حضرموت - سيئون - الشارع العام</p>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <div className="text-medicalGreen-700">
                  <BaseIcon path={mdiPhone} size={24} />
                </div>
                <div>
                  <h4 className="font-bold text-medicalGreen-950">الهاتف</h4>
                  <p className="text-gray-600" dir="ltr">+967 5 440000</p>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <div className="text-medicalGreen-700">
                  <BaseIcon path={mdiEmail} size={24} />
                </div>
                <div>
                  <h4 className="font-bold text-medicalGreen-950">البريد الإلكتروني</h4>
                  <p className="text-gray-600">info@daralshifa.org</p>
                </div>
              </div>
            </div>

            {/* Google Maps Placeholder */}
            <div className="h-64 bg-gray-200 rounded-3xl overflow-hidden relative">
              <iframe 
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15444.604646738914!2d48.7844005!3d15.9430155!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e1f579893967817%3A0x6b77e8979167e43!2zU2VpeXVuLCBZZW1lbg!5e0!3m2!1sen!2s!4v1700000000000!5m2!1sen!2s" 
                width="100%" 
                height="100%" 
                style={{ border: 0 }} 
                allowFullScreen={true} 
                loading="lazy"
              ></iframe>
            </div>
          </div>

          {/* Contact Form */}
          <div className="w-full lg:w-2/3">
            <form onSubmit={handleSubmit} className="space-y-6 bg-gray-50 p-8 md:p-12 rounded-3xl shadow-sm">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label className="block text-medicalGreen-900 font-bold mb-2">الاسم الكامل</label>
                  <input 
                    type="text" 
                    name="name"
                    required
                    value={formData.name}
                    onChange={handleChange}
                    placeholder="أدخل اسمك الكامل"
                    className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-medicalGreen-500 focus:ring-2 focus:ring-medicalGreen-200 outline-none transition-all"
                  />
                </div>
                <div>
                  <label className="block text-medicalGreen-900 font-bold mb-2">البريد الإلكتروني</label>
                  <input 
                    type="email" 
                    name="email"
                    required
                    value={formData.email}
                    onChange={handleChange}
                    placeholder="example@mail.com"
                    className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-medicalGreen-500 focus:ring-2 focus:ring-medicalGreen-200 outline-none transition-all"
                  />
                </div>
              </div>
              <div>
                <label className="block text-medicalGreen-900 font-bold mb-2">الموضوع</label>
                <input 
                  type="text" 
                  name="subject"
                  required
                  value={formData.subject}
                  onChange={handleChange}
                  placeholder="موضوع الرسالة"
                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-medicalGreen-500 focus:ring-2 focus:ring-medicalGreen-200 outline-none transition-all"
                />
              </div>
              <div>
                <label className="block text-medicalGreen-900 font-bold mb-2">الرسالة</label>
                <textarea 
                  name="message"
                  required
                  value={formData.message}
                  onChange={handleChange}
                  rows={6}
                  placeholder="كيف يمكننا مساعدتك؟"
                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-medicalGreen-500 focus:ring-2 focus:ring-medicalGreen-200 outline-none transition-all"
                ></textarea>
              </div>
              <button 
                type="submit"
                disabled={loading}
                className="bg-medicalGreen-700 text-white font-bold px-10 py-4 rounded-xl hover:bg-medicalGreen-800 transition-all disabled:opacity-50"
              >
                {loading ? 'جاري الإرسال...' : 'إرسال الرسالة'}
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>
  )
}

export default Contact