'use client';
import { Columns3, ScanSearch } from 'lucide-react';
import Link from 'next/link';
import { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { CompareButton } from '@/components/compare/compare-button';
import { TerminalLayout } from '@/components/layout/terminal';
import { StatusBadge } from '@/components/ui/badges';
import { EntityLink, QualityMark } from '@/components/ui/entity';
import { Sheet } from '@/components/ui/sheet';
import { WatchButton } from '@/components/watchlist/watch-button';
import { cn } from '@/lib/cn';
import { DASH, fmtDate, fmtInt, fmtParams, fmtTokens, fmtUsdPerM, num } from '@/lib/format';
import { routes, STATUS_LABELS } from '@/lib/site';
import type { ModelRow } from '@/lib/types';
import { ArtifactKindChip, IdentityBadge, OpennessChip } from './badges';
import { IDENTITY_LABEL, opennessLabel, rowPrice } from './shared';

/*
  /models terminal (client): shares the "inspected row" between the table (main pane) and the inspector (right pane / mobile sheet).
  The filter rail is a server-rendered node passed through untouched. Column visibility lives in localStorage['aia-models-cols'].
*/

type Ctx = { selected: ModelRow | null; select: (m: ModelRow | null, opts?: { sheet?: boolean }) => void };
const InspectCtx = createContext<Ctx>({ selected: null, select: () => undefined });

export const COLUMNS = [
  { key: 'params', label: 'Params', num: true },
  { key: 'context', label: 'Context', num: true },
  { key: 'openness', label: 'Openness' },
  { key: 'license', label: 'Licence' },
  { key: 'release', label: 'Released' },
  { key: 'price', label: 'Best price in / out', num: true },
  { key: 'quality', label: 'Data quality', num: true },
] as const;
type ColKey = (typeof COLUMNS)[number]['key'];
const COLS_KEY = 'aia-models-cols';
const DEFAULT_COLS: ColKey[] = ['params', 'context', 'openness', 'license', 'release', 'quality'];

export function ModelsTerminal({ filters, filterCount, children, items }: { filters: ReactNode; filterCount: number; children: ReactNode; items: ModelRow[] }) {
  const [selected, setSelected] = useState<ModelRow | null>(null);
  const [sheet, setSheet] = useState(false);
  const select = useCallback((m: ModelRow | null, opts?: { sheet?: boolean }) => {
    setSelected(m);
    if (m && opts?.sheet && typeof window !== 'undefined' && window.matchMedia('(max-width: 1023px)').matches) setSheet(true);
  }, []);
  // Default inspector target: the first row (so the pane is never empty when rows exist).
  const target = selected ?? items[0] ?? null;
  const value = useMemo(() => ({ selected, select }), [selected, select]);
  return (
    <InspectCtx.Provider value={value}>
      <TerminalLayout filters={filters} filtersTitle="Filters" filterCount={filterCount} inspector={<Inspector m={target} placeholder={!selected} />} inspectorTitle="Inspector" storageKey="aia-models-inspector">
        {children}
      </TerminalLayout>
      <Sheet open={sheet} onClose={() => setSheet(false)} side="bottom" eyebrow="Inspector" title={target?.name}>
        <Inspector m={target} placeholder={false} />
      </Sheet>
    </InspectCtx.Provider>
  );
}

/* ---------------------------------------------------------------------------------------------------------- inspector */

function Inspector({ m, placeholder }: { m: ModelRow | null; placeholder: boolean }) {
  if (!m) return <p className="text-sm text-ink-3">No row to inspect — adjust the filters.</p>;
  const a = m.attributes ?? {};
  const p = num(a.parameter_count);
  const ap = num(a.active_parameter_count);
  const facts: { k: string; v: ReactNode }[] = [
    { k: 'Parameters', v: p === null ? DASH : `${fmtParams(p)}${ap !== null && ap !== p ? ` · ${fmtParams(ap)} active` : ''}` },
    { k: 'Context', v: num(a.context_length) === null ? DASH : `${fmtTokens(a.context_length)} tokens` },
    { k: 'Max output', v: num(a.max_output_tokens) === null ? DASH : `${fmtTokens(a.max_output_tokens)} tokens` },
    { k: 'Openness', v: opennessLabel(a.openness) },
    { k: 'Licence', v: typeof a.license_key === 'string' ? a.license_key : typeof a.license === 'string' ? a.license : DASH },
    { k: 'Released', v: typeof a.release_date === 'string' ? fmtDate(a.release_date) : DASH },
    { k: 'Status', v: STATUS_LABELS[m.status] ?? m.status ?? DASH },
    { k: 'Knowledge cutoff', v: typeof a.knowledge_cutoff === 'string' ? fmtDate(a.knowledge_cutoff) : DASH },
    { k: 'Modalities', v: Array.isArray(a.modalities) && a.modalities.length ? (a.modalities as string[]).join(', ') : DASH },
    { k: 'Family', v: m.family ? <Link href={routes.family(m.family.slug)} className="link">{m.family.name}</Link> : typeof a.family === 'string' ? a.family : DASH },
    { k: 'Identity', v: m.identity_confidence ? IDENTITY_LABEL[m.identity_confidence] : DASH },
  ];
  const isArtifact = m.entity_type === 'artifact';
  return (
    <div className="space-y-4 text-sm" data-models-inspector data-inspected={m.slug}>
      {placeholder && <p className="text-[11px] text-ink-3">Showing the first row — press “Inspect” on any row (or focus it and press Enter).</p>}
      <div>
        <p className="flex flex-wrap items-center gap-1.5">
          <EntityLink e={isArtifact ? { ...m, entity_type: 'artifact' } : m} className="text-[15px] font-semibold" />
          <StatusBadge status={m.status !== 'active' ? m.status : null} />
          {isArtifact && <ArtifactKindChip kind={m.artifact_kind} />}
        </p>
        {m.organization && (
          <Link href={routes.entity({ entity_type: 'company', slug: m.organization.slug })} className="text-xs text-ink-3 hover:text-accent">
            {m.organization.name}
          </Link>
        )}
        {isArtifact && m.canonical && (
          <p className="mt-1 text-xs text-ink-2">
            Packaging of <EntityLink e={m.canonical} className="font-medium" /> — not an independent model.
          </p>
        )}
        {m.description && <p className="mt-2 line-clamp-4 text-[13px] leading-relaxed text-ink-2">{m.description}</p>}
      </div>
      <dl className="kv [&>div]:grid-cols-[7rem_minmax(0,1fr)] [&>div]:py-1">
        {facts.map((f) => (
          <div key={f.k}>
            <dt>{f.k}</dt>
            <dd className="tnum text-ink">{f.v}</dd>
          </div>
        ))}
      </dl>
      <div className="text-[11px] leading-5 text-ink-3">
        <p className="flex items-center gap-2">
          <QualityMark q={m.quality?.score} label /> {m.quality?.score === undefined && 'Data quality not computed yet'}
        </p>
        <p title={m.updated_at}>Updated {fmtDate(m.updated_at)} · first seen {fmtDate(m.first_seen_at)}</p>
        <p>
          {fmtInt(m.counts?.claims)} claims · {fmtInt(m.counts?.relations)} relations · {fmtInt(m.counts?.events)} events
        </p>
        <p>Field-level provenance (source, tier, observed time) is on the model page — every value opens the evidence drawer there.</p>
      </div>
      <div className="flex flex-wrap items-center gap-1.5">
        <CompareButton e={m} size="sm" />
        <WatchButton e={m} size="sm" />
        <Link href={routes.entity(isArtifact ? { ...m, entity_type: 'artifact' } : m)} className="inline-flex h-7 items-center border border-rule px-1.5 text-xs text-ink-2 hover:border-rule-strong hover:text-ink">
          Open page →
        </Link>
        <Link href={routes.graph(m.slug)} className="inline-flex h-7 items-center border border-rule px-1.5 text-xs text-ink-2 hover:border-rule-strong hover:text-ink">
          Graph
        </Link>
      </div>
    </div>
  );
}

/* ---------------------------------------------------------------------------------------------------------- table */

export function ModelsTable({ items, sort, order, sortHref, orgHrefTemplate, offset }: { items: ModelRow[]; sort: string; order?: string; sortHref: Record<string, string>; /** URL with `__ORG__` where the organization slug goes (functions cannot cross the server → client boundary). */ orgHrefTemplate: string; offset: number }) {
  const orgHref = (slug: string) => orgHrefTemplate.replace('__ORG__', encodeURIComponent(slug));
  const { selected, select } = useContext(InspectCtx);
  const [cols, setCols] = useState<ColKey[]>(DEFAULT_COLS);
  const [ready, setReady] = useState(false);
  const [chooser, setChooser] = useState(false);
  const bodyRef = useRef<HTMLTableSectionElement>(null);
  useEffect(() => {
    try {
      const raw = localStorage.getItem(COLS_KEY);
      if (raw) {
        const arr = JSON.parse(raw) as unknown;
        if (Array.isArray(arr)) setCols(COLUMNS.map((c) => c.key).filter((k) => (arr as string[]).includes(k)));
      }
    } catch {
      /* ignore */
    }
    setReady(true);
  }, []);
  const toggleCol = (k: ColKey) => {
    setCols((cur) => {
      const next = cur.includes(k) ? cur.filter((x) => x !== k) : COLUMNS.map((c) => c.key).filter((x) => x === k || cur.includes(x));
      try {
        localStorage.setItem(COLS_KEY, JSON.stringify(next));
      } catch {
        /* ignore */
      }
      return next;
    });
  };
  const show = (k: ColKey) => !ready || cols.includes(k);

  const onRowKey = (e: React.KeyboardEvent<HTMLTableRowElement>, m: ModelRow, i: number) => {
    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
      e.preventDefault();
      const rows = bodyRef.current?.querySelectorAll<HTMLTableRowElement>('tr[data-row]');
      rows?.[i + (e.key === 'ArrowDown' ? 1 : -1)]?.focus();
    } else if (e.key === 'Enter' || e.key === ' ' || e.key.toLowerCase() === 'i') {
      if ((e.target as HTMLElement).closest('a, button, input')) return;
      e.preventDefault();
      select(m, { sheet: e.key !== 'i' });
    }
  };

  const SortTh = ({ s, children, num: n, hide }: { s: string; children: ReactNode; num?: boolean; hide?: boolean }) =>
    hide ? null : (
      <th scope="col" className={cn(n && 'num')} aria-sort={sort === s ? (order === 'asc' ? 'ascending' : 'descending') : undefined}>
        <Link href={sortHref[s] ?? '#'} className={cn('inline-flex items-center gap-0.5', sort === s ? 'text-ink' : 'hover:text-ink')}>
          {children}
          {sort === s && <span aria-hidden>{order === 'asc' ? '↑' : '↓'}</span>}
        </Link>
      </th>
    );

  return (
    <div data-models-table>
      <div className="flex items-center justify-end gap-2 pb-1">
        <div className="relative">
          <button type="button" onClick={() => setChooser((c) => !c)} aria-expanded={chooser} aria-haspopup="true" className="inline-flex h-8 items-center gap-1.5 border border-rule px-2 text-xs text-ink-2 hover:border-rule-strong hover:text-ink" data-column-chooser>
            <Columns3 className="size-3.5" aria-hidden /> Columns <span className="tnum text-ink-3">{ready ? cols.length : DEFAULT_COLS.length}/{COLUMNS.length}</span>
          </button>
          {chooser && (
            <div className="panel absolute right-0 top-9 z-40 w-56 p-2 shadow-lg" role="group" aria-label="Visible columns">
              {COLUMNS.map((c) => (
                <label key={c.key} className="flex min-h-9 items-center gap-2 px-1 text-[13px] text-ink-2 hover:bg-surface-2">
                  <input type="checkbox" checked={show(c.key)} onChange={() => toggleCol(c.key)} className="size-4 accent-[var(--accent)]" /> {c.label}
                </label>
              ))}
              <p className="px-1 pt-1 text-[10px] text-ink-3">Saved in this browser.</p>
            </div>
          )}
        </div>
      </div>
      {/* ≥ md: the dense table scrolls horizontally inside its pane when needed (a scroll container offsets a sticky header, so the header stays static); < md rows stack. */}
      <div className="relative scrollbar-thin md:overflow-x-auto">
      <table className="data-table stack compact md:[&_td]:align-top md:[&_td]:px-2 md:[&_th]:px-2">
        <caption className="sr-only">Models</caption>
        <thead>
          <tr>
            <th scope="col" className="tnum hidden w-8 text-ink-3 xl:table-cell">
              #
            </th>
            <SortTh s="name">Model</SortTh>
            <SortTh s="params" num hide={!show('params')}>
              Params
            </SortTh>
            <SortTh s="context" num hide={!show('context')}>
              Context
            </SortTh>
            {show('openness') && <th scope="col">Openness</th>}
            {show('license') && <th scope="col">Licence</th>}
            <SortTh s="release" hide={!show('release')}>
              Released
            </SortTh>
            <SortTh s="cheapest" num hide={!show('price')}>
              Best price in / out
            </SortTh>
            <SortTh s="quality" num hide={!show('quality')}>
              Data quality
            </SortTh>
            <th scope="col" className="text-right">
              <span className="sr-only">Actions</span>
            </th>
          </tr>
        </thead>
        <tbody ref={bodyRef}>
          {items.length === 0 && (
            <tr>
              <td colSpan={10} className="py-10 text-center text-sm text-ink-3">
                No models match these filters.
              </td>
            </tr>
          )}
          {items.map((m, i) => {
            const a = m.attributes ?? {};
            const p = num(a.parameter_count);
            const ap = num(a.active_parameter_count);
            const on = selected?.slug === m.slug;
            const isArtifact = m.entity_type === 'artifact';
            const licence = typeof a.license_key === 'string' ? a.license_key : typeof a.license === 'string' ? a.license : null;
            const pin = rowPrice(a, 'input');
            const pout = rowPrice(a, 'output');
            return (
              <tr
                key={m.id}
                data-row={m.slug}
                tabIndex={0}
                aria-selected={on}
                onKeyDown={(e) => onRowKey(e, m, i)}
                onClick={(e) => {
                  if ((e.target as HTMLElement).closest('a, button, input')) return;
                  select(m);
                }}
                className={cn('cursor-default focus-visible:outline-2 focus-visible:outline-accent', on && 'bg-accent-soft/40')}
              >
                <td className="tnum hide-stack hidden text-ink-3 xl:table-cell">{fmtInt(offset + i + 1)}</td>
                <td className="primary min-w-[11rem] md:max-w-[20rem]">
                  <div className="min-w-0">
                    <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
                      <EntityLink e={isArtifact ? { ...m, entity_type: 'artifact' } : m} />
                      <StatusBadge status={m.status !== 'active' ? m.status : null} />
                      <IdentityBadge level={m.identity_confidence} />
                      {isArtifact && <ArtifactKindChip kind={m.artifact_kind} />}
                    </div>
                    <div className="flex flex-wrap items-center gap-x-1.5 text-xs text-ink-3">
                      {m.organization && (
                        <Link href={orgHref(m.organization.slug)} className="hover:text-accent">
                          {m.organization.name}
                        </Link>
                      )}
                      {m.family ? (
                        <>
                          <span aria-hidden>·</span>
                          <Link href={routes.family(m.family.slug)} className="hover:text-accent">
                            {m.family.name}
                          </Link>
                        </>
                      ) : typeof a.family === 'string' ? (
                        <>
                          <span aria-hidden>·</span>
                          <span>{a.family}</span>
                        </>
                      ) : null}
                      {isArtifact && m.canonical && (
                        <>
                          <span aria-hidden>·</span>
                          <span>
                            of <EntityLink e={m.canonical} className="text-ink-2" />
                          </span>
                        </>
                      )}
                    </div>
                  </div>
                </td>
                {show('params') && (
                  <td className="num tnum" data-label="Params">
                    {p === null ? <span className="text-ink-3">{DASH}</span> : fmtParams(p)}
                    {ap !== null && ap !== p && <span className="block text-[11px] text-ink-3">{fmtParams(ap)} active</span>}
                  </td>
                )}
                {show('context') && (
                  <td className="num tnum" data-label="Context">
                    {num(a.context_length) === null ? <span className="text-ink-3">{DASH}</span> : fmtTokens(a.context_length)}
                  </td>
                )}
                {show('openness') && (
                  <td data-label="Openness">
                    {typeof a.openness === 'string' ? <OpennessChip openness={a.openness} /> : <span className="text-ink-3">{DASH}</span>}
                  </td>
                )}
                {show('license') && (
                  <td data-label="Licence" className="max-w-[11rem] truncate text-ink-2" title={licence ?? undefined}>
                    {licence ? <Link href={`/licenses/${encodeURIComponent(licence)}`} className="hover:text-accent">{licence}</Link> : <span className="text-ink-3">{DASH}</span>}
                  </td>
                )}
                {show('release') && (
                  <td data-label="Released" className="tnum whitespace-nowrap text-ink-2">
                    {typeof a.release_date === 'string' ? fmtDate(a.release_date) : <span className="text-ink-3">{DASH}</span>}
                  </td>
                )}
                {show('price') && (
                  <td className="num tnum whitespace-nowrap" data-label="Best price in / out" title={pin === null && pout === null ? 'No price on this row — see the model page for provider deployments' : 'Cheapest current offer across providers, USD per 1M tokens'}>
                    {pin === null && pout === null ? (
                      <span className="text-ink-3">{DASH}</span>
                    ) : (
                      <span className="text-accent-2">
                        {fmtUsdPerM(pin)} <span className="text-ink-3">/</span> {fmtUsdPerM(pout)}
                      </span>
                    )}
                  </td>
                )}
                {show('quality') && (
                  <td className="num" data-label="Data quality">
                    <QualityMark q={m.quality?.score} />
                  </td>
                )}
                <td className="text-right whitespace-nowrap">
                  <span className="inline-flex items-center justify-end gap-1">
                    <button type="button" onClick={() => select(m, { sheet: true })} aria-pressed={on} className={cn('inline-flex h-7 items-center gap-1 border px-1.5 text-xs whitespace-nowrap', on ? 'border-accent bg-accent-soft text-accent' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink')} data-inspect={m.slug} title="Inspect: key facts in the side pane" aria-label={`Inspect ${m.name}`}>
                      <ScanSearch className="size-3" aria-hidden /> <span className="md:sr-only xl:not-sr-only">Inspect</span>
                    </button>
                    <CompareButton e={m} size="sm" label="" />
                    <WatchButton e={m} size="sm" label="" />
                  </span>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
      </div>
    </div>
  );
}