"use client";

import { Suspense, useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { Binary, Dna } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Skeleton } from "@/components/ui/skeleton";
import { AlleleCallTab } from "./components/AlleleCallTab";
import { CallSetTab } from "./components/CallSetTab";

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

export default function CallSetPage() {
  const searchParams = useSearchParams();
  const [tab, setTab] = useState("callsets");

  useEffect(() => {
    const requested = searchParams.get("tab");
    if (requested === "allele-calls") {
      setTab("allele-calls");
    }
  }, [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="callsets" className="gap-2">
          <Binary className="h-4 w-4" />
          CallSet
        </TabsTrigger>
        <TabsTrigger value="allele-calls" className="gap-2">
          <Dna className="h-4 w-4" />
          allele_call
        </TabsTrigger>
      </TabsList>

      {tab === "callsets" ? (
        <TabsContent value="callsets" className="mt-0 min-h-0 flex-1">
          <Suspense fallback={<TabFallback />}>
            <CallSetTab />
          </Suspense>
        </TabsContent>
      ) : null}

      {tab === "allele-calls" ? (
        <TabsContent value="allele-calls" className="mt-0 min-h-0 flex-1">
          <Suspense fallback={<TabFallback />}>
            <AlleleCallTab />
          </Suspense>
        </TabsContent>
      ) : null}
    </Tabs>
  );
}