'use client'

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

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

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

  const [firstName, setFirstName] = useState('')
  const [lastName, setLastName] = useState('')
  const [email, setEmail] = useState('')
  const [message, setMessage] = useState('')
  const [submitting, setSubmitting] = useState(false)
  const [submitted, setSubmitted] = useState(false)

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!firstName || !lastName || !email) return
    setSubmitting(true)
    try {
      await api.submitCoachInquiry({ firstName, lastName, email, message: message || undefined })
      setSubmitted(true)
      setFirstName('')
      setLastName('')
      setEmail('')
      setMessage('')
    } catch {
      // silently fail
    } finally {
      setSubmitting(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 introContent = data ? ls(data.introContent, locale) : ''
  const benefits = data?.benefits ?? []
  const ctaTitle = data ? ls(data.ctaTitle, locale) : ''
  const ctaDesc = data ? ls(data.ctaDescription, locale) : ''
  const ctaBtnText = data ? ls(data.ctaButtonText, locale) : ''
  const ctaBtnLink = data?.ctaButtonLink || ''
  const coaches = (data?.coaches ?? []).sort((a, b) => a.order - b.order)
  const joinTitle = data ? ls(data.joinTitle, locale) : ''
  const joinSubtitle = data ? ls(data.joinSubtitle, locale) : ''
  const joinBg = data?.joinBackgroundImage

  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 mb-4">
              {t('academy.label')}
            </span>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 tracking-tight text-white">
              {heroTitle}
            </h1>
            <p className="text-xl leading-relaxed text-white/70">
              {heroSubtitle}
            </p>
          </div>
        </div>
      </section>

      {/* Intro Narrative */}
      {introContent && (
        <section className="section-padding">
          <div className="max-w-4xl mx-auto container-padding">
            <div
              className="prose prose-lg max-w-none text-secondary-700 leading-relaxed"
              dangerouslySetInnerHTML={{ __html: introContent }}
            />
          </div>
        </section>
      )}

      {/* Benefits as Bullet Points */}
      {benefits.length > 0 && (
        <section className="pb-16 md:pb-24">
          <div className="max-w-4xl mx-auto container-padding">
            <ul className="space-y-6">
              {benefits.map((b, i) => (
                <li key={i} className="flex items-start gap-4">
                  <div className="mt-1 flex-shrink-0 w-6 h-6 bg-primary-100 rounded-full flex items-center justify-center">
                    <CheckCircle className="h-4 w-4 text-primary-600" />
                  </div>
                  <div>
                    <span className="font-bold text-secondary-900">{ls(b.title, locale)}</span>
                    <span className="text-secondary-600"> — {ls(b.description, locale)}</span>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </section>
      )}

      {/* CTA Banner */}
      {ctaTitle && (
        <section className="bg-primary-600 py-16">
          <div className="max-w-4xl mx-auto container-padding text-center">
            <h2 className="text-3xl font-bold text-white mb-4">{ctaTitle}</h2>
            {ctaDesc && <p className="text-primary-100 text-lg mb-8">{ctaDesc}</p>}
            {ctaBtnText && ctaBtnLink && (
              <Link href={lp(ctaBtnLink)} className="inline-block bg-white text-primary-700 font-semibold px-8 py-3 rounded-lg hover:bg-primary-50 transition-colors text-lg">
                {ctaBtnText}
              </Link>
            )}
          </div>
        </section>
      )}

      {/* Coach Roster */}
      {coaches.length > 0 && (
        <section className="section-padding bg-gray-50">
          <div className="max-w-7xl mx-auto container-padding">
            <div className="text-center mb-14">
              <h2 className="text-3xl font-bold text-secondary-900 mb-3 tracking-tight">
                {t('academy.ourCoaches')}
              </h2>
              <p className="text-secondary-600">
                {t('academy.certifiedCoaches')}
              </p>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {coaches.map((coach, i) => (
                <div key={i} className="bg-white rounded-sm overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                  <div className="aspect-square bg-gray-100 flex items-center justify-center">
                    {coach.photo ? (
                      <img src={coach.photo} alt={ls(coach.name, locale)} className="w-full h-full object-cover" />
                    ) : (
                      <User className="w-16 h-16 text-gray-300" />
                    )}
                  </div>
                  <div className="p-5 text-center">
                    <p className="text-sm font-semibold text-primary-600 mb-1">{ls(coach.title, locale)}</p>
                    <h3 className="text-lg font-bold text-secondary-900 mb-1">{ls(coach.name, locale)}</h3>
                    <p className="text-sm text-secondary-500">{ls(coach.organization, locale)}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Join Our Coaching Team */}
      <section
        className="relative py-20"
        style={joinBg ? { backgroundImage: `url(${joinBg})`, backgroundSize: 'cover', backgroundPosition: 'center' } : undefined}
      >
        {joinBg && <div className="absolute inset-0 bg-gradient-to-b from-secondary-950/80 to-secondary-950/60" />}
        {!joinBg && <div className="absolute inset-0 bg-secondary-950 -z-10" />}
        <div className="relative max-w-4xl mx-auto container-padding">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">{joinTitle}</h2>
              <p className="text-gray-300 text-lg">{joinSubtitle}</p>
            </div>
            <div className="bg-white rounded-sm p-6 shadow-lg">
              {submitted ? (
                <div className="py-8 text-center">
                  <CheckCircle className="h-12 w-12 text-green-500 mx-auto mb-4" />
                  <h3 className="text-lg font-semibold text-secondary-900 mb-2">
                    {t('academy.applicationReceived')}
                  </h3>
                  <p className="text-secondary-600 text-sm">
                    {t('academy.inTouchSoon')}
                  </p>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        {t('academy.firstName')} *
                      </label>
                      <input
                        value={firstName}
                        onChange={(e) => setFirstName(e.target.value)}
                        required
                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        {t('academy.lastName')} *
                      </label>
                      <input
                        value={lastName}
                        onChange={(e) => setLastName(e.target.value)}
                        required
                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
                      />
                    </div>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      {t('academy.email')} *
                    </label>
                    <input
                      type="email"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      required
                      className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      {t('academy.message')}
                    </label>
                    <textarea
                      value={message}
                      onChange={(e) => setMessage(e.target.value)}
                      rows={3}
                      className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg resize-y focus:outline-none focus:ring-2 focus:ring-primary-500"
                    />
                  </div>
                  <button
                    type="submit"
                    disabled={submitting}
                    className="w-full bg-primary-600 text-white font-semibold py-2.5 rounded-lg hover:bg-primary-700 transition-colors disabled:opacity-50"
                  >
                    {submitting ? t('academy.submitting') : t('academy.submit')}
                  </button>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}