"use client"

import { Mailbox } from 'lucide-react'
import { Clock, Facebook, Globe, Instagram, Linkedin, Mail, MapPin, Phone, Send, Twitter } from 'lucide-react'
import { useLocale, useTranslations } from 'next-intl'
import Link from "next/link"
import { useState } from "react"
import { toast } from 'react-toastify'
import graphql from 'src/utils/graphql'


const gql = `
mutation CreateMessage($data: MessageInput!) {
    createMessage(data: $data) {
        documentId
    }
}
`
export default function ContactPage() {
  const t = useTranslations('ContactUs')
  const locale = useLocale()


  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
    phone: ""
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)

  const handleChange = (e) => {
    const { name, value } = e.target
    setFormData(prev => ({ ...prev, [name]: value }))
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    setIsSubmitting(true)
    if (!formData.email || !formData.subject || !formData.message) {
      toast.success("Compelete All Required fields")
      setIsSubmitting(false)
      return
    }
    // Simulate form submission
    const res = await graphql(gql, {
      data: {
        ...formData
      }
    })

    toast.success("Message sent successfully")

    setIsSubmitting(false)

    setFormData({ name: "", email: "", subject: "", message: "", phone: "" })
  }


  return (
    <div className={`bg-gray-50 min-h-screen `}>
      {/* Hero Section */}
      <div className="bg-gradient-to-r from-primary-600 to-indigo-700 text-white py-20">
        <div className="container mx-auto px-4 md:px-6">
          <div className="max-w-3xl mx-auto text-center">
            <h1 className="text-4xl md:text-5xl font-bold mb-4">{t('pageTitle')}</h1>
            <p className="text-lg md:text-xl opacity-90">
              {t('pageSubtitle')}
            </p>
          </div>
        </div>
      </div>

      <div className="container mx-auto px-4 md:px-6 py-12">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Contact Information */}
          <div className="space-y-8">
            <div>
              <h2 className="text-2xl font-bold mb-6">{t('contactInfo.title')}</h2>
              <p className="text-gray-600 mb-8">
                {t('contactInfo.description')}
              </p>
            </div>

            {/* Contact Details */}
            <div className="space-y-6">
              <div className={`flex items-start  space-x-4`}>
                <div className="bg-primary-100 p-3 rounded-full">
                  <MapPin className="h-6 w-6 text-primary-600" />
                </div>
                <div>
                  <h3 className="font-medium text-gray-900">{t('contactInfo.office.title')}</h3>
                  <p className="text-gray-600 mt-1">{t('contactInfo.office.address1')}</p>
                  <p className="text-gray-600">{t('contactInfo.office.address2')}</p>
                  <p className="text-gray-600">{t('contactInfo.office.address3')}</p>
                  <p className="text-gray-600">{t('contactInfo.office.postalCode')}</p>
                </div>
              </div>


              <div className={`flex items-start  space-x-4`}>
                <div className="bg-primary-100 p-3 rounded-full">
                  <Phone className="h-6 w-6 text-primary-600" />
                </div>
                <div>
                  <h3 className="font-medium text-gray-900">{t('contactInfo.phone.title')}</h3>
                  <p className="text-gray-600 mt-1">{t('contactInfo.phone.number')}</p>
                </div>
              </div>

              <div className={`flex items-start space-x-4`}>
                <div className="bg-primary-100 p-3 rounded-full">
                  <Mail className="h-6 w-6 text-primary-600" />
                </div>
                <div>
                  <h3 className="font-medium text-gray-900">{t('contactInfo.email.title')}</h3>
                  <p className="text-gray-600 mt-1">{t('contactInfo.email.address')}</p>
                </div>
              </div>

              <div className={`flex items-start  space-x-4`}>
                <div className="bg-primary-100 p-3 rounded-full">
                  <Clock className="h-6 w-6 text-primary-600" />
                </div>
                <div>
                  <h3 className="font-medium text-gray-900">{t('contactInfo.hours.title')}</h3>
                  <p className="text-gray-600 mt-1">{t('contactInfo.hours.weekdays')}</p>
                  <p className="text-gray-600">{t('contactInfo.hours.weekend')}</p>
                </div>
              </div>
            </div>

            {/* Social Media */}
            <div>
              <h3 className="text-lg font-medium mb-4">{t('social.title')}</h3>
              <div className={`flex  space-x-4`}>
                {/* <Link href="#" className="bg-primary-100 p-3 rounded-full hover:bg-primary-200 transition-colors" aria-label={t('social.facebook')}>
                  <Facebook className="h-6 w-6 text-primary-600" />
                </Link>
                <Link href="#" className="bg-primary-100 p-3 rounded-full hover:bg-primary-200 transition-colors" aria-label={t('social.twitter')}>
                  <Twitter className="h-6 w-6 text-primary-600" />
                </Link> */}
                <Link href="https://instagram.com/adhorizonsupply" target='_blank' className="bg-primary-100 p-3 rounded-full hover:bg-primary-200 transition-colors" aria-label={t('social.instagram')}>
                  <Instagram className="h-6 w-6 text-primary-600" />
                </Link>
                {/* <Link href="#" className="bg-primary-100 p-3 rounded-full hover:bg-primary-200 transition-colors" aria-label={t('social.linkedin')}>
                  <Linkedin className="h-6 w-6 text-primary-600" />
                </Link> */}
              </div>
            </div>
          </div>

          {/* Contact Form */}
          <div className="bg-white rounded-xl shadow-lg p-8">
            <h2 className="text-2xl font-bold mb-6">{t('form.title')}</h2>


            <form onSubmit={handleSubmit} className="space-y-6">
              <div>
                <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
                  {t('form.name.label')}
                </label>
                <input
                  type="text"
                  id="name"
                  name="name"
                  value={formData.name}
                  onChange={handleChange}
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors"
                  placeholder={t('form.name.placeholder')}
                />
              </div>

              <div>
                <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
                  {t('form.email.label')} <span className='text-red-600'>*</span>
                </label>
                <input
                  type="email"
                  id="email"
                  name="email"
                  value={formData.email}
                  onChange={handleChange}
                  required
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors"
                  placeholder={t('form.email.placeholder')}
                />
              </div>
              <div>
                <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">
                  {t('form.phone.label')}
                </label>
                <input
                  type="phone"
                  id="phone"
                  name="phone"
                  value={formData.phone}
                  onChange={handleChange}
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors"
                  placeholder={t('form.phone.placeholder')}
                />
              </div>

              <div>
                <label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-1">
                  {t('form.subject.label')} <span className='text-red-600'>*</span>
                </label>
                <input
                  type="text"
                  id="subject"
                  name="subject"
                  value={formData.subject}
                  onChange={handleChange}
                  required
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors"
                  placeholder={t('form.subject.placeholder')}
                />
              </div>

              <div>
                <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">
                  {t('form.message.label')} <span className='text-red-600'>*</span>
                </label>
                <textarea
                  id="message"
                  name="message"
                  value={formData.message}
                  onChange={handleChange}
                  required
                  rows={5}
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors"
                  placeholder={t('form.message.placeholder')}
                />
              </div>

              <button
                type="submit"
                disabled={isSubmitting}
                className={`w-full flex items-center justify-center  space-x-2 bg-primary-600 hover:bg-primary-700 text-white font-medium py-3 px-6 rounded-lg transition-colors ${isSubmitting ? 'opacity-70 cursor-not-allowed' : ''}`}
              >
                {isSubmitting ? (
                  <>
                    <svg className={`animate-spin  h-5 w-5 text-white`} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <span>{t('form.sending')}</span>
                  </>
                ) : (
                  <>
                    <span>{t('form.submit')}</span>
                    <Send className={`h-5 w-5 `} />
                  </>
                )}
              </button>
            </form>

          </div>
        </div>

        {/* Map Section */}
        <div className="mt-16">
          <h2 className="text-2xl font-bold mb-6">{t('map.title')}</h2>
          <div className="h-[400px] w-full rounded-xl overflow-hidden shadow-lg">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14584.90996109082!2d58.252388472339625!3d23.623068386452697!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e8dfdb3865ce30b%3A0x3bccc2e6948fb258!2sAl%20Mawalih%20North%2C%20Seeb%2C%20Oman!5e1!3m2!1sen!2s!4v1741649854951!5m2!1sen!2s"
              width="100%"
              height="100%"
              style={{ border: 0 }}
              allowFullScreen
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            ></iframe>
          </div>
        </div>
      </div>
    </div>
  )
}
