import { ExternalLink } from 'lucide-react';
import { EntityLink } from '@/components/ui/entity';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { Note } from '@/components/ui/section';
import { fmtDateTime, fmtAgo, fmtUsdPerM, num } from '@/lib/format';
import type { ChangeEvent } from '@/lib/types';

type PriceValue = { input_per_mtok?: unknown; output_per_mtok?: unknown } | null | undefined;

function pv(v: unknown): { input: number | null; output: number | null } {
  const o = (v && typeof v === 'object' ? v : {}) as PriceValue;
  return { input: num(o?.input_per_mtok), output: num(o?.output_per_mtok) };
}

function host(url: string): string {
  try {
    return new URL(url).hostname.replace(/^www\./, '');
  } catch {
    return 'source';
  }
}

/** Old → new price cell: strike-through old, bold new, direction sign. Amber = money. */
function Move({ from, to }: { from: number | null; to: number | null }) {
  if (from === null && to === null) return <span className="text-ink-3">—</span>;
  const dir = from !== null && to !== null ? (to < from ? '↓' : to > from ? '↑' : '=') : '';
  return (
    <span className="tnum inline-flex items-center gap-1.5">
      <span className="text-ink-3 line-through decoration-ink-3/60">{fmtUsdPerM(from)}</span>
      <span aria-hidden className="text-ink-3">→</span>
      <span className={dir === '=' ? 'text-ink-2' : 'font-semibold text-accent-2'}>{fmtUsdPerM(to)}</span>
      {dir && dir !== '=' && <span className={dir === '↓' ? 'text-positive' : 'text-danger'} aria-label={dir === '↓' ? 'decrease' : 'increase'}>{dir}</span>}
    </span>
  );
}

/** PRICE_CHANGED events as a dense table: model · provider · input move · output move · when · source. */
export function PriceMovers({ movers }: { movers: ChangeEvent[] }) {
  const rows = movers.filter((e) => e.event_type === 'PRICE_CHANGED' || e.category === 'price');
  return (
    <>
      <DataTable caption="Recent price changes">
        <thead>
          <tr>
            <Th>Model</Th>
            <Th>Provider</Th>
            <Th>Input / 1M</Th>
            <Th>Output / 1M</Th>
            <Th>Observed</Th>
            <Th>Source</Th>
          </tr>
        </thead>
        <tbody>
          {rows.length === 0 && <EmptyRow cols={6}>No price change recorded in this window. The first observation of a price is not a change.</EmptyRow>}
          {rows.map((e) => {
            const o = pv(e.old_value);
            const n = pv(e.new_value);
            const provider = typeof e.meta?.provider === 'string' ? e.meta.provider : null;
            return (
              <tr key={e.id}>
                <Td primary>
                  {e.entity ? <EntityLink e={e.entity} /> : <span className="text-ink-3">—</span>}
                  {e.entity?.organization && <span className="ml-2 text-xs text-ink-3">{e.entity.organization.name}</span>}
                </Td>
                <Td label="Provider" className="text-ink-2">{provider ?? <span className="text-ink-3">—</span>}</Td>
                <Td label="Input / 1M"><Move from={o.input} to={n.input} /></Td>
                <Td label="Output / 1M"><Move from={o.output} to={n.output} /></Td>
                <Td label="Observed" className="text-ink-2" title={fmtDateTime(e.observed_at)}>{fmtAgo(e.observed_at)}</Td>
                <Td label="Source">
                  {e.source_url ? (
                    <a href={e.source_url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-xs text-ink-2 hover:text-accent">
                      {host(e.source_url)} <ExternalLink className="size-3" aria-hidden />
                    </a>
                  ) : (
                    <span className="text-ink-3">—</span>
                  )}
                </Td>
              </tr>
            );
          })}
        </tbody>
      </DataTable>
      {rows.length > 0 && <Note className="mt-3">Movers are PRICE_CHANGED events emitted when a provider's published price for a model differs from the previous observation. Green arrow = cheaper, red = dearer.</Note>}
    </>
  );
}