import React, { useEffect, useMemo, useState } from "react"
import { useLocation, useNavigate } from "react-router-dom"

import Navbar from "../components/Layout/Navbar/Navbar"
import Footer from "../components/Layout/Footer"
import CategoriesSidebar from "../components/Categories/CategoriesSidebar" // path’i düzelt
import { DUMMY_CATEGORIES } from "../data/categories" // path’i düzelt

type Props = {
  children: React.ReactNode
}

export default function MainLayout({ children }: Props) {
  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])

  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 })
  }

  return (
    <div className="min-h-screen flex flex-col bg-background text-text">
      {/* Navbar fixed + full width */}
      <Navbar
        onToggleCategories={() => setCatsOpen((v) => !v)}
      />

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

      {/* Content: navbar yüksekliği kadar boşluk */}
      <main className="flex-1 bg-background pt-21">
        <div className="max-w-[1400px] mx-auto ">
          
          
          
          {children}
          
          
          
          </div>
      </main>

      {/* Footer */}
      <div className="bg-surface border-t border-border">
        <div className="max-w-[1400px] mx-auto px-4 py-4">
          <Footer />
        </div>
      </div>
    </div>
  )
}
