import React from "react";
import { Outlet, Navigate, useLocation } from "react-router-dom";
import Sidebar from "./Sidebar";
import { useAuthStore } from "../../store/auth";
import Topbar from "./Topbar";

export default function AdminLayout({ title, children, onSearchChange }) {
  const loc = useLocation();
  const { isAuthed, isAdmin } = useAuthStore();

  if (!isAuthed()) return <Navigate to="/login" replace state={{ from: loc.pathname }} />;
  if (!isAdmin()) return <div className="p-10">شما وارد شده‌اید، اما دسترسی ادمین ندارید (is_staff=false).</div>;

  return (
    <div className="bg-[#F2F2F2] overflow-x-hidden font-iran dark:bg-[#001F3F] min-h-screen max-w-screen w-full" dir="rtl">
      <Topbar title={title} onSearchChange={onSearchChange} />

      <div className="flex xl:pt-0 pt-22 xl:pr-5 overflow-x-hidden">
        <Sidebar />

        <div className="xl:w-10/12 w-full md:px-5 px-2">
          <div className="bg-white dark:bg-[#16325B] shadow dark:text-white min-h-[500px] flex justify-center rounded-4xl px-5 py-5">
            <Outlet />
          </div>
        </div>
      </div>
    </div>
  );
}
