"use client";

import { Suspense, useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { GitBranch, Map, MapPin } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Skeleton } from "@/components/ui/skeleton";
import { GenomeMapTab } from "./components/GenomeMapTab";
import { LinkageGroupTab } from "./components/LinkageGroupTab";
import { MarkerPositionTab } from "./components/MarkerPositionTab";

function GenomeMapPageContent() {
  const searchParams = useSearchParams();
  const [tab, setTab] = useState("genome-maps");

  useEffect(() => {
    const nextTab = searchParams.get("tab");
    if (nextTab === "linkage-groups" || nextTab === "genome-maps" || nextTab === "marker-positions") {
      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="genome-maps" className="gap-2">
          <Map className="h-4 w-4" />
          GenomeMap
        </TabsTrigger>
        <TabsTrigger value="linkage-groups" className="gap-2">
          <GitBranch className="h-4 w-4" />
          Linkage Group
        </TabsTrigger>
        <TabsTrigger value="marker-positions" className="gap-2">
          <MapPin className="h-4 w-4" />
          Marker Position
        </TabsTrigger>
      </TabsList>

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

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

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

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

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