import Link from "next/link";
import { ChangeCell } from "@/components/ui/price";
import { cx, EVENT_TYPE_LABEL, formatInt, instrumentHref } from "@/lib/format";
import type { Changes } from "@/lib/types";

/** "What changed" across markets in a window — counts derived from Market Atlas' own bars/events. */
export function ChangesPanel({ changes, className }: { changes: Changes; className?: string }) {
  return (
    <div className={cx("rounded-md border border-rule bg-surface p-4", className)}>
      <div className="flex items-baseline justify-between">
        <h3 className="text-[11px] font-medium uppercase tracking-wide text-ink-3">What changed · last {changes.window}</h3>
        <span className="text-[11px] text-ink-3">derived</span>
      </div>
      <div className="mt-2 grid grid-cols-3 gap-3">
        <Num n={changes.instruments_moved_over_1pct} label="moved >1%" sub={`of ${formatInt(changes.instruments_tracked)} tracked`} />
        <Num n={changes.events} label="events" />
        <Num n={changes.filings} label="filings" />
      </div>
      {changes.events_by_type.length > 0 && (
        <div className="mt-3 flex flex-wrap gap-1.5">
          {changes.events_by_type.slice(0, 6).map((t) => (
            <Link key={t.type} href={`/events?type=${t.type}`} className="rounded-full border border-rule px-2 py-0.5 text-[11px] text-ink-2 hover:border-rule-strong">
              {EVENT_TYPE_LABEL[t.type] ?? t.type} <span className="mono">{t.n}</span>
            </Link>
          ))}
        </div>
      )}
      {changes.top_movers.length > 0 && (
        <ul className="mt-3 divide-y divide-rule text-sm">
          {changes.top_movers.slice(0, 6).map((m) => (
            <li key={m.id} className="flex items-center justify-between py-1.5">
              <Link href={instrumentHref(m.id)} className="min-w-0">
                <span className="mono font-medium">{m.symbol}</span>
                <span className="ml-2 hidden truncate text-xs text-ink-3 sm:inline">{m.name}</span>
              </Link>
              <ChangeCell value={m.window_change_percent} className="text-xs" />
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

function Num({ n, label, sub }: { n: number; label: string; sub?: string }) {
  return (
    <div>
      <div className="mono text-xl font-semibold tnum">{formatInt(n)}</div>
      <div className="text-[11px] text-ink-3">{label}</div>
      {sub && <div className="text-[10.5px] text-ink-3">{sub}</div>}
    </div>
  );
}