import { useState } from "react";
import PageLayout from "../components/PageLayout";
import AdminItems from "../components/AdminItems";
import AdminOrders from "../components/AdminOrders";
import AdminStock from "../components/AdminStock";
import AdminStaff from "../components/AdminStaff";
import AdminTopItems from "../components/AdminTopItems";

export default function AdminPage() {
  const [tab, setTab] = useState("items");

  const tabs = [
    { key: "items", label: "Товары" },
    { key: "orders", label: "Заказы" },
    { key: "stock", label: "Склад" },
    { key: "staff", label: "Сотрудники" },
    { key: "topItems", label: "Лидеры продаж" },
  ];

  return (
    <PageLayout>
      <main className="px-6 md:px-16 grow w-full mb-10 text-white">
        <h1 className="text-2xl md:text-4xl font-medium uppercase mb-8">
          Админ-панель
        </h1>

        {/* Вкладки */}
        <div className="flex overflow-x-auto whitespace-nowrap gap-2 mb-8 border-b border-white/10">
          {tabs.map((t) => (
            <button
              key={t.key}
              onClick={() => setTab(t.key)}
              className={`px-4 py-2 text-sm uppercase transition-colors ${tab === t.key
                ? "text-white border-b-2 border-gold"
                : "text-white/50 hover:text-white/80"
                }`}
            >
              {t.label}
            </button>
          ))}
        </div>

        {/* Содержимое активной вкладки */}
        {tab === "items" && <AdminItems />}
        {tab === "orders" && <AdminOrders />}
        {tab === "topItems" && <AdminTopItems />}
        {tab === "stock" && <AdminStock />}
        {tab === "staff" && <AdminStaff />}
      </main>
    </PageLayout>
  );
}
