'use client'

import { useEffect, useState } from 'react'
import { motion } from 'framer-motion'
import { useTranslations, useLocale } from 'next-intl'
import Link from 'next/link'
import type { Locale, AboutPageData } from '@/types'
import { t as ls } from '@/types'
import api from '@/lib/api'

export default function AboutPage() {
  const tl = useTranslations('about')
  const locale = useLocale() as Locale
  const lp = (path: string) => `/${locale}${path}`

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

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

  const heroTitle = data ? ls(data.heroTitle, locale) : tl('title')
  const heroSubtitle = data ? ls(data.heroSubtitle, locale) : tl('description')
  const heroImage = data?.heroImage
  const introTitle = data ? ls(data.introTitle, locale) : ''
  const introContent = data ? ls(data.introContent, locale) : ''
  const introImage = data?.introImage
  const contentSections = data?.contentSections ?? []
  const gallery = data?.galleryImages?.filter(Boolean) ?? []

  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 || ''

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

  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-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <span className="section-label !text-white/70">
              {tl('sectionLabel')}
            </span>
            <h1 className="text-4xl md:text-5xl font-bold mt-3 mb-6 tracking-tight text-white">
              {heroTitle}
            </h1>
            <p className="text-xl max-w-3xl mx-auto text-white/70">
              {heroSubtitle}
            </p>
          </motion.div>
        </div>
      </section>

      {/* Intro / Mission */}
      {(introTitle || introContent) && (
        <section className="py-24 md:py-32">
          <div className="max-w-7xl mx-auto container-padding">
            <div className={`grid gap-12 items-center ${introImage ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1 max-w-3xl mx-auto text-center'}`}>
              <div>
                {introTitle && (
                  <h2 className="text-3xl md:text-4xl font-bold text-secondary-900 mb-6 tracking-tight">{introTitle}</h2>
                )}
                {introContent && (
                  <div
                    className="text-lg text-secondary-600 leading-relaxed prose prose-lg max-w-none"
                    dangerouslySetInnerHTML={{ __html: introContent }}
                  />
                )}
              </div>
              {introImage && (
                <div className="rounded-sm overflow-hidden shadow-md">
                  <img src={introImage} alt={introTitle} className="w-full h-auto object-cover" />
                </div>
              )}
            </div>
          </div>
        </section>
      )}

      {/* Content Sections (alternating layout) */}
      {contentSections.map((section, idx) => {
        const label = ls(section.label, locale)
        const title = ls(section.title, locale)
        const content = ls(section.content, locale)
        const image = section.image
        const imageLeft = section.imagePosition === 'left'
        const isEven = idx % 2 === 0

        return (
          <section key={idx} className={`py-20 md:py-28 ${isEven ? 'bg-gray-50' : 'bg-white'}`}>
            <div className="max-w-7xl mx-auto container-padding">
              <div className={`grid gap-12 lg:gap-16 items-center ${image ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1 max-w-3xl mx-auto'}`}>
                {image && imageLeft && (
                  <div className="rounded-sm overflow-hidden shadow-lg">
                    <img src={image} alt={title} className="w-full h-auto object-cover" />
                  </div>
                )}
                <div>
                  {label && (
                    <span className="section-label">{label}</span>
                  )}
                  {title && (
                    <h2 className="text-3xl md:text-4xl font-bold text-secondary-900 mt-3 mb-6 tracking-tight">{title}</h2>
                  )}
                  {content && (
                    <div
                      className="text-secondary-600 leading-relaxed prose prose-lg max-w-none
                        prose-ul:list-disc prose-ul:pl-5 prose-ul:space-y-2
                        prose-li:text-secondary-600 prose-p:mb-4"
                      dangerouslySetInnerHTML={{ __html: content }}
                    />
                  )}
                </div>
                {image && !imageLeft && (
                  <div className="rounded-sm overflow-hidden shadow-lg">
                    <img src={image} alt={title} className="w-full h-auto object-cover" />
                  </div>
                )}
              </div>
            </div>
          </section>
        )
      })}

      {/* Gallery */}
      {gallery.length > 0 && (
        <section className="py-24 md:py-32">
          <div className="max-w-7xl mx-auto container-padding">
            <h2 className="text-3xl font-bold text-secondary-900 text-center mb-14 tracking-tight">
              {tl('gallery')}
            </h2>
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
              {gallery.map((url, i) => (
                <div key={i} className="aspect-square rounded-sm overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                  <img src={url} alt={`Gallery ${i + 1}`} className="w-full h-full object-cover" />
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* CTA */}
      {ctaTitle && (
        <section className="bg-secondary-950 py-20">
          <div className="max-w-4xl mx-auto container-padding text-center">
            <h2 className="text-3xl font-bold text-white mb-6 tracking-tight">{ctaTitle}</h2>
            {ctaDesc && <p className="text-gray-400 mb-8 text-lg">{ctaDesc}</p>}
            {ctaBtnText && ctaBtnLink && (
              <Link href={lp(ctaBtnLink)} className="btn btn-accent text-lg px-8 py-4">
                {ctaBtnText}
              </Link>
            )}
          </div>
        </section>
      )}
    </div>
  )
}