'use client'

import { useUser } from '@/hooks/useUser'
import { useRouter } from 'next/navigation'
import { useEffect } from 'react'
import { useTranslations } from 'next-intl'
import { Header } from '@/components/layout/Header'

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const { userData, loading } = useUser()
  const router = useRouter()
  const t = useTranslations('admin')

  useEffect(() => {
    if (!loading && (!userData || !userData.isAdmin)) {
      router.push('/')
    }
  }, [userData, loading, router])

  if (loading) {
    return (
      <div className="min-h-screen">
        <Header />
        <div className="max-w-7xl mx-auto px-4 py-8">
          <div className="flex items-center justify-center min-h-96">
            <div className="flex flex-col items-center gap-3">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
              <p className="text-sm text-muted-foreground">{t('loadingAdmin')}</p>
            </div>
          </div>
        </div>
      </div>
    )
  }

  if (!userData || !userData.isAdmin) {
    return null
  }

  return (
    <div className="min-h-screen">
      <Header />
      {children}
    </div>
  )
}