'use client'

import { useEffect, useState } from 'react'
import { usePathname, useRouter } from 'next/navigation'
import { Sidebar } from './Sidebar'
import { Header } from './Header'
import { useAuth } from '@/contexts/AuthContext'

export function AppLayout({ children }: { children: React.ReactNode }) {
  const [mobileOpen, setMobileOpen] = useState(false)
  const pathname = usePathname()
  const { user, loading } = useAuth()
  const router = useRouter()

  useEffect(() => {
    setMobileOpen(false)
  }, [pathname])

  useEffect(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : ''
    return () => {
      document.body.style.overflow = ''
    }
  }, [mobileOpen])

  useEffect(() => {
    if (!loading && !user) router.replace('/login')
  }, [loading, user, router])

  if (loading || !user) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-[var(--bg)]">
        <div className="h-8 w-8 animate-spin rounded-full border-2 border-brand-500 border-t-transparent" />
      </div>
    )
  }

  return (
    <div className="premium-page-bg relative flex min-h-screen overflow-hidden bg-[var(--bg)]">
      <div className="mesh-grid-bg pointer-events-none absolute inset-0" />
      <div
        className="sparkle-orb left-[18%] top-[7%] h-48 w-48"
        style={{ background: 'radial-gradient(circle, rgba(61,139,110,0.58), transparent 70%)' }}
      />
      <div
        className="sparkle-orb right-[10%] top-[4%] h-56 w-56"
        style={{
          background: 'radial-gradient(circle, rgba(212,160,84,0.38), transparent 72%)',
          animationDelay: '1.4s',
        }}
      />
      <div
        className="sparkle-orb bottom-[6%] left-[42%] h-40 w-40"
        style={{
          background: 'radial-gradient(circle, rgba(61,139,110,0.3), transparent 72%)',
          animationDelay: '2.6s',
        }}
      />
      <div className="premium-shine-strip animate-diagonal-shine pointer-events-none absolute -top-24 bottom-0 w-1/3 blur-sm" />

      <div className="relative z-10 hidden md:flex">
        <Sidebar />
      </div>

      <div
        className={`fixed inset-0 z-40 transition-all duration-300 md:hidden ${mobileOpen ? 'visible' : 'invisible'}`}
      >
        <div
          className={`absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity duration-300 ${mobileOpen ? 'opacity-100' : 'opacity-0'}`}
          onClick={() => setMobileOpen(false)}
        />
        <div
          className={`absolute inset-y-0 left-0 w-72 transition-transform duration-300 ease-out ${mobileOpen ? 'translate-x-0' : '-translate-x-full'}`}
        >
          <Sidebar mobile onClose={() => setMobileOpen(false)} />
        </div>
      </div>

      <div className="relative z-10 flex min-h-screen flex-1 flex-col overflow-hidden">
        <Header onMenuClick={() => setMobileOpen(true)} />
        <main className="relative flex-1 overflow-auto p-4 md:p-6">{children}</main>
      </div>
    </div>
  )
}