import { ExternalLink } from 'lucide-react';
import Link from 'next/link';
import { EntityLink } from '@/components/ui/entity';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { Note } from '@/components/ui/section';
import { cn } from '@/lib/cn';
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';
  }
}

/** Relative change in %, null when either side is missing or the base is 0. */
export function pctChange(from: number | null, to: number | null): number | null {
  if (from === null || to === null || from === 0) return null;
  return ((to - from) / Math.abs(from)) * 100;
}

/** 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>
  );
}

/** ±% chip; green when cheaper, red when dearer. */
export function PctChip({ pct, className }: { pct: number | null; className?: string }) {
  if (pct === null) return <span className={cn('text-ink-3', className)}>—</span>;
  const sign = pct > 0 ? '+' : pct < 0 ? '−' : '';
  return <span className={cn('tnum font-medium', pct < 0 ? 'text-positive' : pct > 0 ? 'text-danger' : 'text-ink-2', className)}>{`${sign}${Math.abs(pct).toFixed(Math.abs(pct) < 10 ? 1 : 0)}%`}</span>;
}

/**
 * PRICE_CHANGED events as a dense table: model · provider · input move · output move · % change · when · source.
 * `providerHref(slug)` optionally turns the provider cell into a filter link (the price terminal).
 */
export function PriceMovers({ movers, providerHref, limit }: { movers: (ChangeEvent & { percent_change?: unknown })[]; providerHref?: (providerName: string) => string | undefined; limit?: number }) {
  const rows = movers.filter((e) => e.event_type === 'PRICE_CHANGED' || e.category === 'price').slice(0, limit ?? movers.length);
  return (
    <>
      <div className="md:overflow-x-auto">
      <DataTable caption="Recent price changes">
        <thead>
          <tr>
            <Th>Model</Th>
            <Th>Provider</Th>
            <Th>Input / 1M</Th>
            <Th>Output / 1M</Th>
            <Th num>Change</Th>
            <Th>Observed</Th>
            <Th>Source</Th>
          </tr>
        </thead>
        <tbody>
          {rows.length === 0 && <EmptyRow cols={7}>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;
            const apiPct = num(e.percent_change);
            const pIn = pctChange(o.input, n.input);
            const pOut = pctChange(o.output, n.output);
            const href = provider && providerHref ? providerHref(provider) : undefined;
            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 ? href ? <Link href={href} className="hover:text-accent" title="Filter by this provider">{provider}</Link> : 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 num label="Change" className="tnum text-xs">
                  {apiPct !== null ? (
                    <PctChip pct={apiPct} />
                  ) : (
                    <span className="inline-flex flex-col items-end gap-0.5 md:flex-row md:items-center md:gap-2">
                      {pIn !== null && <span>in <PctChip pct={pIn} /></span>}
                      {pOut !== null && <span>out <PctChip pct={pOut} /></span>}
                      {pIn === null && pOut === null && <span className="text-ink-3">—</span>}
                    </span>
                  )}
                </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>
      </div>
      {rows.length > 0 && <Note className="mt-3">Movers are PRICE_CHANGED events emitted when a provider&apos;s published price for a model differs from the previous observation. Green = cheaper, red = dearer; % is relative to the previous published price.</Note>}
    </>
  );
}