'use client';

import { useEffect, useState } from 'react';
import { usePathname } from 'next/navigation';
import { Sidebar } from '@/components/layouts/Sidebar';
import { Header } from '@/components/layouts/Header';
import { NavigationProgress } from '@/components/layouts/NavigationProgress';

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const [collapsed, setCollapsed] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

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

  return (
    <div className="min-h-screen bg-background">
      <NavigationProgress />
      {mobileOpen && (
        <div
          className="fixed inset-0 bg-black/50 z-15 lg:hidden"
          onClick={() => setMobileOpen(false)}
        />
      )}

      {mobileOpen && (
        <div className="lg:hidden">
          <Sidebar collapsed={false} overlay onToggle={() => setMobileOpen(false)} />
        </div>
      )}

      <div className="flex min-h-screen min-w-0">
        <div className="hidden lg:block sticky top-0 h-screen z-20 shrink-0">
          <Sidebar collapsed={collapsed} onToggle={() => setCollapsed((open) => !open)} />
        </div>
        <div className="flex-1 min-w-0 overflow-x-hidden">
          <Header onMenuToggle={() => setMobileOpen((open) => !open)} />
          <main id="main-content" className="p-3 sm:p-4 lg:p-5 min-w-0">
            {children}
          </main>
        </div>
      </div>
    </div>
  );
}