"use client";

import { Suspense, useState } from "react";
import { ClipboardList, TestTube } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Skeleton } from "@/components/ui/skeleton";
import { PlateTab } from "./components/PlateTab";
import { SampleTab } from "./components/SampleTab";

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

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

  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="plates" className="gap-2">
          <ClipboardList className="h-4 w-4" />
          样本板
        </TabsTrigger>
        <TabsTrigger value="samples" className="gap-2">
          <TestTube className="h-4 w-4" />
          样本
        </TabsTrigger>
      </TabsList>

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

      {tab === "samples" ? (
        <TabsContent value="samples" className="mt-0 min-h-0 flex-1">
          <Suspense fallback={<SampleTabFallback />}>
            <SampleTab />
          </Suspense>
        </TabsContent>
      ) : null}
    </Tabs>
  );
}
