import { useState, useEffect } from 'react';
import { Outlet } from 'react-router-dom';
import Sidebar from './Sidebar';
import Topbar from './Topbar';

export default function Layout() {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isCollapsed, setIsCollapsed] = useState(() => {
    try {
      return localStorage.getItem('canina_admin_sidebar_collapsed') === 'true';
    } catch {
      return false;
    }
  });

  const toggleCollapse = () => {
    setIsCollapsed((prev) => {
      const next = !prev;
      try {
        localStorage.setItem('canina_admin_sidebar_collapsed', String(next));
      } catch {}
      return next;
    });
  };

  return (
    <div className="flex min-h-screen bg-gray-50 text-gray-900 font-vazir relative overflow-x-hidden" dir="rtl">
      <Sidebar 
        isOpen={isMobileMenuOpen} 
        setIsOpen={setIsMobileMenuOpen} 
        isCollapsed={isCollapsed} 
      />
      <div className={`flex-1 flex flex-col min-h-screen w-full transition-all duration-300 ease-in-out ${
        isCollapsed ? 'lg:pr-20' : 'lg:pr-64'
      }`}>
        <Topbar 
          toggleMenu={() => setIsMobileMenuOpen(!isMobileMenuOpen)} 
          isCollapsed={isCollapsed}
          toggleCollapse={toggleCollapse}
        />
        <main className="flex-1 p-3 sm:p-5 md:p-6 overflow-y-auto overflow-x-hidden max-w-full">
          <Outlet />
        </main>
      </div>
    </div>
  );
}