"use client";
import * as React from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { CodeBlock, type CodeLang } from "@/components/ui/code-block";
import { cn } from "@/lib/utils";

export interface CodeTab {
  /** Tab label, e.g. "cURL". Also used as the tab value. */
  label: string;
  lang: CodeLang;
  code: string;
  title?: string;
}

const STORAGE_KEY = "fetcha-docs-lang";
const EVENT = "fetcha-docs-lang-change";

/**
 * Language switcher for code samples. The selected language is remembered in localStorage
 * and synchronised across every CodeTabs instance on the page.
 */
export function CodeTabs({ tabs, className, maxHeight, lineNumbers }: { tabs: CodeTab[]; className?: string; maxHeight?: number | string; lineNumbers?: boolean }) {
  const labels = React.useMemo(() => tabs.map((t) => t.label), [tabs]);
  const [value, setValue] = React.useState(labels[0] ?? "");

  React.useEffect(() => {
    const apply = (stored: string | null) => {
      if (stored && labels.includes(stored)) setValue(stored);
    };
    try {
      apply(window.localStorage.getItem(STORAGE_KEY));
    } catch {}
    const onChange = (e: Event) => apply((e as CustomEvent<string>).detail);
    window.addEventListener(EVENT, onChange);
    return () => window.removeEventListener(EVENT, onChange);
  }, [labels]);

  const onValueChange = (v: string) => {
    setValue(v);
    try {
      window.localStorage.setItem(STORAGE_KEY, v);
    } catch {}
    window.dispatchEvent(new CustomEvent(EVENT, { detail: v }));
  };

  if (!tabs.length) return null;

  return (
    <Tabs value={value} onValueChange={onValueChange} className={cn("my-5", className)}>
      <TabsList variant="underline" aria-label="Code language" className="gap-3">
        {tabs.map((t) => (
          <TabsTrigger key={t.label} value={t.label} className="text-[12.5px]">
            {t.label}
          </TabsTrigger>
        ))}
      </TabsList>
      {tabs.map((t) => (
        <TabsContent key={t.label} value={t.label} className="mt-3">
          <CodeBlock code={t.code} lang={t.lang} title={t.title} maxHeight={maxHeight} lineNumbers={lineNumbers} />
        </TabsContent>
      ))}
    </Tabs>
  );
}