import React, { useEffect, useState } from 'react'
import {
  FaCode,
  FaGlobe,
  FaServer,
  FaUsers,
  FaShieldAlt,
  FaCog,
  FaCheckCircle,
} from 'react-icons/fa'
import { Link } from 'react-router-dom'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { Helmet } from 'react-helmet'
import { ServiceDto } from '@/proxy/services/models'
import { getServices } from '@/services/service.service'
import navigationIcon from '@/configs/navigation-icon.config'

const Services: React.FC = () => {
  const { translate } = useLocalization()
  const [services, setServices] = useState<ServiceDto[]>([])
  const [loading, setLoading] = useState(true)

  const iconColors = [
    'text-blue-600',
    'text-red-600',
    'text-green-600',
    'text-purple-600',
    'text-yellow-600',
    'text-indigo-600',
  ]

  function getRandomColor() {
    return iconColors[Math.floor(Math.random() * iconColors.length)]
  }

  useEffect(() => {
    setLoading(true)

    const fetchServices = async () => {
      try {
        const result = await getServices()
        const items = result?.data?.map((service: ServiceDto) => ({
          icon: service.icon,
          title: service.title,
          description: service.description,
          type: service.type,
          features: service.features,
        }))

        setServices(items)
      } catch (error) {
        console.error('Service listesi alınırken hata oluştu:', error)
      } finally {
        setLoading(false)
      }
    }

    fetchServices()
  }, [])

  return (
    <div className="min-h-screen bg-gray-50">
      <Helmet
        titleTemplate="%s | Sözsoft"
        title={translate('::' + 'Public.nav.services')}
        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/3183173/pexels-photo-3183173.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.services.title')}
          </h1>
          <p className="text-xl max-w-3xl ml-4">{translate('::Public.services.subtitle')}</p>
        </div>
      </div>

      {/* Services Grid */}
      <div className="py-16">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {services
              .filter((a) => a.type === 'service')
              .map((service, index) => {
                const IconComponent = navigationIcon[service.icon || '']
                return (
                  <div
                    key={index}
                    className="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow"
                  >
                    <div className="mb-6">
                      {IconComponent && (
                        <IconComponent className={`w-12 h-12 ${getRandomColor()}`} />
                      )}
                    </div>
                    <h3 className="text-2xl font-bold text-gray-900 mb-4">
                      {translate('::' + service.title)}
                    </h3>
                    <p className="text-gray-600 mb-6">{translate('::' + service.description)}</p>
                    <ul className="space-y-2">
                      {service.features.map((feature, fIndex) => (
                        <li key={fIndex} className="flex items-center text-gray-700">
                          <span className="w-2 h-2 bg-blue-600 rounded-full mr-2"></span>
                          {translate('::' + feature)}
                        </li>
                      ))}
                    </ul>
                  </div>
                )
              })}
          </div>
        </div>
      </div>

      {/* Support Plans */}
      <div className="bg-white py-10">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-10">
            {translate('::Public.services.support.title')}
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {services
              .filter((a) => a.type === 'support')
              .map((plan, index) => {
                const IconComponent = navigationIcon[plan.icon || '']

                return (
                  <div
                    key={index}
                    className="bg-white rounded-xl shadow-lg p-8 border border-gray-200"
                  >
                    <div className="mb-6">
                      {IconComponent && (
                        <IconComponent className={`w-12 h-12 ${getRandomColor()}`} />
                      )}
                    </div>
                    <h3 className="text-xl font-bold mb-4">{translate('::' + plan.title)}</h3>
                    <ul className="space-y-3 mb-8">
                      {plan.features.map((feature, fIndex) => (
                        <li key={fIndex} className="flex items-center space-x-2 text-gray-700">
                          <FaCheckCircle className="w-5 h-5 text-green-500 flex-shrink-0" />
                          <span>{translate('::' + feature)}</span>
                        </li>
                      ))}
                    </ul>
                    <Link
                      to={ROUTES_ENUM.public.contact}
                      className="block text-center bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
                    >
                      {translate('::Public.services.support.contactButton')}
                    </Link>
                  </div>
                )
              })}
          </div>
        </div>
      </div>

      {/* Call to Action */}
      <div className="bg-blue-900 text-white py-16">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-6 text-white">
            {translate('::Public.services.cta.title')}
          </h2>
          <p className="text-xl mb-8 max-w-2xl mx-auto">
            {translate('::Public.services.cta.description')}
          </p>
          <Link
            to={ROUTES_ENUM.public.contact}
            className="bg-white text-blue-900 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors"
          >
            {translate('::Public.services.cta.contact')}
          </Link>
        </div>
      </div>
    </div>
  )
}

export default Services