'use client'

import { useState, useEffect } from 'react'
import { useTranslations, useLocale } from 'next-intl'
import { motion } from 'framer-motion'
import api from '@/lib/api'
import { PrivacyPageData, Locale, t } from '@/types'

export default function PrivacyPage() {
  const tl = useTranslations('privacy')
  const locale = useLocale() as Locale
  const [data, setData] = useState<PrivacyPageData | null>(null)
  const [loading, setLoading] = useState(true)

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

  const resolveImage = (src?: string) => {
    if (!src) return undefined
    if (src.startsWith('http')) return src
    const base = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000/api'
    return `${base.replace('/api', '')}${src}`
  }

  const heroTitle = data ? t(data.heroTitle, locale) : tl('title')
  const heroSubtitle = data ? t(data.heroSubtitle, locale) : tl('description')
  const heroImage = resolveImage(data?.heroImage)
  const sections = data?.sections ?? []

  return (
    <div>
      <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 px-4 sm:px-6 lg:px-8 pb-16 md:pb-24 pt-32 w-full text-center">
          <motion.h1
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-4xl md:text-5xl font-bold mb-6 tracking-tight text-white"
          >
            {heroTitle}
          </motion.h1>
          {heroSubtitle && (
            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 }}
              className="text-xl max-w-3xl mx-auto text-white/70"
            >
              {heroSubtitle}
            </motion.p>
          )}
        </div>
      </section>

      <section className="py-20 md:py-24 bg-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          {loading ? (
            <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>
          ) : sections.length === 0 ? (
            <p className="text-center text-secondary-500 py-16">
              {tl('noContent')}
            </p>
          ) : (
            <div className="space-y-12">
              {sections.map((section, idx) => {
                const title = t(section.title, locale)
                const content = t(section.content, locale)

                return (
                  <motion.div
                    key={idx}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: idx * 0.05 }}
                  >
                    {title && (
                      <h2 className="text-2xl font-bold text-secondary-900 mb-4 tracking-tight">{title}</h2>
                    )}
                    <div
                      className="prose prose-lg max-w-none text-secondary-600 prose-headings:text-secondary-900 prose-headings:tracking-tight prose-a:text-primary-600 prose-li:marker:text-primary-600"
                      dangerouslySetInnerHTML={{ __html: content }}
                    />
                  </motion.div>
                )
              })}
            </div>
          )}
        </div>
      </section>
    </div>
  )
}