"use client";

import { Suspense, useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { BookOpen, Layers } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Skeleton } from "@/components/ui/skeleton";
import { ReferenceSetTab } from "./components/ReferenceSetTab";
import { ReferenceTab } from "./components/ReferenceTab";

function ReferenceSetPageContent() {
  const searchParams = useSearchParams();
  const [tab, setTab] = useState("reference-sets");

  useEffect(() => {
    const nextTab = searchParams.get("tab");
    if (nextTab === "references" || nextTab === "reference-sets") {
      setTab(nextTab);
    }
  }, [searchParams]);

  return (
    <Tabs value={tab} onValueChange={setTab} className="flex min-h-full flex-col gap-4">
      <TabsList className="w-full justify-start overflow-x-auto rounded-lg border bg-white p-1 dark:border-slate-800 dark:bg-slate-950 sm:w-fit">
        <TabsTrigger value="reference-sets" className="gap-2">
          <Layers className="h-4 w-4" />
          ReferenceSet
        </TabsTrigger>
        <TabsTrigger value="references" className="gap-2">
          <BookOpen className="h-4 w-4" />
          Reference
        </TabsTrigger>
      </TabsList>

      {tab === "reference-sets" ? (
        <TabsContent value="reference-sets" className="mt-0 min-h-0 flex-1">
          <ReferenceSetTab />
        </TabsContent>
      ) : null}

      {tab === "references" ? (
        <TabsContent value="references" className="mt-0 min-h-0 flex-1">
          <ReferenceTab />
        </TabsContent>
      ) : null}
    </Tabs>
  );
}

function PageFallback() {
  return <Skeleton className="h-96 w-full rounded-xl" />;
}

export default function ReferenceSetPage() {
  return (
    <Suspense fallback={<PageFallback />}>
      <ReferenceSetPageContent />
    </Suspense>
  );
}
