import { useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import Navbar from '../components/Navbar'
import Footer from '../components/Footer'
import DynamicPageRenderer from '../components/DynamicPageRenderer'
import { API_BASE, type Category, type PageSection } from '../types'

export default function HomePage() {
  const [categories, setCategories] = useState<Category[]>([])
  const [sections, setSections] = useState<PageSection[]>([])
  const [loading, setLoading] = useState(true)
  const [categoriesLoading, setCategoriesLoading] = useState(true)
  const { i18n } = useTranslation()

  useEffect(() => {
    const fetchCategories = async () => {
      try {
        const res = await fetch(`${API_BASE}/categories?lang=${i18n.language}`)
        const cats: Category[] = await res.json()
        setCategories(cats)
      } catch (err) {
        console.error('Categories error:', err)
      } finally {
        setCategoriesLoading(false)
      }
    }

    const fetchPageLayout = async () => {
      try {
        const res = await fetch(`${API_BASE}/pages/home?lang=${i18n.language}`)
        const pageData = await res.json()
        if (pageData && pageData.sections) {
          setSections(pageData.sections)
        }
      } catch (err) {
        console.error('Page layout error:', err)
      } finally {
        setLoading(false)
      }
    }

    fetchCategories()
    fetchPageLayout()
  }, [i18n.language])

  return (
    <div className="min-h-screen bg-pop-bg">
      <Navbar categories={categories} isTransparent={true} />

      {loading ? (
        <div className="min-h-[60vh] flex items-center justify-center">
          <div className="w-12 h-12 border-4 border-pop-pink border-t-transparent rounded-full animate-spin"></div>
        </div>
      ) : (
        <DynamicPageRenderer
          sections={sections}
          categories={categories}
          categoriesLoading={categoriesLoading}
        />
      )}

      <Footer categories={categories} />
    </div>
  )
}