import React, { useEffect, useMemo, useState } from "react"
import { useLocation, useNavigate } from "react-router-dom"
import Navbar from "./Navbar/Navbar"
import CategoriesSidebar from "../Categories/CategoriesSidebar"
import { DUMMY_CATEGORIES } from "../../data/categories"

export default function AppShell({ children }: { children: React.ReactNode }) {
  const [catsOpen, setCatsOpen] = useState(false)
  const location = useLocation()
  const navigate = useNavigate()

  const activeSlug = useMemo(() => {
    const params = new URLSearchParams(location.search)
    return params.get("cat")
  }, [location.search])

  // route değişince sidebar kapansın
  useEffect(() => {
    setCatsOpen(false)
  }, [location.pathname, location.search])

  const setCategory = (slug: string) => {
    const params = new URLSearchParams(location.search)
    params.set("cat", slug)
    navigate({ pathname: location.pathname, search: params.toString() }, { replace: false })
  }
console.log("APPSHELL render, catsOpen:", catsOpen)

  return (
    <div className="min-h-screen bg-background">
<Navbar
  onToggleCategories={() => {
    console.log("toggle in shell")
    setCatsOpen((v) => !v)
  }}
/>


            <CategoriesSidebar
            isOpen={catsOpen}
            categories={DUMMY_CATEGORIES}
            activeSlug={activeSlug}
            onClose={() => setCatsOpen(false)}
            onSelect={setCategory}
            />


      <main className="max-w-6xl mx-auto px-4 py-6">{children}</main>
    </div>
  )
}
