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

import toggleTheme from "../ToggleTheme";
import { CgDarkMode } from "react-icons/cg";

const HEADER_PATHS = [
    { route: "/cafe-management", title: "مدیریت کافه ها" },
    { route: "/dashboard", title: "داشبورد" },
    { route: "/stats", title: "آمار و تحلیل" },
    { route: "/edit-cafe/", title: "ویرایش کافه" },

];

export default function Layout() {
    const [isOpen, setIsOpen] = useState(false);
    const location = useLocation();
    const [headerTitle, setHeaderTitle] = useState("");

    useEffect(() => {
        const currentPath = location.pathname;
        const headerPath = HEADER_PATHS.find((path) => currentPath.startsWith(path.route));
        if (headerPath) {
            setHeaderTitle(headerPath.title);
        } else {
            setHeaderTitle("");
        }
    }, [location.pathname]);
    // Check if current path should show header


    return (
        <div className="flex min-h-screen w-full bg-background">
            {/* Sidebar */}
            <Sidebar
                className="fixed top-0 right-0 bottom-0 z-[80] 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="mt-18 lg:mt-0 w-full h-16 bg-background p-2 lg:right-[220px] z-30">
                    <Header title={headerTitle} />
                </div>
                {/* )} */}

                <button
                    onClick={toggleTheme}
                    className="fixed top-14 left-0 w-12 h-10 z-[1000] flex justify-center items-center"
                >
                    <CgDarkMode className="w-6 h-6 text-[#8B8886]" />
                </button>

                {/* 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>
    );
}