"use client";

import { GitBranch, Layers } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import PipelinePage from "@/components/pipeline/pipeline-page";
import StagesPage from "@/components/pipeline/stages-page";
import { cn } from "@/lib/utils";

const SECTIONS = ["pipelines", "stages"] as const;
type Section = (typeof SECTIONS)[number];

/** Must match `tab` values on Settings page. */
const SETTINGS_TABS = [
  "profile",
  "pipelines",
  "pipeline-stages",
  "role-permissions",
  "extra-content",
] as const;
function settingsTabToSection(tab: string): Section {
  return tab === "pipeline-stages" ? "stages" : "pipelines";
}

function sectionToSettingsTab(section: Section): "pipelines" | "pipeline-stages" {
  return section === "stages" ? "pipeline-stages" : "pipelines";
}

/** Overrides parent Settings vertical-tab group styles (w-full / flex-col bleed). */
const segmentListClass =
  "inline-flex !h-10 !w-auto !max-w-full !flex-row !flex-nowrap gap-1 self-start rounded-xl border border-black/6 bg-white/70 p-1 shadow-[0px_2px_12px_0px_rgba(0,0,0,0.06)] backdrop-blur-sm";

const segmentTriggerClass = cn(
  "!flex-none !w-auto min-w-[7.25rem] gap-2 rounded-lg px-4 py-2",
  "text-[13px] font-medium font-['Lexend_Deca'] text-[#575a62]",
  "transition-all duration-150",
  "hover:text-[#101828] hover:bg-black/[0.03]",
  "data-[state=active]:bg-[#1d1d39] data-[state=active]:text-white data-[state=active]:shadow-sm",
  "data-[state=active]:border-transparent data-[state=active]:[&_svg]:text-white",
  "group-data-[orientation=vertical]/tabs:!w-auto group-data-[orientation=vertical]/tabs:!flex-none",
);

interface PipelineSettingsTabProps {
  tab: string;
  setTab: (tab: string) => void;
}

export function PipelineSettingsTab({ tab, setTab }: PipelineSettingsTabProps) {
  const section = settingsTabToSection(
    tab === "pipelines" || tab === "pipeline-stages" ? tab : "pipelines",
  );

  const handleSectionChange = (next: Section) => {
    setTab(sectionToSettingsTab(next));
  };

  return (
    <Tabs
      value={section}
      onValueChange={(v) => handleSectionChange(v as Section)}
      className="gap-5"
    >
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex items-center gap-3 min-w-0">
          <div className="h-10 w-10 shrink-0 rounded-xl bg-[#6C63FF]/10 flex items-center justify-center text-[#6C63FF]">
            <GitBranch size={18} strokeWidth={2.25} />
          </div>
          <div className="min-w-0">
            <h2 className="text-[18px] font-extrabold text-gray-900 font-['Lexend'] tracking-tight leading-tight">
              Pipeline configuration
            </h2>
            <p className="text-[12px] text-gray-500 mt-0.5">
              Manage sales pipelines and the stages deals move through.
            </p>
          </div>
        </div>

        <TabsList className={segmentListClass}>
          <TabsTrigger value="pipelines" className={segmentTriggerClass}>
            <GitBranch size={15} className="opacity-80" />
            Pipelines
          </TabsTrigger>
          <TabsTrigger value="stages" className={segmentTriggerClass}>
            <Layers size={15} className="opacity-80" />
            Stages
          </TabsTrigger>
        </TabsList>
      </div>

      <TabsContent value="pipelines" className="mt-0 min-h-0 outline-none">
        <PipelinePage embedded />
      </TabsContent>
      <TabsContent value="stages" className="mt-0 min-h-0 outline-none">
        <StagesPage embedded />
      </TabsContent>
    </Tabs>
  );
}