import type { SaleRow, ListingRow } from '@/lib/queries/assets';
import { fmtDate, fmtMoney, fmtRelative, cn } from '@/lib/format';
import { humanize } from '@/lib/taxonomy';
import { Badge, Delta, EmptyState } from '@/components/ui/primitives';
import { GradeBadge, SourceLink, Thumb } from '@/components/market/bits';

/** Phone-first card lists for sales and listings (tables stay for md+). */
export function SalesCards({ items, className, emptyDescription = 'Sales appear once connectors ingest verified transactions.' }: { items: SaleRow[]; className?: string; emptyDescription?: string }) {
  if (!items.length) return <EmptyState title="No sales recorded" description={emptyDescription} />;
  return (
    <ul className={cn('divide-y divide-border', className)}>
      {items.map((s) => (
        <li key={s.id} className="flex items-start gap-3 px-3 py-2.5">
          <Thumb src={s.imageUrls[0]} alt="" size={44} rounded="rounded-md" />
          <div className="min-w-0 flex-1">
            <div className="flex items-baseline justify-between gap-2">
              <span className="num text-[15px] font-semibold text-fg">{fmtMoney(s.priceUsd)}</span>
              <span className="text-[11px] text-muted" title={s.saleDate.toISOString()}>
                {fmtDate(s.saleDate)}
              </span>
            </div>
            {s.price !== null && s.currency && s.currency !== 'USD' ? <div className="num text-[10px] text-subtle">{fmtMoney(s.price, s.currency)} native</div> : null}
            <p className="mt-0.5 truncate text-[12px] text-muted" title={s.rawTitle}>
              {s.rawTitle}
            </p>
            <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-muted">
              <GradeBadge grader={s.grader} grade={s.grade} />
              {s.condition ? <span>{humanize(s.condition)}</span> : null}
              <span>{humanize(s.saleType)}</span>
              <SourceLink name={s.sourceName} url={s.sourceUrl} />
              {s.status !== 'valid' ? <Badge tone="alert">{s.status}</Badge> : null}
            </div>
          </div>
        </li>
      ))}
    </ul>
  );
}

export function ListingsCards({ items, className, emptyDescription = 'Live listings appear once marketplace connectors run.' }: { items: ListingRow[]; className?: string; emptyDescription?: string }) {
  if (!items.length) return <EmptyState title="No active listings" description={emptyDescription} />;
  return (
    <ul className={cn('divide-y divide-border', className)}>
      {items.map((l) => (
        <li key={l.id} className="flex items-start gap-3 px-3 py-2.5">
          <Thumb src={l.imageUrls[0]} alt="" size={44} rounded="rounded-md" />
          <div className="min-w-0 flex-1">
            <div className="flex items-baseline justify-between gap-2">
              <span className="num text-[15px] font-semibold text-fg">{fmtMoney(l.priceUsd)}</span>
              {l.discountToRiv !== null ? (
                <span className="inline-flex items-center gap-1 text-[11px]">
                  <span className="text-subtle">vs RIV</span>
                  <Delta value={-l.discountToRiv} />
                </span>
              ) : (
                <span className="text-[11px] text-subtle">{fmtRelative(l.lastSeenAt)}</span>
              )}
            </div>
            {l.price !== null && l.currency && l.currency !== 'USD' ? <div className="num text-[10px] text-subtle">{fmtMoney(l.price, l.currency)} native</div> : null}
            <p className="mt-0.5 truncate text-[12px] text-muted" title={l.rawTitle}>
              {l.rawTitle}
            </p>
            <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-muted">
              <GradeBadge grader={l.grader} grade={l.grade} />
              <span>{humanize(l.listingType)}</span>
              {l.seller ? <span className="truncate">{l.seller}</span> : null}
              {l.location ? <span className="text-subtle">{l.location}</span> : null}
              <SourceLink name={l.sourceName} url={l.sourceUrl} />
            </div>
          </div>
        </li>
      ))}
    </ul>
  );
}