'use client';
import { PanelRightClose, PanelRightOpen, Pause, Play, SlidersHorizontal } from 'lucide-react';
import Link from 'next/link';
import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
import { Hint } from '@/components/ui/hint';
import { Sheet } from '@/components/ui/sheet';
import { cn } from '@/lib/cn';

/*
  Terminal layout primitives (density-aware through the CSS variables in globals.css):
  - TerminalLayout: desktop 3-pane (filter rail 15rem sticky · main · inspector 22rem sticky, collapsible, state in localStorage);
    mobile: filters and inspector in bottom sheets.
  - FilterSheet: the mobile bottom sheet used for filters (also usable standalone).
  - DataStrip: horizontal live counters with definition tooltips.
  - Ticker: scrolling strip of recent events, pausable, reduced-motion aware.
  - SectionNav: sticky in-page anchor nav with the active section highlighted.
*/

const INSPECTOR_KEY = 'aia-inspector';

export function TerminalLayout({
  filters,
  children,
  inspector,
  filtersTitle = 'Filters',
  inspectorTitle = 'Inspector',
  storageKey = INSPECTOR_KEY,
  className,
  filterCount,
  wide = true,
}: {
  filters?: ReactNode;
  children: ReactNode;
  inspector?: ReactNode;
  filtersTitle?: string;
  inspectorTitle?: string;
  /** localStorage key for the inspector collapsed state (per page when needed). */
  storageKey?: string;
  className?: string;
  /** Number of active filters, shown on the mobile filter button. */
  filterCount?: number;
  wide?: boolean;
}) {
  const [collapsed, setCollapsed] = useState(false);
  const [ready, setReady] = useState(false);
  const [filtersOpen, setFiltersOpen] = useState(false);
  const [inspectorOpen, setInspectorOpen] = useState(false);
  useEffect(() => {
    try {
      setCollapsed(localStorage.getItem(storageKey) === 'collapsed');
    } catch {
      /* ignore */
    }
    setReady(true);
  }, [storageKey]);
  const toggle = useCallback(() => {
    setCollapsed((c) => {
      try {
        localStorage.setItem(storageKey, c ? 'open' : 'collapsed');
      } catch {
        /* ignore */
      }
      return !c;
    });
  }, [storageKey]);
  const showInspector = !!inspector && (!ready || !collapsed);
  return (
    <div className={cn('container-x mx-auto w-full', wide ? 'max-w-[1600px]' : 'max-w-[1280px]', className)}>
      {/* mobile toolbar */}
      {(filters || inspector) && (
        <div className="flex items-center gap-2 border-b border-rule py-2 lg:hidden">
          {filters && (
            <button type="button" onClick={() => setFiltersOpen(true)} className="inline-flex h-10 items-center gap-1.5 border border-rule px-3 text-sm text-ink-2 hover:border-rule-strong hover:text-ink" aria-haspopup="dialog" data-open-filters>
              <SlidersHorizontal className="size-4" aria-hidden /> {filtersTitle}
              {filterCount ? <span className="tnum ml-1 rounded-sm bg-accent-soft px-1.5 text-xs text-accent">{filterCount}</span> : null}
            </button>
          )}
          {inspector && (
            <button type="button" onClick={() => setInspectorOpen(true)} className="ml-auto inline-flex h-10 items-center gap-1.5 border border-rule px-3 text-sm text-ink-2 hover:border-rule-strong hover:text-ink" aria-haspopup="dialog" data-open-inspector>
              <PanelRightOpen className="size-4" aria-hidden /> {inspectorTitle}
            </button>
          )}
        </div>
      )}
      <div className={cn('lg:grid lg:gap-8', filters && showInspector ? 'lg:grid-cols-[15rem_minmax(0,1fr)_22rem]' : filters ? 'lg:grid-cols-[15rem_minmax(0,1fr)]' : showInspector ? 'lg:grid-cols-[minmax(0,1fr)_22rem]' : '')}>
        {filters && (
          <aside className="terminal-rail hidden lg:block" aria-label={filtersTitle}>
            <p className="eyebrow mb-2">{filtersTitle}</p>
            {filters}
          </aside>
        )}
        <div className="min-w-0">
          {inspector && (
            <div className="hidden justify-end lg:flex">
              <button type="button" onClick={toggle} className="-mt-1 mb-1 inline-flex h-8 items-center gap-1 text-xs text-ink-3 hover:text-ink" aria-pressed={!collapsed} aria-label={collapsed ? `Show ${inspectorTitle.toLowerCase()}` : `Hide ${inspectorTitle.toLowerCase()}`} data-toggle-inspector>
                {collapsed ? <PanelRightOpen className="size-3.5" aria-hidden /> : <PanelRightClose className="size-3.5" aria-hidden />}
                {collapsed ? inspectorTitle : 'Hide'}
              </button>
            </div>
          )}
          {children}
        </div>
        {showInspector && (
          <aside className="terminal-rail hidden lg:block" aria-label={inspectorTitle}>
            <p className="eyebrow mb-2">{inspectorTitle}</p>
            {inspector}
          </aside>
        )}
      </div>
      {filters && (
        <FilterSheet open={filtersOpen} onClose={() => setFiltersOpen(false)} title={filtersTitle}>
          {filters}
        </FilterSheet>
      )}
      {inspector && (
        <Sheet open={inspectorOpen} onClose={() => setInspectorOpen(false)} side="bottom" eyebrow="Inspector" title={inspectorTitle}>
          {inspector}
        </Sheet>
      )}
    </div>
  );
}

