import Link from 'next/link';
import type { ReactNode } from 'react';
import type { AssetCard as AssetCardData } from '@/lib/queries/assets';
import { cn, confidenceLabel, fmtMoney, fmtNum, fmtRelative } from '@/lib/format';
import { catName } from '@/lib/taxonomy';
import { Delta, VsRiv } from '@/components/ui/primitives';

export type TileMetric = 'change7d' | 'change1d' | 'change30d' | 'trending' | 'watchers' | 'riv' | 'opportunity' | 'new' | 'guide' | 'latestSale';

import { TileImage } from '@/components/ui/tile-image';
export { TileImage };

/** Price line: RIV with confidence, or the guide price honestly labelled, or the latest sale. */
export function PriceLine({ a, size = 'md', className }: { a: AssetCardData; size?: 'sm' | 'md' | 'lg'; className?: string }) {
  const valueCls = size === 'lg' ? 'text-xl' : size === 'sm' ? 'text-[13px]' : 'text-[15px]';
  if (a.rivUsd !== null) {
    return (
      <span className={cn('flex flex-col leading-tight', className)} title={`RareIndex Valuation · ${confidenceLabel(a.rivConfidence)} confidence · ${a.rivSampleSize} sales`}>
        <span className={cn('num font-semibold text-fg', valueCls)}>{fmtMoney(a.rivUsd)}</span>
        <span className="t-caption">
          RIV · {confidenceLabel(a.rivConfidence)} · n={a.rivSampleSize}
        </span>
      </span>
    );
  }
  if (a.guideUsd !== null && a.guideUsd !== undefined) {
    return (
      <span className={cn('flex flex-col leading-tight', className)} title={`Price-guide observation from ${a.guideSource ?? 'a guide'} (${a.guideDate ?? ''}) — not a transaction and not a valuation`}>
        <span className={cn('num font-semibold text-muted', valueCls)}>{fmtMoney(a.guideUsd)}</span>
        <span className="t-caption">Guide · {a.guideSource ?? a.guideKind ?? 'observed'}</span>
      </span>
    );
  }
  if (a.latestSaleUsd !== null) {
    return (
      <span className={cn('flex flex-col leading-tight', className)}>
        <span className={cn('num font-semibold text-fg', valueCls)}>{fmtMoney(a.latestSaleUsd)}</span>
        <span className="t-caption">Last sale · {fmtRelative(a.latestSaleAt)}</span>
      </span>
    );
  }
  return (
    <span className={cn('flex flex-col leading-tight', className)} title="Insufficient evidence for a valuation">
      <span className={cn('num font-semibold text-subtle', valueCls)}>—</span>
      <span className="t-caption">Catalogued · no price yet</span>
    </span>
  );
}

function MetricNode({ a, metric }: { a: AssetCardData; metric: TileMetric }) {
  switch (metric) {
    case 'change1d':
      return <Delta value={a.change1d} arrow className="text-[12px]" />;
    case 'change7d':
      return <Delta value={a.change7d} arrow className="text-[12px]" />;
    case 'change30d':
      return <Delta value={a.change30d} arrow className="text-[12px]" />;
    case 'trending':
      return <span className="num text-[11px] text-muted">score {a.trendingScore?.toFixed(1) ?? '—'}</span>;
    case 'watchers':
      return <span className="num text-[11px] text-muted">{fmtNum(a.watchers)} watching</span>;
    case 'opportunity':
      return (
        <VsRiv discount={a.valueOpportunity} className="text-[12px]" />
      );
    case 'new':
      return <span className="text-[11px] text-muted">added {fmtRelative(a.updatedAt)}</span>;
    case 'riv':
      return <span className="num text-[11px] text-muted">{fmtNum(a.salesCount)} sales</span>;
    case 'latestSale':
      return a.latestSaleUsd !== null ? <span className="num text-[11px] text-muted">last {fmtMoney(a.latestSaleUsd)}</span> : null;
    default:
      return null;
  }
}

/** Poster-style asset tile for rails and grids. */
export function AssetTile({ a, metric = 'change30d', className, priority = false, width = 'w-[164px] sm:w-[188px]' }: { a: AssetCardData; metric?: TileMetric; className?: string; priority?: boolean; width?: string }) {
  return (
    <Link href={`/asset/${a.slug}`} className={cn('card card-hover group flex flex-col gap-2 p-2', width, className)}>
      <TileImage src={a.heroImageUrl} alt="" familySlug={a.familySlug} priority={priority} />
      <span className="flex min-h-[2.6em] flex-col">
        <span className="line-clamp-2 text-[13px] font-medium leading-[1.3] text-fg" title={a.title}>
          {a.title}
        </span>
        <span className="mt-0.5 truncate text-[11px] text-muted">
          {a.setName ?? catName(a.categorySlug)}
          {a.year ? ` · ${a.year}` : ''}
        </span>
      </span>
      <span className="mt-auto flex items-end justify-between gap-2 border-t border-border pt-2">
        <PriceLine a={a} size="sm" />
        <span className="shrink-0 text-right">
          <MetricNode a={a} metric={metric} />
        </span>
      </span>
    </Link>
  );
}

/** Horizontal snap rail on small screens; wraps into a grid from lg. */
export function Rail({ children, className, cols = 'lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8' }: { children: ReactNode; className?: string; cols?: string }) {
  return <div className={cn('rail lg:mx-0 lg:grid lg:overflow-visible lg:px-0 lg:[&>*]:w-auto', cols, className)}>{children}</div>;
}

export function RailHeader({ title, subtitle, href, hrefLabel = 'View all', className }: { title: ReactNode; subtitle?: ReactNode; href?: string; hrefLabel?: string; className?: string }) {
  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">{title}</h2>
        {subtitle ? <p className="mt-0.5 truncate 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 TileSkeleton({ width = 'w-[164px] sm:w-[188px]' }: { width?: string }) {
  return (
    <div className={cn('card flex flex-col gap-2 p-2', width)} aria-hidden>
      <div className="aspect-[4/5] w-full animate-pulse rounded-[5px] bg-inset" />
      <div className="h-3 w-4/5 animate-pulse rounded-sm bg-inset" />
      <div className="h-3 w-1/2 animate-pulse rounded-sm bg-inset" />
      <div className="mt-2 h-4 w-1/3 animate-pulse rounded-sm bg-inset" />
    </div>
  );
}