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

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

/**
 * Accessible tabs driven by the URL: `?tab=<id>` (default) — or `#<id>` when `mode="hash"`. All panels are rendered
 * server-side (SEO: one canonical URL carries the whole page); only the visible one is displayed. Arrow keys move focus.
 * The tab strip scrolls horizontally on mobile with hidden scrollbar.
 */
export function Tabs({ tabs, defaultTab, children, mode = 'search', param = 'tab', className }: { tabs: TabDef[]; defaultTab?: string; children: ReactNode; mode?: 'search' | 'hash'; param?: string; className?: string }) {
  const visible = tabs.filter((t) => !t.hidden);
  const first = defaultTab ?? visible[0]?.id ?? '';
  const router = useRouter();
  const pathname = usePathname();
  const sp = useSearchParams();
  const [hash, setHash] = useState<string>('');
  const stripRef = useRef<HTMLDivElement>(null);
  const uid = useId();

  useEffect(() => {
    if (mode !== 'hash') return;
    const read = () => setHash(window.location.hash.replace(/^#/, ''));
    read();
    window.addEventListener('hashchange', read);
    return () => window.removeEventListener('hashchange', read);
  }, [mode]);

  const requested = mode === 'hash' ? hash : sp.get(param) ?? '';
  const active = visible.some((t) => t.id === requested) ? requested : first;

  const select = (id: string) => {
    if (mode === 'hash') {
      window.history.replaceState(null, '', id === first ? pathname : `#${id}`);
      setHash(id);
    } else {
      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(() => {
    const el = stripRef.current?.querySelector<HTMLElement>(`[data-tab="${active}"]`);
    el?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
  }, [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 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 border-b-2 px-3 text-sm whitespace-nowrap transition-colors first:pl-0', on ? 'border-ink text-ink font-medium' : '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 data-tabs-panels="" className="[&>[data-tab-panel]]:hidden [&>[data-tab-panel][data-active=true]]:block">
        <TabsActive active={active} uid={uid}>
          {children}
        </TabsActive>
      </div>
    </div>
  );
}

import { createContext, useContext } from 'react';
const Ctx = createContext<{ active: string; uid: string }>({ active: '', uid: '' });
function TabsActive({ active, uid, children }: { active: string; uid: string; children: ReactNode }) {
  return <Ctx.Provider value={{ active, uid }}>{children}</Ctx.Provider>;
}

/** A panel inside <Tabs>. Always in the DOM; shown when its id is active. */
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}`} data-tab-panel="" data-active={on} hidden={!on} className={cn('pt-6', className)}>
      {children}
    </div>
  );
}