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 services: ServiceDto[] = [
  //   {
  //     icon: <FaCode className="w-12 h-12 text-blue-600" />,
  //     title: translate('::Public.services.software.title'),
  //     description: translate('::Public.services.software.desc'),
  //     type: 'service',
  //     features: [
  //       translate('::Public.services.software.features.analysis'),
  //       translate('::Public.services.software.features.design'),
  //       translate('::Public.services.software.features.development'),
  //       translate('::Public.services.software.features.testing'),
  //       translate('::Public.services.software.features.maintenance'),
  //     ],
  //   },
  //   {
  //     icon: <FaUsers className="w-12 h-12 text-purple-600" />,
  //     title: translate('::Public.services.web.title'),
  //     description: translate('::Public.services.web.desc'),
  //     type: 'service',
  //     features: [
  //       translate('::Public.services.web.features.frontend'),
  //       translate('::Public.services.web.features.backend'),
  //       translate('::Public.services.web.features.api'),
  //       translate('::Public.services.web.features.seo'),
  //       translate('::Public.services.web.features.performance'),
  //     ],
  //   },
  //   {
  //     icon: <FaShieldAlt className="w-12 h-12 text-green-600" />,
  //     title: translate('::Public.services.mobile.title'),
  //     description: translate('::Public.services.mobile.desc'),
  //     type: 'service',
  //     features: [
  //       translate('::Public.services.mobile.features.design'),
  //       translate('::Public.services.mobile.features.native'),
  //       translate('::Public.services.mobile.features.cross'),
  //       translate('::Public.services.mobile.features.push'),
  //       translate('::Public.services.mobile.features.store'),
  //     ],
  //   },
  //   {
  //     icon: <FaServer className="w-12 h-12 text-red-600" />,
  //     title: translate('::Public.services.database.title'),
  //     description: translate('::Public.services.database.desc'),
  //     type: 'service',
  //     features: [
  //       translate('::Public.services.database.features.design'),
  //       translate('::Public.services.database.features.optimization'),
  //       translate('::Public.services.database.features.migration'),
  //       translate('::Public.services.database.features.backup'),
  //       translate('::Public.services.database.features.recovery'),
  //     ],
  //   },
  //   {
  //     icon: <FaGlobe className="w-12 h-12 text-yellow-600" />,
  //     title: translate('::Public.services.integration.title'),
  //     description: translate('::Public.services.integration.desc'),
  //     type: 'service',
  //     features: [
  //       translate('::Public.services.integration.features.api'),
  //       translate('::Public.services.integration.features.middleware'),
  //       translate('::Public.services.integration.features.legacy'),
  //       translate('::Public.services.integration.features.realtime'),
  //       translate('::Public.services.integration.features.monitoring'),
  //     ],
  //   },
  //   {
  //     icon: <FaCog className="w-12 h-12 text-indigo-600" />,
  //     title: translate('::Public.services.consulting.title'),
  //     description: translate('::Public.services.consulting.desc'),
  //     type: 'service',
  //     features: [
  //       translate('::Public.services.consulting.features.tech'),
  //       translate('::Public.services.consulting.features.project'),
  //       translate('::Public.services.consulting.features.digital'),
  //       translate('::Public.services.consulting.features.risk'),
  //       translate('::Public.services.consulting.features.training'),
  //     ],
  //   },
  //   {
  //     icon: <FaUsers className="w-12 h-12 text-pink-600" />, // Remote Branch Support
  //     title: translate('::Public.services.support.branchRemote.title'),
  //     description: '',
  //     type: 'support',
  //     features: [
  //       translate('::Public.services.support.branchRemote.features.priority'),
  //       translate('::Public.services.support.branchRemote.features.remote'),
  //       translate('::Public.services.support.branchRemote.features.optimization'),
  //       translate('::Public.services.support.branchRemote.features.maintenance'),
  //       translate('::Public.services.support.branchRemote.features.consulting'),
  //     ],
  //   },
  //   {
  //     icon: <FaServer className="w-12 h-12 text-orange-600" />, // Backup Support
  //     title: translate('::Public.services.support.backup.title'),
  //     description: '',
  //     type: 'support',
  //     features: [
  //       translate('::Public.services.support.backup.features.daily'),
  //       translate('::Public.services.support.backup.features.encrypted'),
  //       translate('::Public.services.support.backup.features.recovery'),
  //       translate('::Public.services.support.backup.features.verification'),
  //       translate('::Public.services.support.backup.features.access'),
  //     ],
  //   },
  //   {
  //     icon: <FaGlobe className="w-12 h-12 text-cyan-600" />, // SMS Support
  //     title: translate('::Public.services.support.sms.title'),
  //     description: '',
  //     type: 'support',
  //     features: [
  //       translate('::Public.services.support.sms.features.packages'),
  //       translate('::Public.services.support.sms.features.bulk'),
  //       translate('::Public.services.support.sms.features.template'),
  //       translate('::Public.services.support.sms.features.reporting'),
  //       translate('::Public.services.support.sms.features.api'),
  //     ],
  //   },
  // ]

  // Botları çek

  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(() => {
    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)
      }
    }

    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