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 }: { title: ReactNode; subtitle?: ReactNode; action?: ReactNode; className?: string }) {
  return (
    <header className={cn('flex items-start justify-between gap-3 border-b border-border px-4 py-3', className)}>
      <div className="min-w-0">
        <h2 className="text-sm font-semibold tracking-tight text-fg">{title}</h2>
        {subtitle ? <p className="mt-0.5 text-xs text-muted">{subtitle}</p> : null}
      </div>
      {action ? <div className="shrink-0 text-xs">{action}</div> : null}
    </header>
  );
}

export function Delta({ value, digits = 2, className }: { value: number | null | undefined; digits?: number; className?: string }) {
  return <span className={cn('num font-medium', deltaClass(value), className)}>{fmtPct(value, digits)}</span>;
}

export function Badge({ children, tone = 'neutral', className }: { children: ReactNode; tone?: 'neutral' | 'gain' | 'loss' | 'index' | 'rarity' | 'alert' | 'gold'; className?: string }) {
  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 rounded-sm px-1.5 py-0.5 text-[11px] font-medium leading-4 tracking-wide', tones[tone], className)}>{children}</span>;
}

export function Stat({ label, value, sub, className }: { label: ReactNode; value: ReactNode; sub?: ReactNode; className?: string }) {
  return (
    <div className={cn('flex flex-col gap-0.5', className)}>
      <span className="text-[11px] font-medium uppercase tracking-wider text-subtle">{label}</span>
      <span className="num text-lg font-semibold leading-tight text-fg">{value}</span>
      {sub ? <span className="text-xs text-muted">{sub}</span> : null}
    </div>
  );
}

export function EmptyState({ title, description, action, className }: { title: ReactNode; description?: ReactNode; action?: ReactNode; className?: string }) {
  return (
    <div className={cn('flex flex-col items-center justify-center gap-2 px-6 py-12 text-center', className)}>
      <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 }: { children: ReactNode; href?: string; hrefLabel?: string; className?: string }) {
  return (
    <div className={cn('mb-3 flex items-baseline justify-between gap-3', className)}>
      <h2 className="text-base font-semibold tracking-tight text-fg">{children}</h2>
      {href ? (
        <Link href={href} className="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 />;
}

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