import type { SaleRow, ListingRow } from '@/lib/queries/assets';
import type { LotRow } from '@/lib/queries/market-lists';
import { fmtDate, fmtMoney, fmtRelative, fmtPct, cn } from '@/lib/format';
import { humanize } from '@/lib/taxonomy';
import { Table, th, td, tdNum, EmptyState, Badge, VsRiv } from '@/components/ui/primitives';
import { AllInCell, AssetTitleCell, FeeBasisPill, GradeBadge, PriceCell, SourceLink, Thumb, VerificationBadge } from './bits';

/** Card list for sales on small screens (image, title, grade, price, source). */
export function SalesCards({ items, className }: { items: SaleRow[]; className?: string }) {
  return (
    <ul className={cn('divide-y divide-border', className)}>
      {items.map((s) => (
        <li key={s.id}>
          <a href={s.assetSlug ? `/asset/${s.assetSlug}` : s.sourceUrl} className="flex min-h-[64px] items-center gap-3 px-3 py-2.5 hover:bg-sunken">
            <Thumb src={s.heroImageUrl ?? s.imageUrls[0]} alt="" size={44} rounded="rounded-[5px]" />
            <span className="min-w-0 flex-1">
              <span className="line-clamp-2 text-[13px] font-medium leading-[1.3] text-fg">{s.assetTitle ?? s.rawTitle}</span>
              <span className="mt-0.5 flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[11px] text-muted">
                <GradeBadge grader={s.grader} grade={s.grade} />
                <span>{fmtDate(s.saleDate)}</span>
                <span>· {s.sourceName}</span>
              </span>
            </span>
            <span className="num flex shrink-0 flex-col items-end leading-tight">
              <span className="text-[14px] 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>
              {s.allInUsd !== null && Math.abs(s.allInUsd - s.priceUsd) >= 0.5 ? <span className="text-[10px] text-subtle">{fmtMoney(s.priceUsd)} hammer</span> : s.currency !== 'USD' ? <span className="text-[10px] text-subtle">{fmtMoney(s.price, s.currency)}</span> : <span className="text-[10px] text-subtle">{humanize(s.saleType)}</span>}
            </span>
          </a>
        </li>
      ))}
    </ul>
  );
}

export function SalesTable({ items, showAsset = true, className, emptyDescription = 'Sales appear once connectors ingest verified transactions.', responsive = true }: { items: SaleRow[]; showAsset?: boolean; className?: string; emptyDescription?: string; responsive?: boolean }) {
  if (!items.length) return <EmptyState title="No sales recorded" description={emptyDescription} />;
  if (responsive) {
    return (
      <>
        <div className="md:hidden">
          <SalesCards items={items} />
        </div>
        <div className="hidden md:block">
          <SalesTable items={items} showAsset={showAsset} className={className} responsive={false} />
        </div>
      </>
    );
  }
  return (
    <Table className={className}>
      <thead>
        <tr>
          <th className={th}>Date</th>
          {showAsset ? <th className={th}>Asset</th> : <th className={th}>Listing title</th>}
          <th className={th}>Grade</th>
          <th className={cn(th, 'text-right')}>Price</th>
          <th className={th}>Type</th>
          <th className={th}>Source</th>
          <th className={th}>Quality</th>
        </tr>
      </thead>
      <tbody>
        {items.map((s) => (
          <tr key={s.id} className="hover:bg-sunken">
            <td className={cn(td, 'text-muted')} title={s.saleDate.toISOString()}>
              {fmtDate(s.saleDate)}
            </td>
            <td className={cn(td, 'max-w-[360px]')}>
              {showAsset && s.assetSlug ? (
                <AssetTitleCell slug={s.assetSlug} title={s.assetTitle ?? s.rawTitle} categorySlug={s.categorySlug} image={s.heroImageUrl ?? s.imageUrls[0]} sub={s.rawTitle !== s.assetTitle ? s.rawTitle : null} size={32} />
              ) : (
                <span className="flex items-center gap-2">
                  <Thumb src={s.imageUrls[0]} alt="" size={28} />
                  <span className="truncate text-muted" title={s.rawTitle}>
                    {s.rawTitle}
                  </span>
                </span>
              )}
            </td>
            <td className={td}>
              <GradeBadge grader={s.grader} grade={s.grade} />
              {s.condition ? <span className="ml-1 text-[11px] text-muted">{humanize(s.condition)}</span> : null}
            </td>
            <td className={tdNum}>
              {s.allInUsd !== null && Math.abs(s.allInUsd - s.priceUsd) >= 0.5 ? (
                <span className="inline-flex flex-col items-end leading-tight">
                  <AllInCell allInUsd={s.allInUsd} priceUsd={s.priceUsd} basis={s.feeBasis} rate={s.buyerPremiumRate} />
                  <span className="text-[10px] text-subtle" title="Recorded (hammer) price">
                    {fmtMoney(s.priceUsd)} hammer{s.currency !== 'USD' ? ` · ${fmtMoney(s.price, s.currency)}` : ''}
                  </span>
                </span>
              ) : (
                <span className="inline-flex flex-col items-end leading-tight">
                  <PriceCell usd={s.priceUsd} native={s.price} currency={s.currency} />
                  {s.feeBasis && s.feeBasis !== 'none' ? <FeeBasisPill basis={s.feeBasis} rate={s.buyerPremiumRate} className="mt-0.5 text-[9px]" /> : null}
                </span>
              )}
            </td>
            <td className={cn(td, 'text-muted')}>
              {humanize(s.saleType)}
              {s.auctionHouse ? <span className="block text-[10px] text-subtle">{s.auctionHouse}</span> : null}
            </td>
            <td className={td}>
              <SourceLink name={s.sourceName} url={s.sourceUrl} />
            </td>
            <td className={td}>
              <VerificationBadge label={s.verification} reason={s.verificationReason} />
              <span className="num ml-1 text-[11px] text-muted">{Math.round(s.confidence * 100)}%</span>
              {s.flags.length ? <span className="ml-1 text-[10px] text-subtle" title={s.flags.join(', ')}>⚑</span> : null}
            </td>
          </tr>
        ))}
      </tbody>
    </Table>
  );
}

