'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { useTranslations, useLocale } from 'next-intl'
import { ArrowRight } from 'lucide-react'
import api from '@/lib/api'
import { GolfServicesPageData, t as tl } from '@/types'
import type { Locale } from '@/types'

const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000'
function resolveImage(src?: string) {
  if (!src) return undefined
  if (src.startsWith('http://') || src.startsWith('https://') || src.startsWith('/')) return src
  return `${API_URL}/${src}`
}

export default function GolfServicesPage() {
  const t = useTranslations('services')
  const locale = useLocale() as Locale
  const [data, setData] = useState<GolfServicesPageData | null>(null)
  const [loading, setLoading] = useState(true)
  const lp = (path: string) => `/${locale}${path}`

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

  const heroTitle = data ? tl(data.heroTitle, locale) : ''
  const heroDesc = data ? tl(data.heroDescription, locale) : ''
  const cards = data?.serviceCards ?? []

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

  return (
    <div>
      <section className="relative min-h-[calc(100dvh-4rem)] lg:min-h-[calc(100dvh-100px)] flex items-end bg-secondary-950 overflow-hidden">
        <div className="relative z-10 max-w-7xl mx-auto container-padding pb-16 md:pb-24 pt-32 w-full text-center">
          <div>
            <span className="section-label !text-white/70">{t('sectionLabel')}</span>
            <h1 className="text-4xl md:text-5xl font-bold text-white mt-3 mb-6 tracking-tight">
              {heroTitle || t('pageTitle')}
            </h1>
            {heroDesc && (
              <p className="text-xl text-white/70 max-w-3xl mx-auto">{heroDesc}</p>
            )}
          </div>
        </div>
      </section>

      <section className="py-24 md:py-32">
        <div className="max-w-7xl mx-auto container-padding">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {cards.map((card, idx) => {
              const cardImage = resolveImage(card.image)
              const cardTitle = tl(card.title, locale)
              const cardDesc = tl(card.description, locale)

              return (
                <Link
                  key={idx}
                  href={lp(card.link || '/services')}
                  className="group block"
                >
                  <div className="relative aspect-[16/10] rounded-sm overflow-hidden bg-gray-200">
                    {cardImage ? (
                      <div
                        className="absolute inset-0 bg-cover bg-center transform group-hover:scale-105 transition-transform duration-700"
                        style={{ backgroundImage: `url('${cardImage}')` }}
                      />
                    ) : (
                      <div className="absolute inset-0 bg-gray-200" />
                    )}
                    <div className="absolute inset-0 bg-gradient-to-t from-black/75 via-black/25 to-transparent group-hover:from-black/85 transition-colors duration-300" />
                    <div className="absolute bottom-0 left-0 right-0 p-6 md:p-8">
                      <h3 className="text-xl md:text-2xl font-bold text-white mb-2 group-hover:text-accent-gold transition-colors">
                        {cardTitle}
                      </h3>
                      {cardDesc && (
                        <p className="text-white/75 text-sm md:text-base line-clamp-2 mb-3">{cardDesc}</p>
                      )}
                      <span className="inline-flex items-center text-accent-gold font-semibold text-sm">
                        {t('learnMore')}
                        <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-2 transition-transform" />
                      </span>
                    </div>
                  </div>
                </Link>
              )
            })}
          </div>
        </div>
      </section>
    </div>
  )
}