// modules/admin/pages/UsersDashboard.jsx

import { Tabs, TabsList, TabsTrigger } from "@/components/custom/original-tabs";
import { ScrollArea, ScrollBar }       from "@/components/ui/scroll-area";
import DashboardGrid                   from "@/components/generic/DashboardGrid";
import { ADMIN_SECTIONS }              from "@/data/adminTiles.data";

function scrollTo(sectionId) {
    document.getElementById(sectionId)?.scrollIntoView({ behavior: "smooth", block: "start" });
}

export default function AdminDashboard() {
    return (
        <div>
            {/* ── Sticky tab bar — driven by the same array ── */}
            <div className="sticky top-0 z-10 bg-background border-b">
                <Tabs defaultValue="">
                    <ScrollArea className="max-w-full overflow-x-auto w-full">
                        <TabsList className="bg-background rounded-none justify-start mx-2 my-1 flex gap-1">
                            {ADMIN_SECTIONS.map((s) => (
                                <TabsTrigger
                                    key={s.id}
                                    value={s.id}
                                    onClick={() => s.id === ADMIN_SECTIONS[0].id
                        ? window.scrollTo({ top: 0, behavior: "smooth" })
                        : scrollTo(s.id)
                    }
                                    className="data-[state=active]:bg-muted data-[state=active]:shadow-none hover:bg-muted text-muted-foreground data-[state=active]:text-foreground"
                                >
                                    {s.tab}
                                </TabsTrigger>
                            ))}
                        </TabsList>
                        <ScrollBar orientation="horizontal" />
                    </ScrollArea>
                </Tabs>
            </div>

            {/* ── Sections — same array, one DashboardGrid per entry ── */}
            {ADMIN_SECTIONS.map((s) => (
                <div key={s.id} id={s.id} className="scroll-mt-12 min-h-64">
                    {s.tiles.length > 0 ? (
                        <DashboardGrid sections={[s]} />
                    ) : (
                        <div className="px-4 lg:container lg:mx-auto py-10">
                            <h1 className="text-2xl font-medium tracking-tighter mb-1">{s.title}</h1>
                            <p className="text-muted-foreground text-sm">No items yet.</p>
                        </div>
                    )}
                </div>
            ))}
        </div>
    );
}