"use client";

import Link from "next/link";
import { createContext, useContext, useId, useState, type KeyboardEvent, type ReactNode } from "react";
import { cn } from "./cn";

interface TabsCtx {
  value: string;
  setValue: (v: string) => void;
  id: string;
}
const Ctx = createContext<TabsCtx | null>(null);

/** Underline tabs — controlled or uncontrolled. Arrow keys move focus/selection. */
export function Tabs({ value, defaultValue, onValueChange, children, className }: { value?: string; defaultValue?: string; onValueChange?: (v: string) => void; children: ReactNode; className?: string }) {
  const [inner, setInner] = useState(defaultValue ?? "");
  const id = useId();
  const v = value ?? inner;
  const set = (nv: string) => {
    setInner(nv);
    onValueChange?.(nv);
  };
  return (
    <Ctx.Provider value={{ value: v, setValue: set, id }}>
      <div className={className}>{children}</div>
    </Ctx.Provider>
  );
}

export function TabList({ children, className, label }: { children: ReactNode; className?: string; label?: string }) {
  const onKey = (e: KeyboardEvent<HTMLDivElement>) => {
    if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
    const tabs = Array.from(e.currentTarget.querySelectorAll<HTMLElement>('[role="tab"]'));
    const i = tabs.findIndex((t) => t === document.activeElement);
    if (i < 0) return;
    const n = tabs[(i + (e.key === "ArrowRight" ? 1 : tabs.length - 1)) % tabs.length];
    n?.focus();
    n?.click();
    e.preventDefault();
  };
  return (
    <div role="tablist" aria-label={label} onKeyDown={onKey} className={cn("-mx-3 flex gap-0 overflow-x-auto border-b border-hair px-3 no-scrollbar sm:mx-0 sm:px-0", className)}>
      {children}
    </div>
  );
}

export function Tab({ value, children, count, className }: { value: string; children: ReactNode; count?: number | null; className?: string }) {
  const ctx = useContext(Ctx);
  if (!ctx) throw new Error("Tab outside Tabs");
  const active = ctx.value === value;
  return (
    <button
      type="button"
      role="tab"
      id={`${ctx.id}-tab-${value}`}
      aria-selected={active}
      aria-controls={`${ctx.id}-panel-${value}`}
      tabIndex={active ? 0 : -1}
      onClick={() => ctx.setValue(value)}
      className={cn(
        "-mb-px inline-flex h-10 shrink-0 items-center gap-1.5 whitespace-nowrap border-b-2 px-3 text-[13px] font-medium transition-colors first:pl-0",
        active ? "border-ink text-ink" : "border-transparent text-ink-3 hover:text-ink",
        className,
      )}
    >
      {children}
      {count !== undefined && count !== null && <span className="figure text-[11px] text-ink-3">{count}</span>}
    </button>
  );
}

export function TabPanel({ value, children, className }: { value: string; children: ReactNode; className?: string }) {
  const ctx = useContext(Ctx);
  if (!ctx) throw new Error("TabPanel outside Tabs");
  if (ctx.value !== value) return null;
  return (
    <div role="tabpanel" id={`${ctx.id}-panel-${value}`} aria-labelledby={`${ctx.id}-tab-${value}`} className={cn("pt-3", className)}>
      {children}
    </div>
  );
}

/** Link-based tabs (server-friendly; state lives in the URL). */
export function LinkTabs({ items, className }: { items: Array<{ href: string; label: ReactNode; active: boolean; count?: number | null }>; className?: string }) {
  return (
    <nav className={cn("-mx-3 flex gap-0 overflow-x-auto border-b border-hair px-3 no-scrollbar sm:mx-0 sm:px-0", className)}>
      {items.map((it, i) => (
        <Link
          key={i}
          href={it.href}
          aria-current={it.active ? "page" : undefined}
          scroll={false}
          className={cn(
            "-mb-px inline-flex h-10 shrink-0 items-center gap-1.5 whitespace-nowrap border-b-2 px-3 text-[13px] font-medium transition-colors first:pl-0",
            it.active ? "border-ink text-ink" : "border-transparent text-ink-3 hover:text-ink",
          )}
        >
          {it.label}
          {it.count !== undefined && it.count !== null && <span className="figure text-[11px] text-ink-3">{it.count}</span>}
        </Link>
      ))}
    </nav>
  );
}