"use client";

import { Suspense, useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { ArrowLeftRight, Package } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { SeedLotTab } from "./components/SeedLotTab";
import { SeedLotTransactionTab } from "./components/SeedLotTransactionTab";

function SeedLotPageContent() {
  const searchParams = useSearchParams();
  const [tab, setTab] = useState("lots");

  useEffect(() => {
    const nextTab = searchParams.get("tab");
    if (nextTab === "lots" || nextTab === "transactions") {
      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="lots" className="gap-2">
          <Package className="h-4 w-4" />
          批次列表
        </TabsTrigger>
        <TabsTrigger value="transactions" className="gap-2">
          <ArrowLeftRight className="h-4 w-4" />
          库存交易
        </TabsTrigger>
      </TabsList>

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

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

export default function SeedLotPage() {
  return (
    <Suspense fallback={<div className="p-6 text-sm text-slate-500">加载 Seed Lot 页…</div>}>
      <SeedLotPageContent />
    </Suspense>
  );
}