/** Mobile bottom sheet for filters; the filter form is server-rendered by the page and simply moved inside. */
export function FilterSheet({ open, onClose, title = 'Filters', children }: { open: boolean; onClose: () => void; title?: string; children: ReactNode }) {
  return (
    <Sheet open={open} onClose={onClose} side="bottom" eyebrow="Refine" title={title} footer={<button type="button" onClick={onClose} className="h-11 w-full bg-ink text-sm font-medium text-canvas">Done</button>}>
      {children}
    </Sheet>
  );
}

/* ---------------------------------------------------------------------------------------------------------- DataStrip */
export type StripItem = { label: string; value: ReactNode; hint?: ReactNode; definition?: string; href?: string; delta?: { value: string; tone?: 'positive' | 'negative' | 'neutral' }; live?: boolean };

/** Horizontal live counters strip: label + big tabular number + optional delta and a "How counted" definition tooltip. */
export function DataStrip({ items, className, dense = false }: { items: StripItem[]; className?: string; dense?: boolean }) {
  return (
    <div className={cn('no-scrollbar -mx-4 overflow-x-auto px-4 md:mx-0 md:px-0', className)} role="list" aria-label="Live counters">
      <div className={cn('flex min-w-max border-y border-rule md:grid md:min-w-0', items.length > 4 ? 'md:grid-cols-4 xl:grid-cols-[repeat(var(--n),minmax(0,1fr))]' : 'md:grid-cols-[repeat(var(--n),minmax(0,1fr))]')} style={{ ['--n' as string]: items.length }}>
        {items.map((it, i) => {
          const body = (
            <>
              <p className="eyebrow flex flex-wrap items-center gap-0.5 leading-tight">
                {it.live && <span className="dot mr-1" aria-hidden />}
                {it.label}
                {it.definition && <Hint text={it.definition} align={i >= items.length - 2 ? 'right' : 'left'} />}
              </p>
              <p className={cn('tnum mt-0.5 font-semibold leading-none tracking-tight text-ink', dense ? 'text-[20px]' : 'text-[22px] md:text-[26px]')}>{it.value}</p>
              {(it.delta || it.hint) && (
                <p className="mt-1 flex items-center gap-1.5 whitespace-nowrap text-[11px] text-ink-3">
                  {it.delta && <span className={cn('tnum font-medium', it.delta.tone === 'positive' && 'text-positive', it.delta.tone === 'negative' && 'text-danger', (!it.delta.tone || it.delta.tone === 'neutral') && 'text-accent-2')}>{it.delta.value}</span>}
                  {it.hint}
                </p>
              )}
            </>
          );
          const cls = cn('block min-w-[9rem] border-r border-rule px-3 py-2.5 last:border-r-0 md:min-w-0 md:[&:nth-child(4n)]:border-r-0 md:[&:nth-child(4n+1)]:pl-0 md:[&:nth-child(n+5)]:border-t xl:[&:nth-child(4n)]:border-r xl:[&:nth-child(4n+1)]:pl-3 xl:[&:nth-child(n+5)]:border-t-0 xl:first:pl-0 xl:last:border-r-0', items.length <= 4 && 'md:first:pl-0', it.href && 'hover:bg-surface-2');
          return it.href ? (
            <Link key={it.label} href={it.href} className={cls} role="listitem">
              {body}
            </Link>
          ) : (
            <div key={it.label} className={cls} role="listitem">
              {body}
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------------------------------------------------- Ticker */
export type TickerItem = { id: string; label: ReactNode; href?: string; tone?: 'new' | 'price' | 'warn' | 'danger' | 'bench' | 'neutral'; meta?: ReactNode };
const TICK_TONE: Record<NonNullable<TickerItem['tone']>, string> = { new: 'text-positive', price: 'text-accent-2', warn: 'text-warning', danger: 'text-danger', bench: 'text-type-benchmark', neutral: 'text-ink-3' };

/** Horizontal scrolling strip of recent events (duplicated track for a seamless loop). Pausable; static + scrollable under reduced motion. */
export function Ticker({ items, className, speed = 60, label = 'Live' }: { items: TickerItem[]; className?: string; /** seconds per loop */ speed?: number; label?: string }) {
  const [paused, setPaused] = useState(false);
  const [reduced, setReduced] = useState(false);
  useEffect(() => {
    const m = window.matchMedia('(prefers-reduced-motion: reduce)');
    setReduced(m.matches);
    const on = () => setReduced(m.matches);
    m.addEventListener('change', on);
    return () => m.removeEventListener('change', on);
  }, []);
  if (!items.length) return null;
  const track = (dup: boolean) => (
    <ul className={cn('flex shrink-0 items-center gap-10 whitespace-nowrap text-xs', dup && 'aria-hidden')} aria-hidden={dup || undefined}>
      {items.map((it) => (
        <li key={`${dup ? 'd' : 'o'}-${it.id}`} className="flex items-center gap-2">
          <span className={cn('inline-block size-1.5 rounded-full bg-current', TICK_TONE[it.tone ?? 'neutral'])} aria-hidden />
          {it.href ? (
            <Link href={it.href} className="text-ink-2 hover:text-ink hover:underline" tabIndex={dup ? -1 : 0}>
              {it.label}
            </Link>
          ) : (
            <span className="text-ink-2">{it.label}</span>
          )}
          {it.meta && <span className="mono text-[10px] text-ink-3">{it.meta}</span>}
        </li>
      ))}
    </ul>
  );
  return (
    <div className={cn('flex items-center gap-3 border-y border-rule py-1.5', className)} aria-label={label} data-ticker>
      <span className="eyebrow flex shrink-0 items-center gap-1.5">
        <span className={cn('dot', !paused && !reduced && 'pulse')} aria-hidden /> {label}
      </span>
      <div className={cn('ticker min-w-0 flex-1', reduced && 'no-scrollbar overflow-x-auto')} data-paused={paused || reduced}>
        <div className={cn(reduced ? 'flex w-max gap-10' : 'ticker-track')} style={{ ['--ticker-duration' as string]: `${Math.max(20, speed * Math.max(1, items.length / 8))}s` }}>
          {track(false)}
          {!reduced && track(true)}
        </div>
      </div>
      {!reduced && (
        <button type="button" onClick={() => setPaused((p) => !p)} className="flex size-8 shrink-0 items-center justify-center rounded-sm text-ink-3 hover:bg-surface-2 hover:text-ink" aria-pressed={paused} aria-label={paused ? 'Resume ticker' : 'Pause ticker'}>
          {paused ? <Play className="size-3.5" aria-hidden /> : <Pause className="size-3.5" aria-hidden />}
        </button>
      )}
    </div>
  );
}

/* --------------------------------------------------------------------------------------------------------- SectionNav */
/** Sticky in-page anchor nav; the section currently in view is highlighted (IntersectionObserver). */
export function SectionNav({ items, className }: { items: { id: string; label: string }[]; className?: string }) {
  const [activeId, setActiveId] = useState<string | null>(null);
  const seen = useRef<Map<string, boolean>>(new Map());
  useEffect(() => {
    const els = items.map((i) => document.getElementById(i.id)).filter((x): x is HTMLElement => !!x);
    if (!els.length) return;
    const io = new IntersectionObserver(
      (entries) => {
        for (const e of entries) seen.current.set(e.target.id, e.isIntersecting);
        const first = items.find((i) => seen.current.get(i.id));
        if (first) setActiveId(first.id);
      },
      { rootMargin: '-30% 0px -60% 0px', threshold: 0 },
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [items]);
  return (
    <nav aria-label="On this page" className={cn('no-scrollbar sticky top-[var(--header-h)] z-30 -mx-4 overflow-x-auto border-b border-rule bg-canvas/90 px-4 backdrop-blur-md md:mx-0 md:px-0', className)} data-section-nav>
      <ul className="flex min-w-max gap-1">
        {items.map((i) => (
          <li key={i.id}>
            <a href={`#${i.id}`} aria-current={activeId === i.id ? 'location' : undefined} className={cn('flex h-10 items-center border-b-2 px-2.5 text-[13px] whitespace-nowrap', activeId === i.id ? 'border-ink text-ink font-medium' : 'border-transparent text-ink-2 hover:text-ink')}>
              {i.label}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}