import type { SaleRow, ListingRow } from '@/lib/queries/assets';
import { fmtDate, fmtMoney, fmtRelative, cn } from '@/lib/format';
import { humanize } from '@/lib/taxonomy';
import { EmptyState, VsRiv } from '@/components/ui/primitives';
import { FeeBasisPill, GradeBadge, SourceLink, Thumb, VerificationBadge } 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">{s.allInUsd !== null && Math.abs(s.allInUsd - s.priceUsd) >= 0.5 ? `${s.feeBasis === 'added_approximate' || s.feeBasis === 'added_default' ? '≈ ' : ''}${fmtMoney(s.allInUsd)}` : fmtMoney(s.priceUsd)}</span>
              <span className="text-[11px] text-muted" title={s.saleDate.toISOString()}>
                {fmtDate(s.saleDate)}
              </span>
            </div>
            {s.allInUsd !== null && Math.abs(s.allInUsd - s.priceUsd) >= 0.5 ? (
              <div className="num flex items-center gap-1.5 text-[10px] text-subtle">
                <span>{fmtMoney(s.priceUsd)} hammer{s.price !== null && s.currency && s.currency !== 'USD' ? ` · ${fmtMoney(s.price, s.currency)}` : ''}</span>
                <FeeBasisPill basis={s.feeBasis} rate={s.buyerPremiumRate} className="text-[9px]" />
              </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} />
              <VerificationBadge label={s.verification} reason={s.verificationReason} />
            </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 ? (
                <VsRiv discount={l.discountToRiv} className="text-[11px]" />
              ) : (
                <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>
  );
}