import Link from 'next/link';
import type { ReactNode } from 'react';
import { cn, deltaClass, fmtPct } from '@/lib/format';

/** Minimal, dense UI primitives. Keep them boring; the data is the design. */

export function Card({ children, className, as: Tag = 'section', id }: { children: ReactNode; className?: string; as?: 'section' | 'div' | 'article'; id?: string }) {
  return (
    <Tag className={cn('card', className)} id={id}>
      {children}
    </Tag>
  );
}

export function CardHeader({ title, subtitle, action, className, icon }: { title: ReactNode; subtitle?: ReactNode; action?: ReactNode; className?: string; icon?: ReactNode }) {
  return (
    <header className={cn('flex items-start justify-between gap-3 border-b border-border px-4 py-3', className)}>
      <div className="flex min-w-0 items-start gap-2">
        {icon ? <span className="mt-0.5 text-subtle">{icon}</span> : null}
        <div className="min-w-0">
          <h2 className="t-subtitle text-fg">{title}</h2>
          {subtitle ? <p className="mt-0.5 text-xs text-muted">{subtitle}</p> : null}
        </div>
      </div>
      {action ? <div className="shrink-0 text-xs">{action}</div> : null}
    </header>
  );
}

export function Delta({ value, digits = 2, className, arrow = false }: { value: number | null | undefined; digits?: number; className?: string; arrow?: boolean }) {
  const has = value !== null && value !== undefined && Number.isFinite(value);
  const glyph = !has || Math.abs(value) < 0.00005 ? '' : value > 0 ? '▲ ' : '▼ ';
  return (
    <span className={cn('num font-medium', deltaClass(value), className)}>
      {arrow && glyph ? <span className="text-[0.7em]">{glyph}</span> : null}
      {fmtPct(value, digits)}
    </span>
  );
}

/**
 * Ask vs RareIndex Valuation (§83–§84, §196). `discount` = (ask − RIV) / RIV as stored: negative = the ask
 * is below the valuation. Anything implausible (ask < 10 % or > 10× RIV) is a data/identity anomaly and is
 * labelled as such instead of being shown as a percentage — never as a "deal".
 */
export function VsRiv({ discount, className, digits = 1, showLabel = true }: { discount: number | null | undefined; className?: string; digits?: number; showLabel?: boolean }) {
  if (discount === null || discount === undefined || !Number.isFinite(discount)) return <span className={cn('text-subtle', className)} title="No comparable valuation for this variant">—</span>;
  const ratio = 1 + discount;
  if (ratio < 0.1 || ratio > 10) {
    return (
      <span className={cn('inline-flex items-center gap-1 rounded-sm bg-alert-bg px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-alert', className)} title="The asking price is implausible against this valuation (wrong variant, lot, currency or identity). Not a deal until reviewed.">
        Data/identity anomaly
      </span>
    );
  }
  if (discount < -0.5) {
    return (
      <span className={cn('inline-flex items-center gap-1 rounded-sm bg-alert-bg px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-alert', className)} title={`Asking price ${fmtPct(Math.abs(discount), digits, false)} below RIV — more than 50 % below a valuation is almost always a different item, grade or lot. Held for review, not a deal.`}>
        Needs review · {fmtPct(discount, 0)}
      </span>
    );
  }
  const tone = discount <= -0.1 ? 'text-gain' : discount >= 0.1 ? 'text-loss' : 'text-flat';
  const word = discount <= -0.1 ? 'below RIV' : discount >= 0.1 ? 'above RIV' : 'near RIV';
  return (
    <span className={cn('num inline-flex items-baseline gap-1 font-medium', tone, className)} title={`Asking price ${fmtPct(Math.abs(discount), digits, false)} ${word}. Analytical data, not advice.`}>
      {fmtPct(discount, digits)}
      {showLabel ? <span className="text-[0.85em] font-normal text-subtle">vs RIV</span> : null}
    </span>
  );
}

export function Badge({ children, tone = 'neutral', className, dot = false }: { children: ReactNode; tone?: 'neutral' | 'gain' | 'loss' | 'index' | 'rarity' | 'alert' | 'gold'; className?: string; dot?: boolean }) {
  const tones: Record<string, string> = {
    neutral: 'bg-inset text-muted',
    gain: 'bg-gain-bg text-gain',
    loss: 'bg-loss-bg text-loss',
    index: 'bg-index-bg text-index',
    rarity: 'bg-rarity-bg text-rarity',
    alert: 'bg-alert-bg text-alert',
    gold: 'bg-alert-bg text-gold',
  };
  return (
    <span className={cn('inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-[11px] font-medium leading-4 tracking-wide', tones[tone], className)}>
      {dot ? <span className="h-1.5 w-1.5 rounded-full bg-current" aria-hidden /> : null}
      {children}
    </span>
  );
}

export function Stat({ label, value, sub, className, size = 'md' }: { label: ReactNode; value: ReactNode; sub?: ReactNode; className?: string; size?: 'sm' | 'md' | 'lg' }) {
  return (
    <div className={cn('flex min-w-0 flex-col gap-0.5', className)}>
      <span className="t-label">{label}</span>
      <span className={cn('num truncate font-semibold leading-tight text-fg', size === 'lg' ? 'text-2xl' : size === 'sm' ? 'text-sm' : 'text-lg')}>{value}</span>
      {sub ? <span className="truncate text-xs text-muted">{sub}</span> : null}
    </div>
  );
}

