'use client'

import { useEffect } from 'react'
import { useSession } from 'next-auth/react'
import { useRouter } from 'next/navigation'
import Header from '@/components/Header'
import AppearanceSettingsPanel from '../_components/AppearanceSettingsPanel'
import LicenseInfo from '@/components/LicenseInfo'

export default function SystemSettingsPage() {
  const { data: session, status } = useSession()
  const router = useRouter()

  useEffect(() => {
    const isAdmin = (session?.user as any)?.role === 'ADMIN'
    if (status === 'unauthenticated') {
      router.replace('/login')
    } else if (status === 'authenticated' && !isAdmin) {
      router.replace('/')
    }
  }, [status, session, router])

  if (status === 'loading') {
    return (
      <div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-900">
        <div className="text-sm text-slate-500 dark:text-slate-400">正在加载设置...</div>
      </div>
    )
  }

  if (!session || (session.user as any)?.role !== 'ADMIN') {
    return null
  }

  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
      <Header session={session} />
      <main className="container mx-auto px-4 py-8 max-w-6xl space-y-8">
        <LicenseInfo />
        <AppearanceSettingsPanel sessionUser={session.user as any} variant="standalone" />
      </main>
    </div>
  )
}