export function ListingsCards({ items, className }: { items: ListingRow[]; className?: string }) {
  return (
    <ul className={cn('divide-y divide-border', className)}>
      {items.map((l) => (
        <li key={l.id}>
          <a href={l.assetSlug ? `/asset/${l.assetSlug}` : l.sourceUrl} className="flex min-h-[64px] items-center gap-3 px-3 py-2.5 hover:bg-sunken">
            <Thumb src={l.imageUrls[0]} alt="" size={44} rounded="rounded-[5px]" />
            <span className="min-w-0 flex-1">
              <span className="line-clamp-2 text-[13px] font-medium leading-[1.3] text-fg">{l.assetTitle ?? l.rawTitle}</span>
              <span className="mt-0.5 flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[11px] text-muted">
                <GradeBadge grader={l.grader} grade={l.grade} />
                <span>{l.sourceName}</span>
                {l.location ? <span>· {l.location}</span> : null}
              </span>
            </span>
            <span className="num flex shrink-0 flex-col items-end leading-tight">
              <span className="text-[14px] font-semibold text-fg">{fmtMoney(l.priceUsd)}</span>
              {l.discountToRiv !== null ? <VsRiv discount={l.discountToRiv} className="text-[11px]" showLabel={false} /> : <span className="text-[10px] text-subtle">{humanize(l.listingType)}</span>}
            </span>
          </a>
        </li>
      ))}
    </ul>
  );
}

export function ListingsTable({ items, showAsset = true, className, emptyDescription = 'Live listings appear once marketplace connectors run.', responsive = true }: { items: ListingRow[]; showAsset?: boolean; className?: string; emptyDescription?: string; responsive?: boolean }) {
  if (!items.length) return <EmptyState title="No active listings" description={emptyDescription} />;
  if (responsive) {
    return (
      <>
        <div className="md:hidden">
          <ListingsCards items={items} />
        </div>
        <div className="hidden md:block">
          <ListingsTable items={items} showAsset={showAsset} className={className} responsive={false} />
        </div>
      </>
    );
  }
  return (
    <Table className={className}>
      <thead>
        <tr>
          {showAsset ? <th className={th}>Asset</th> : <th className={th}>Listing</th>}
          <th className={th}>Grade</th>
          <th className={cn(th, 'text-right')}>Ask</th>
          <th className={cn(th, 'text-right')} title="Discount of the asking price to the RareIndex Valuation. Analytical data, not advice.">
            vs RIV
          </th>
          <th className={th}>Type</th>
          <th className={th}>Seller · location</th>
          <th className={th}>Source</th>
          <th className={th}>Seen</th>
        </tr>
      </thead>
      <tbody>
        {items.map((l) => (
          <tr key={l.id} className="hover:bg-sunken">
            <td className={cn(td, 'max-w-[360px]')}>
              {showAsset && l.assetSlug ? (
                <AssetTitleCell slug={l.assetSlug} title={l.assetTitle ?? l.rawTitle} categorySlug={l.categorySlug} image={l.imageUrls[0]} sub={l.rawTitle !== l.assetTitle ? l.rawTitle : null} size={32} />
              ) : (
                <span className="flex items-center gap-2">
                  <Thumb src={l.imageUrls[0]} alt="" size={28} />
                  <span className="truncate text-muted" title={l.rawTitle}>
                    {l.rawTitle}
                  </span>
                </span>
              )}
            </td>
            <td className={td}>
              <GradeBadge grader={l.grader} grade={l.grade} />
              {l.condition ? <span className="ml-1 text-[11px] text-muted">{humanize(l.condition)}</span> : null}
            </td>
            <td className={tdNum}>
              <PriceCell usd={l.priceUsd} native={l.price} currency={l.currency} />
              {l.shippingCost ? <span className="block text-[10px] text-subtle">+{fmtMoney(l.shippingCost, l.currency ?? 'USD')} ship</span> : null}
            </td>
            <td className={tdNum}>
              {l.discountToRiv === null ? (
                <span className="text-subtle" title="No valuation to compare against">—</span>
              ) : (
                <span className="inline-flex flex-col items-end leading-tight">
                  <VsRiv discount={l.discountToRiv} showLabel={false} />
                  {l.assetRivUsd !== undefined && l.assetRivUsd !== null ? <span className="text-[10px] text-subtle">RIV {fmtMoney(l.assetRivUsd)}</span> : null}
                </span>
              )}
            </td>
            <td className={cn(td, 'text-muted')}>
              {humanize(l.listingType)}
              {l.bidCount !== null ? <span className="block text-[10px] text-subtle">{l.bidCount} bids</span> : null}
              {l.endsAt ? <span className="block text-[10px] text-subtle">ends {fmtRelative(l.endsAt)}</span> : null}
            </td>
            <td className={cn(td, 'text-muted')}>
              {l.seller ?? '—'}
              {l.location ? <span className="block text-[10px] text-subtle">{l.location}</span> : null}
            </td>
            <td className={td}>
              <SourceLink name={l.sourceName} url={l.sourceUrl} />
            </td>
            <td className={cn(td, 'text-muted')}>{fmtRelative(l.lastSeenAt)}</td>
          </tr>
        ))}
      </tbody>
    </Table>
  );
}

