'use client'

import { useEffect, useState } from 'react'
import { useLocale, useTranslations } from 'next-intl'
import Link from 'next/link'
import { ArrowLeft, CheckCircle } from 'lucide-react'
import api from '@/lib/api'
import type { Locale, GroupServicesData } from '@/types'
import { t as ls } from '@/types'

export default function GroupServicesPage() {
  const locale = useLocale() as Locale
  const t = useTranslations('services')
  const lp = (path: string) => `/${locale}${path}`

  const [data, setData] = useState<GroupServicesData | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    api.getGroupServices()
      .then(setData)
      .catch(() => {})
      .finally(() => setLoading(false))
  }, [])

  if (loading) {
    return (
      <div className="min-h-[60vh] flex items-center justify-center">
        <div className="w-10 h-10 border-4 border-primary-200 border-t-primary-600 rounded-full animate-spin" />
      </div>
    )
  }

  const heroTitle = data ? ls(data.heroTitle, locale) : ''
  const heroSubtitle = data ? ls(data.heroSubtitle, locale) : ''
  const heroImage = data?.heroImage
  const advTitle = data ? ls(data.advantagesTitle, locale) : ''
  const advDesc = data ? ls(data.advantagesDescription, locale) : ''
  const advantages = data?.advantages ?? []
  const svcTitle = data ? ls(data.servicesTitle, locale) : ''
  const serviceItems = data?.serviceItems ?? []
  const trnTitle = data ? ls(data.tournamentsTitle, locale) : ''
  const tournamentItems = data?.tournamentItems ?? []

  return (
    <div>
      {/* Hero */}
      <section
        className="relative min-h-[calc(100dvh-4rem)] lg:min-h-[calc(100dvh-100px)] flex items-end bg-secondary-950 overflow-hidden"
        style={heroImage ? { backgroundImage: `url(${heroImage})`, backgroundSize: 'cover', backgroundPosition: 'center' } : undefined}
      >
        {heroImage && <div className="absolute inset-0 bg-secondary-950/60" />}
        <div className="relative z-10 max-w-7xl mx-auto container-padding pb-16 md:pb-24 pt-32 w-full text-white">
          <Link href={lp('/services')} className="inline-flex items-center text-sm font-semibold mb-8 transition-colors text-white/80 hover:text-white">
            <ArrowLeft className="mr-1.5 h-4 w-4" />
            {t('backToServices')}
          </Link>
          <div className="max-w-3xl">
            <span className="section-label !text-white/70">
              {t('groupServices.label')}
            </span>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 tracking-tight text-white">
              {heroTitle}
            </h1>
            {heroSubtitle && (
              <p className="text-xl leading-relaxed text-white/70">
                {heroSubtitle}
              </p>
            )}
          </div>
        </div>
      </section>

      {/* Advantages Intro */}
      {(advTitle || advDesc) && (
        <section className="section-padding">
          <div className="max-w-7xl mx-auto container-padding">
            <div className="max-w-3xl mx-auto text-center">
              {advTitle && <h2 className="text-3xl font-bold text-secondary-900 mb-4">{advTitle}</h2>}
              {advDesc && <p className="text-secondary-600 text-lg leading-relaxed">{advDesc}</p>}
            </div>
          </div>
        </section>
      )}

      {/* Advantages Grid */}
      {advantages.length > 0 && (
        <section className="pb-16 md:pb-24">
          <div className="max-w-7xl mx-auto container-padding">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
              {advantages.map((adv, i) => (
                <div key={i} className="bg-white rounded-sm shadow-sm overflow-hidden hover:shadow-lg transition-shadow">
                  {adv.image ? (
                    <div className="aspect-video bg-gray-100">
                      <img src={adv.image} alt={ls(adv.title, locale)} className="w-full h-full object-cover" />
                    </div>
                  ) : (
                    <div className="aspect-video bg-gradient-to-br from-primary-50 to-primary-100 flex items-center justify-center">
                      <CheckCircle className="h-10 w-10 text-primary-400" />
                    </div>
                  )}
                  <div className="p-5">
                    <h3 className="text-lg font-semibold text-secondary-900 mb-2">{ls(adv.title, locale)}</h3>
                    <p className="text-secondary-600 text-sm leading-relaxed">{ls(adv.description, locale)}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Services Include */}
      {serviceItems.length > 0 && (
        <section className="section-padding bg-gray-50">
          <div className="max-w-7xl mx-auto container-padding">
            {svcTitle && (
              <div className="text-center mb-12">
                <h2 className="text-3xl font-bold text-secondary-900">{svcTitle}</h2>
              </div>
            )}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {serviceItems.map((svc, i) => (
                <div key={i} className="bg-white rounded-sm p-6 shadow-sm hover:shadow-lg transition-shadow">
                  <div className="flex items-start gap-3">
                    <div className="w-8 h-8 rounded-lg bg-primary-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <span className="text-primary-600 font-bold text-sm">{i + 1}</span>
                    </div>
                    <div>
                      <h3 className="font-semibold text-secondary-900 mb-1">{ls(svc.title, locale)}</h3>
                      <p className="text-secondary-600 text-sm leading-relaxed">{ls(svc.description, locale)}</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Tournaments Include */}
      {tournamentItems.length > 0 && (
        <section className="section-padding">
          <div className="max-w-7xl mx-auto container-padding">
            {trnTitle && (
              <div className="text-center mb-12">
                <h2 className="text-3xl font-bold text-secondary-900">{trnTitle}</h2>
              </div>
            )}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {tournamentItems.map((item, i) => (
                <div key={i} className="bg-white rounded-sm shadow-sm p-6 hover:shadow-lg transition-shadow">
                  <h3 className="text-lg font-semibold text-secondary-900 mb-4 pb-3 border-b border-gray-100">
                    {ls(item.title, locale)}
                  </h3>
                  {item.details.length > 0 && (
                    <ul className="space-y-2.5">
                      {item.details.map((detail, j) => (
                        <li key={j} className="flex items-start gap-2.5">
                          <CheckCircle className="h-4 w-4 text-primary-600 flex-shrink-0 mt-0.5" />
                          <span className="text-secondary-600 text-sm leading-relaxed">{ls(detail, locale)}</span>
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
              ))}
            </div>
          </div>
        </section>
      )}
    </div>
  )
}