"use client";

import { Suspense, useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { GitBranch, GitFork, Network, Share2, Users } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { CrossPedigreeProvider } from "./CrossPedigreeContext";
import { CrossingProjectTab } from "./components/CrossingProjectTab";
import { CrossEntityTab } from "./components/CrossEntityTab";
import { CrossParentTab } from "./components/CrossParentTab";
import { PedigreeEdgeTab } from "./components/PedigreeEdgeTab";
import { PedigreeNodeTab } from "./components/PedigreeNodeTab";

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

  useEffect(() => {
    const nextTab = searchParams.get("tab");
    if (
      nextTab === "projects"
      || nextTab === "crosses"
      || nextTab === "parents"
      || nextTab === "pedigree-nodes"
      || nextTab === "pedigree-edges"
    ) {
      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="projects" className="gap-2">
          <Network className="h-4 w-4" />
          CrossingProject
        </TabsTrigger>
        <TabsTrigger value="crosses" className="gap-2">
          <GitFork className="h-4 w-4" />
          Cross 杂交
        </TabsTrigger>
        <TabsTrigger value="parents" className="gap-2">
          <Users className="h-4 w-4" />
          Cross Parent 亲本
        </TabsTrigger>
        <TabsTrigger value="pedigree-nodes" className="gap-2">
          <Share2 className="h-4 w-4" />
          Pedigree Node
        </TabsTrigger>
        <TabsTrigger value="pedigree-edges" className="gap-2">
          <GitBranch className="h-4 w-4" />
          Pedigree Edge
        </TabsTrigger>
      </TabsList>

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

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

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

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

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

export default function CrossPedigreePage() {
  return (
    <CrossPedigreeProvider>
      <Suspense fallback={null}>
        <CrossPedigreePageContent />
      </Suspense>
    </CrossPedigreeProvider>
  );
}