export function LotsTable({ items, className, emptyDescription = 'Auction lots appear once auction-house connectors run.' }: { items: LotRow[]; className?: string; emptyDescription?: string }) {
  if (!items.length) return <EmptyState title="No auction lots" description={emptyDescription} />;
  return (
    <Table className={className}>
      <thead>
        <tr>
          <th className={th}>Lot</th>
          <th className={th}>Auction</th>
          <th className={cn(th, 'text-right')}>Estimate</th>
          <th className={cn(th, 'text-right')}>Bid / hammer</th>
          <th className={cn(th, 'text-right')}>RIV</th>
          <th className={th}>Ends</th>
          <th className={th}>Status</th>
        </tr>
      </thead>
      <tbody>
        {items.map((l) => (
          <tr key={l.id} className="hover:bg-sunken">
            <td className={cn(td, 'max-w-[360px]')}>
              <span className="flex items-center gap-2">
                <Thumb src={l.imageUrls[0]} alt="" size={32} />
                <span className="min-w-0">
                  <a href={l.url} target="_blank" rel="noopener nofollow" className="block truncate font-medium text-fg hover:underline" title={l.title}>
                    {l.lotNumber ? `Lot ${l.lotNumber} · ` : ''}
                    {l.title}
                  </a>
                  {l.assetSlug ? (
                    <a href={`/asset/${l.assetSlug}`} className="block truncate text-[11px] text-muted hover:text-fg">
                      {l.assetTitle}
                    </a>
                  ) : (
                    <span className="block text-[11px] text-subtle">Not yet matched to a canonical asset</span>
                  )}
                </span>
              </span>
            </td>
            <td className={cn(td, 'text-muted')}>
              {l.auctionHouse}
              {l.auctionName ? <span className="block max-w-[200px] truncate text-[10px] text-subtle">{l.auctionName}</span> : null}
            </td>
            <td className={tdNum}>{l.estimateLow !== null || l.estimateHigh !== null ? `${fmtMoney(l.estimateLow, l.currency ?? 'USD')} – ${fmtMoney(l.estimateHigh, l.currency ?? 'USD')}` : '—'}</td>
            <td className={tdNum}>{l.hammerPrice !== null ? <span className="font-medium">{fmtMoney(l.hammerPrice, l.currency ?? 'USD')}</span> : l.currentBid !== null ? fmtMoney(l.currentBid, l.currency ?? 'USD') : '—'}</td>
            <td className={tdNum}>{fmtMoney(l.rivUsd)}</td>
            <td className={cn(td, 'text-muted')}>{l.endsAt ? `${fmtDate(l.endsAt, { time: true })} (${fmtRelative(l.endsAt)})` : '—'}</td>
            <td className={td}>
              <Badge tone={l.status === 'live' ? 'gain' : l.status === 'upcoming' ? 'index' : 'neutral'}>{l.status}</Badge>
            </td>
          </tr>
        ))}
      </tbody>
    </Table>
  );
}

export function pctLabel(v: number | null): string {
  return fmtPct(v);
}