/** Dense KPI strip used under page headers and in the hero. */
export function StatStrip({ items, className, cols }: { items: Array<{ label: ReactNode; value: ReactNode; sub?: ReactNode; href?: string }>; className?: string; cols?: string }) {
  const grid = cols ?? (items.length >= 8 ? 'grid-cols-2 sm:grid-cols-4 lg:grid-cols-8' : items.length >= 6 ? 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6' : items.length === 5 ? 'grid-cols-2 sm:grid-cols-5' : items.length === 4 ? 'grid-cols-2 sm:grid-cols-4' : 'grid-cols-2 sm:grid-cols-3');
  return (
    <dl className={cn('grid gap-px overflow-hidden rounded-md border border-border bg-border', grid, className)}>
      {items.map((it, i) => {
        const inner = (
          <>
            <dt className="t-label">{it.label}</dt>
            <dd className="num mt-1 truncate text-[17px] font-semibold leading-none text-fg sm:text-lg">{it.value}</dd>
            {it.sub ? <dd className="mt-1 truncate text-[11px] text-muted">{it.sub}</dd> : null}
          </>
        );
        return it.href ? (
          <Link key={i} href={it.href} className="block min-w-0 bg-elevated px-3 py-2.5 hover:bg-sunken">
            {inner}
          </Link>
        ) : (
          <div key={i} className="min-w-0 bg-elevated px-3 py-2.5">
            {inner}
          </div>
        );
      })}
    </dl>
  );
}

export function EmptyState({ title, description, action, className, compact }: { title: ReactNode; description?: ReactNode; action?: ReactNode; className?: string; compact?: boolean }) {
  return (
    <div className={cn('flex flex-col items-center justify-center gap-1.5 px-6 text-center', compact ? 'py-6' : 'py-12', className)}>
      <span className="mb-1 h-1 w-8 rounded-full bg-inset" aria-hidden />
      <p className="text-sm font-medium text-fg">{title}</p>
      {description ? <p className="max-w-md text-xs leading-relaxed text-muted">{description}</p> : null}
      {action ? <div className="mt-2">{action}</div> : null}
    </div>
  );
}

/** Honest placeholder for metrics without enough evidence (§191–§192). */
export function Unavailable({ reason = 'Data unavailable', className }: { reason?: string; className?: string }) {
  return (
    <span className={cn('text-subtle', className)} title={reason}>
      —
    </span>
  );
}

export function SectionTitle({ children, href, hrefLabel = 'View all', className, subtitle }: { children: ReactNode; href?: string; hrefLabel?: string; className?: string; subtitle?: ReactNode }) {
  return (
    <div className={cn('mb-3 flex items-end justify-between gap-3', className)}>
      <div className="min-w-0">
        <h2 className="t-title text-fg">{children}</h2>
        {subtitle ? <p className="mt-0.5 text-xs text-muted">{subtitle}</p> : null}
      </div>
      {href ? (
        <Link href={href} className="shrink-0 text-xs font-medium text-muted hover:text-fg">
          {hrefLabel} →
        </Link>
      ) : null}
    </div>
  );
}

export function Skeleton({ className }: { className?: string }) {
  return <div className={cn('animate-pulse rounded-sm bg-inset', className)} aria-hidden />;
}

/** Skeleton matching a dense table (header + n rows) to avoid layout shift. */
export function TableSkeleton({ rows = 8, className }: { rows?: number; className?: string }) {
  return (
    <div className={cn('card overflow-hidden', className)} aria-hidden>
      <div className="h-9 border-b border-border bg-elevated" />
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} className="flex items-center gap-3 border-b border-border px-3 py-2 last:border-b-0">
          <Skeleton className="h-8 w-8" />
          <Skeleton className="h-3 w-1/3" />
          <Skeleton className="ml-auto h-3 w-16" />
          <Skeleton className="h-3 w-12" />
        </div>
      ))}
    </div>
  );
}

export function Table({ children, className, dense = true, sticky = true }: { children: ReactNode; className?: string; dense?: boolean; sticky?: boolean }) {
  return (
    <div className={cn('w-full overflow-x-auto overscroll-x-contain scrollbar-none', className)}>
      <table className={cn('w-full border-collapse text-left', dense ? 'text-[13px]' : 'text-sm', sticky && 'table-sticky md:[&_td:first-child]:static md:[&_th:first-child]:static md:[&_td:first-child]:shadow-none md:[&_th:first-child]:shadow-none')}>{children}</table>
    </div>
  );
}
export const th = 'sticky top-0 z-[1] whitespace-nowrap border-b border-border bg-elevated px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.08em] text-subtle';
export const td = 'whitespace-nowrap border-b border-border px-3 py-2 align-middle';
export const tdNum = `${td} num text-right`;

/** Sequential page "kicker" — small uppercase label above a title. */
export function Kicker({ children, className }: { children: ReactNode; className?: string }) {
  return <p className={cn('t-label mb-2', className)}>{children}</p>;
}

export function Divider({ className }: { className?: string }) {
  return <hr className={cn('border-0 border-t border-border', className)} />;
}