import * as Tabs from '@radix-ui/react-tabs';

<Tabs.Root defaultValue="overview">
  <Tabs.List aria-label="Settings sections">
    <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
    <Tabs.Trigger value="billing">Billing</Tabs.Trigger>
    <Tabs.Trigger value="team">Team</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="overview">…</Tabs.Content>
  <Tabs.Content value="billing">…</Tabs.Content>
  <Tabs.Content value="team">…</Tabs.Content>
</Tabs.Root>

import { createContext, useContext, useId, useState, KeyboardEvent } from 'react';

type Ctx = {
  value: string;
  setValue: (v: string) => void;
  baseId: string;
  registerTrigger: (v: string, el: HTMLButtonElement | null) => void;
};
const TabsCtx = createContext<Ctx | null>(null);
const useTabsCtx = () => {
  const c = useContext(TabsCtx);
  if (!c) throw new Error('Tabs.* must be inside <Tabs>');
  return c;
};

export function Tabs({
  defaultValue,
  value: controlled,
  onValueChange,
  children,
}: {
  defaultValue?: string;
  value?: string;
  onValueChange?: (v: string) => void;
  children: React.ReactNode;
}) {
  const [internal, setInternal] = useState(defaultValue ?? '');
  const isControlled = controlled !== undefined;
  const value = isControlled ? controlled : internal;
  const setValue = (v: string) => {
    if (!isControlled) setInternal(v);
    onValueChange?.(v);
  };
  const baseId = useId();
  const triggersRef = useRef(new Map<string, HTMLButtonElement>());
  const registerTrigger = (v: string, el: HTMLButtonElement | null) => {
    if (el) triggersRef.current.set(v, el);
    else triggersRef.current.delete(v);
  };

  return (
    <TabsCtx.Provider value={{ value, setValue, baseId, registerTrigger }}>
      {children}
    </TabsCtx.Provider>
  );
}

Tabs.List = function TabList({ children, ...rest }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div role="tablist" {...rest}>
      {children}
    </div>
  );
};

Tabs.Trigger = function TabTrigger({
  value,
  children,
  ...rest
}: { value: string; children: React.ReactNode } & React.ButtonHTMLAttributes<HTMLButtonElement>) {
  const ctx = useTabsCtx();
  const ref = useRef<HTMLButtonElement>(null);
  useEffect(() => { ctx.registerTrigger(value, ref.current); }, [value]);

  const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
    const order = Array.from(ctx.triggersRef?.current.keys() ?? []); // simplified
    const idx = order.indexOf(value);
    if (e.key === 'ArrowRight') { ctx.setValue(order[(idx + 1) % order.length]); e.preventDefault(); }
    if (e.key === 'ArrowLeft')  { ctx.setValue(order[(idx - 1 + order.length) % order.length]); e.preventDefault(); }
    if (e.key === 'Home')       { ctx.setValue(order[0]); e.preventDefault(); }
    if (e.key === 'End')        { ctx.setValue(order.at(-1)!); e.preventDefault(); }
  };

  const selected = ctx.value === value;
  return (
    <button
      ref={ref}
      role="tab"
      aria-selected={selected}
      aria-controls={`${ctx.baseId}-panel-${value}`}
      id={`${ctx.baseId}-trigger-${value}`}
      tabIndex={selected ? 0 : -1}
      onClick={() => ctx.setValue(value)}
      onKeyDown={onKeyDown}
      {...rest}
    >
      {children}
    </button>
  );
};

Tabs.Panel = function TabPanel({
  value,
  children,
  ...rest
}: { value: string; children: React.ReactNode } & React.HTMLAttributes<HTMLDivElement>) {
  const ctx = useTabsCtx();
  if (ctx.value !== value) return null;
  return (
    <div
      role="tabpanel"
      id={`${ctx.baseId}-panel-${value}`}
      aria-labelledby={`${ctx.baseId}-trigger-${value}`}
      tabIndex={0}
      {...rest}
    >
      {children}
    </div>
  );
};