'use client';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { createContext, type ReactNode, useContext, useEffect, useId, useRef } from 'react';
import { cn } from '@/lib/cn';

export type TabDef = { id: string; label: string; count?: number | null; hidden?: boolean };

const Ctx = createContext<{ active: string; uid: string }>({ active: '', uid: '' });

/**
 * URL-driven tabs (`?tab=<id>`); all panels are rendered server-side, only the active one is shown. Arrow keys move.
 * The strip scrolls horizontally on mobile.
 */
export function Tabs({ tabs, defaultTab, children, param = 'tab', className, sticky = false }: { tabs: TabDef[]; defaultTab?: string; children: ReactNode; param?: string; className?: string; sticky?: boolean }) {
  const visible = tabs.filter((t) => !t.hidden);
  const first = defaultTab ?? visible[0]?.id ?? '';
  const router = useRouter();
  const pathname = usePathname();
  const sp = useSearchParams();
  const stripRef = useRef<HTMLDivElement>(null);
  const uid = useId();
  const requested = sp.get(param) ?? '';
  const active = visible.some((t) => t.id === requested) ? requested : first;

  const select = (id: string) => {
    const next = new URLSearchParams(sp.toString());
    if (id === first) next.delete(param);
    else next.set(param, id);
    const q = next.toString();
    router.replace(q ? `${pathname}?${q}` : pathname, { scroll: false });
  };

  useEffect(() => {
    // Horizontal reveal of the active tab only — never scrollIntoView (it scrolls the page vertically on load, spec: pages open at the top).
    const strip = stripRef.current;
    const el = strip?.querySelector<HTMLElement>(`[data-tab="${active}"]`);
    if (!strip || !el) return;
    const left = el.offsetLeft - (strip.clientWidth - el.offsetWidth) / 2;
    if (Math.abs(strip.scrollLeft - left) > 4) strip.scrollTo({ left: Math.max(0, left) });
  }, [active]);

  const onKey = (e: React.KeyboardEvent) => {
    const idx = visible.findIndex((t) => t.id === active);
    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
      e.preventDefault();
      const n = visible[(idx + (e.key === 'ArrowRight' ? 1 : visible.length - 1)) % visible.length];
      if (n) {
        select(n.id);
        stripRef.current?.querySelector<HTMLElement>(`[data-tab="${n.id}"]`)?.focus();
      }
    }
  };

  return (
    <div className={className} data-active-tab={active}>
      <div className={cn(sticky && 'sticky top-[var(--header-h)] z-30 -mx-4 bg-canvas/95 px-4 backdrop-blur-md md:mx-0 md:px-0')}>
        <div ref={stripRef} role="tablist" aria-label="Sections" onKeyDown={onKey} className="no-scrollbar -mx-4 flex overflow-x-auto border-b border-rule px-4 md:mx-0 md:px-0">
          {visible.map((t) => {
            const on = t.id === active;
            return (
              <button
                key={t.id}
                type="button"
                role="tab"
                id={`${uid}-tab-${t.id}`}
                data-tab={t.id}
                aria-selected={on}
                aria-controls={`${uid}-panel-${t.id}`}
                tabIndex={on ? 0 : -1}
                onClick={() => select(t.id)}
                className={cn('-mb-px flex h-11 shrink-0 items-center gap-1.5 whitespace-nowrap border-b-2 px-3 text-sm transition-colors first:pl-0', on ? 'border-ink font-medium text-ink' : 'border-transparent text-ink-2 hover:text-ink')}
              >
                {t.label}
                {t.count !== undefined && t.count !== null && <span className={cn('tnum text-[11px]', on ? 'text-ink-2' : 'text-ink-3')}>{t.count}</span>}
              </button>
            );
          })}
        </div>
      </div>
      <Ctx.Provider value={{ active, uid }}>{children}</Ctx.Provider>
    </div>
  );
}

export function TabPanel({ id, children, className }: { id: string; children: ReactNode; className?: string }) {
  const { active, uid } = useContext(Ctx);
  const on = active === id;
  return (
    <div role="tabpanel" id={`${uid}-panel-${id}`} aria-labelledby={`${uid}-tab-${id}`} hidden={!on} className={cn('pt-5 md:pt-6', className)}>
      {children}
    </div>
  );
}

/** Simple segmented control (not URL-bound) for local state like windows/kinds. */
export function Segmented<T extends string>({ options, value, onChange, className, size = 'md', ariaLabel }: { options: { id: T; label: string }[]; value: T; onChange: (v: T) => void; className?: string; size?: 'sm' | 'md'; ariaLabel?: string }) {
  return (
    <div role="radiogroup" aria-label={ariaLabel} className={cn('no-scrollbar inline-flex max-w-full overflow-x-auto rounded-[var(--radius)] border border-rule bg-surface p-0.5', className)}>
      {options.map((o) => {
        const on = o.id === value;
        return (
          <button key={o.id} type="button" role="radio" aria-checked={on} onClick={() => onChange(o.id)} className={cn('shrink-0 rounded-[3px] px-2.5 whitespace-nowrap transition-colors', size === 'sm' ? 'h-8 text-xs' : 'h-9 text-[13px]', on ? 'bg-ink text-canvas' : 'text-ink-2 hover:text-ink')}>
            {o.label}
          </button>
        );
      })}
    </div>
  );
}