import React, { useState } from "react";
import { Outlet, useLocation } from "react-router-dom";
import Sidebar from "./Sidebar/sidebar";
import Header from "./Header/header";

const HEADER_PATHS = [
    "/management",
    "/management/",
    "/management/cafes",
    "/edit-cafe",
    "/edit-cafe/",
    "/cafe",
    "/cafes",
    "/admin",
];

export default function Layout() {
    const [isOpen, setIsOpen] = useState(false);
    const location = useLocation();
    const path = location.pathname;

    // Check if current path should show header
    const showHeader = HEADER_PATHS.some((p) => path.startsWith(p) || path.includes(p));

    return (
        <div className="flex min-h-screen w-full bg-[#FDF8F4]">
            {/* Sidebar */}
            <Sidebar 
                className="fixed top-0 right-0 bottom-0 z-[65] w-[260px] flex flex-col bg-[#EFEEEE] rounded-l-2xl shadow-xl border-l border-[#D9CAB3]" 
                isOpen={isOpen} 
                setIsOpen={setIsOpen} 
            />

            {/* Main Content */}
            <div className="flex-1 flex flex-col min-h-screen w-full lg:mr-[220px]">
                {/* Header */}
                {showHeader && (
                    <div className="fixed top-0 right-0 left-0 lg:right-[220px] z-30">
                        <Header title="مدیریت کافه‌ها" />
                    </div>
                )}

                {/* Main Content Area */}
                <main
                    className={`flex-1 w-full overflow-x-hidden bg-background transition-all p-3 lg:p-6`}
                >
                    <div className="max-w-full mx-auto">
                        <Outlet />
                    </div>
                </main>
            </div>
        </div>
    );
}