'use client'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { Sidebar } from '@/components/layout/Sidebar'
import { Header } from '@/components/layout/Header'
import { Breadcrumbs } from '@/components/common/Breadcrumbs'
import { getStoredRole } from '@/lib/roles'

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const router = useRouter()
  const [sidebarKey, setSidebarKey] = useState(0)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const role = getStoredRole()
    if (!role) {
      router.replace('/')
    } else {
      setLoading(false)
    }
  }, [router])

  const handleRoleChange = () => {
    setSidebarKey(prev => prev + 1)
  }

  if (loading) {
    return (
      <div className="min-h-screen bg-slate-50 flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-slate-50 flex">
      <Sidebar key={sidebarKey} onRoleChange={handleRoleChange} />

      <div className="flex-1 ml-64 transition-all duration-300">
        <Header />

        <main className="p-6">
          <Breadcrumbs />
          {children}
        </main>
      </div>
    </div>
  )
}