import React, { useEffect, useState } from 'react'
import {
  FaMailBulk,
  FaPhone,
  FaMapPin,
  FaFileAlt,
  FaBuilding,
  FaCalendarAlt,
  FaCalendarCheck,
  FaRegComment,
} from 'react-icons/fa'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { Helmet } from 'react-helmet'
import { ContactDto } from '@/proxy/contact/models'
import { getContact } from '@/services/contact'

const Contact: React.FC = () => {
  const { translate } = useLocalization()
  const [loading, setLoading] = useState(true)
  const [contact, setContact] = useState<ContactDto>()

  useEffect(() => {
    setLoading(true)

    const fetchServices = async () => {
      try {
        const result = await getContact()

        setContact(result.data)
      } catch (error) {
        console.error('About alınırken hata oluştu:', error)
      } finally {
        setLoading(false)
      }
    }

    fetchServices()
  }, [])

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-50">
        <div className="text-center">
          <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto"></div>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <Helmet
        titleTemplate="%s | Sözsoft"
        title={translate('::' + 'Public.contact.title')}
        defaultTitle="Sözsoft"
      ></Helmet>

      {/* Hero Section */}
      <div className="relative bg-blue-900 text-white py-12">
        <div
          className="absolute inset-0 opacity-20"
          style={{
            backgroundImage:
              'url("https://images.pexels.com/photos/3183171/pexels-photo-3183171.jpeg?auto=compress&cs=tinysrgb&w=1920")',
            backgroundSize: 'cover',
            backgroundPosition: 'center',
          }}
        ></div>
        <div className="container mx-auto pt-20 relative">
          <h1 className="text-5xl font-bold ml-4 mt-3 mb-2 text-white">
            {translate('::Public.contact.title')}
          </h1>
          <p className="text-xl max-w-3xl ml-4">{translate('::Public.contact.subtitle')}</p>
        </div>
      </div>

      {/* Stats Section */}
      <div className="py-16">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <div className="space-y-4">
              <div className="bg-white rounded-xl shadow-lg p-8">
                <h2 className="text-2xl font-bold text-gray-900">
                  {translate('::Public.contact.info.title')}
                </h2>
                <div className="space-y-4">
                  <div className="flex items-start space-x-2">
                    <FaMapPin className="w-5 h-5 text-blue-600 flex-shrink-0 mt-1" />
                    <div>
                      <p className="text-gray-600">{translate('::' + contact?.address)}</p>
                    </div>
                  </div>
                  <div className="flex items-start space-x-2">
                    <FaPhone className="w-5 h-5 text-blue-600 flex-shrink-0" />
                    <div>
                      <p className="text-gray-600">{contact?.phone}</p>
                    </div>
                  </div>
                  <div className="flex items-start space-x-2">
                    <FaMailBulk className="w-5 h-5 text-blue-600 flex-shrink-0" />
                    <div>
                      <p className="text-gray-600">
                        <a
                          href={`mailto:${contact?.email}`}
                          className="hover:underline text-blue-600"
                        >
                          {contact?.email}
                        </a>
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start space-x-2">
                    <FaBuilding className="w-5 h-5 text-blue-600 flex-shrink-0" />
                    <div>
                      <p className="text-gray-600">{contact?.location}</p>
                    </div>
                  </div>
                  <div className="flex items-start space-x-2">
                    <FaFileAlt className="w-5 h-5 text-blue-600 flex-shrink-0" />
                    <div>
                      <p className="text-gray-600">{contact?.taxNumber}</p>
                    </div>
                  </div>
                </div>
              </div>

              <div className="bg-white rounded-xl shadow-lg p-8">
                <h2 className="text-2xl font-bold text-gray-900 mb-6">
                  {translate('::Public.contact.bank.title')}
                </h2>
                <div className="mb-2">
                  <img
                    src="/img/enpara.svg"
                    alt="Enpara Logo"
                    className="w-24 object-contain mt-1 flex-shrink-0"
                  />
                  <div>
                    <h3 className="font-semibold text-gray-900 mb-1">
                      {contact?.bankDto.accountHolder}
                    </h3>
                    <p className="text-gray-600 mb-1 ml-1">{contact?.bankDto.branch}</p>
                    <p className="text-gray-600 mb-1 ml-1">{contact?.bankDto.accountNumber}</p>
                    <p className="text-gray-600 mb-1 ml-1">{contact?.bankDto.iban}</p>
                  </div>
                </div>
              </div>

              {/* Bank Information */}
              <div className="bg-white rounded-xl shadow-lg p-8">
                <h2 className="text-2xl font-bold text-gray-900 mb-6">
                  {translate('::Public.contact.workHours')}
                </h2>
                <div className="space-y-2">
                  <div className="flex items-center space-x-2">
                    <FaCalendarAlt className="w-5 h-5 text-blue-500" />
                    <p className="text-gray-600">
                      {translate('::' + contact?.workHoursDto.weekday)}
                    </p>
                  </div>
                  <div className="flex items-center space-x-2">
                    <FaCalendarCheck className="w-5 h-5 text-blue-500" />
                    <p className="text-gray-600">
                      {translate('::' + contact?.workHoursDto.weekend)}
                    </p>
                  </div>
                  <div className="flex items-center space-x-2">
                    <FaRegComment className="w-5 h-5 text-green-500" />
                    <p className="text-gray-600">
                      {translate('::' + contact?.workHoursDto.whatsapp)}
                    </p>
                  </div>
                </div>
              </div>
            </div>

            {/* Map Section */}
            <div className="bg-white rounded-xl shadow-lg p-2">
              <h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">
                {translate('::' + contact?.mapDto.title)}
              </h2>
              <div className="aspect-w-16 aspect-h-9 bg-gray-200 rounded-xl overflow-hidden">
                <iframe
                  src={contact?.mapDto.src}
                  width={contact?.mapDto.width}
                  style={{ border: 0 }}
                  height={contact?.mapDto.height}
                  allowFullScreen={contact?.mapDto.allowFullScreen}
                  loading={contact?.mapDto.loading as 'lazy' | 'eager' | undefined}
                  referrerPolicy={
                    contact?.mapDto.referrerPolicy as React.HTMLAttributeReferrerPolicy | undefined
                  }
                ></iframe>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Contact