import type { AssetDepth, AssetLiquidation } from '@/lib/queries/depth';
import { fmtMoney, fmtNum, fmtPct, cn } from '@/lib/format';
import { Card, CardHeader, Table, th, td, tdNum, Badge, Unavailable, VsRiv } from '@/components/ui/primitives';

const fmtDays = (d: number | null) => (d === null ? null : d < 1 ? '< 1 day' : `~${Math.round(d)} day${Math.round(d) === 1 ? '' : 's'}`);

/**
 * Market depth (§25), RareIndex spread (§26), days on market (§30), time-to-liquidate (§24) and the
 * fair buy / sell ladder (§213–§214). Server-rendered; every number comes from observed listings and
 * the published valuation band, and missing evidence is shown as such.
 */
export function DepthLiquidationCard({ depth, liquidation, riv, variantLabel }: { depth: AssetDepth | null; liquidation: AssetLiquidation | null; riv: number | null; variantLabel: string | null }) {
  const d = depth?.depth ?? null;
  const m = liquidation?.model ?? null;
  const f = liquidation?.fair ?? null;
  const bands = d
    ? [
        { label: '±5 %', n: d.within5 },
        { label: '±10 %', n: d.within10 },
        { label: '±20 %', n: d.within20 },
      ]
    : [];
  const max = d ? Math.max(1, d.asks) : 1;
  return (
    <Card>
      <CardHeader
        title="Market depth & time to sell"
        subtitle={`Current asks around the valuation${depth?.scope === 'variant' ? ` of ${variantLabel ?? 'the representative variant'}` : ''}, observed days on market and a time-to-sale model by asking band. Model analytics from observed listings and sales, not advice.`}
      />
      <div className="grid gap-4 p-4 lg:grid-cols-3">
        {/* Depth */}
        <section>
          <h3 className="text-[11px] font-semibold uppercase tracking-wider text-subtle">Market depth</h3>
          {d && riv !== null ? (
            <>
              <dl className="mt-2 grid grid-cols-3 gap-2 text-[12px]">
                <div>
                  <dt className="text-[10px] uppercase tracking-wider text-subtle">Asks</dt>
                  <dd className="num font-medium text-fg">{fmtNum(d.asks)}</dd>
                </div>
                <div>
                  <dt className="text-[10px] uppercase tracking-wider text-subtle">Below RIV</dt>
                  <dd className="num font-medium text-fg">{fmtNum(d.belowRiv)}</dd>
                </div>
                <div>
                  <dt className="text-[10px] uppercase tracking-wider text-subtle">Above RIV</dt>
                  <dd className="num font-medium text-fg">{fmtNum(d.aboveRiv)}</dd>
                </div>
              </dl>
              <ul className="mt-3 grid gap-1.5">
                {bands.map((b) => (
                  <li key={b.label} className="grid grid-cols-[52px_1fr_36px] items-center gap-2 text-[11px]">
                    <span className="num text-muted">{b.label}</span>
                    <span className="h-2 overflow-hidden rounded-sm bg-inset" aria-hidden>
                      <span className="block h-full bg-index" style={{ width: `${Math.round((100 * b.n) / max)}%` }} />
                    </span>
                    <span className="num text-right text-fg">{b.n}</span>
                  </li>
                ))}
              </ul>
              <div className="mt-3 flex flex-wrap items-baseline gap-x-3 gap-y-1 text-[12px]">
                <span>
                  <span className="text-[10px] uppercase tracking-wider text-subtle">Best ask </span>
                  <span className="num font-medium">{d.lowestAsk === null ? <Unavailable reason="No active asks" /> : fmtMoney(d.lowestAsk)}</span>
                </span>
                <span>
                  <span className="text-[10px] uppercase tracking-wider text-subtle">Median ask </span>
                  <span className="num font-medium">{d.medianAsk === null ? <Unavailable reason="No active asks" /> : fmtMoney(d.medianAsk)}</span>
                </span>
                <span title="RareIndex spread: best ask versus the valuation of the same variant">
                  <span className="text-[10px] uppercase tracking-wider text-subtle">Spread </span>
                  <VsRiv discount={d.askRivSpread} className="text-[12px]" />
                </span>
              </div>
            </>
          ) : (
            <p className="mt-2 text-[12px] text-muted">Not enough data — depth needs a transaction-based valuation for this variant.</p>
          )}
        </section>

        {/* Days on market + bands */}
        <section>
          <h3 className="text-[11px] font-semibold uppercase tracking-wider text-subtle">
            Days on market{' '}
            {liquidation ? (
              <Badge tone={liquidation.level === 'category' ? 'alert' : 'neutral'} className="ml-1 normal-case tracking-normal">
                Model estimate · {liquidation.level === 'category' ? 'category-level' : 'this asset'}
              </Badge>
            ) : null}
          </h3>
          {m ? (
            <>
              <dl className="mt-2 grid grid-cols-4 gap-2 text-[12px]">
                {[
                  ['Sold', m.sold.n === 0 ? null : fmtNum(m.sold.n)],
                  ['Median', fmtDays(m.sold.median)],
                  ['P25 – P75', m.sold.p25 === null || m.sold.p75 === null ? null : `${Math.round(m.sold.p25)} – ${Math.round(m.sold.p75)} d`],
                  ['Sell-through', m.sellThrough === null ? null : fmtPct(m.sellThrough, 0, false)],
                ].map(([k, v]) => (
                  <div key={k as string}>
                    <dt className="text-[10px] uppercase tracking-wider text-subtle">{k}</dt>
                    <dd className="num font-medium text-fg">{v ?? <Unavailable reason="Not enough data" />}</dd>
                  </div>
                ))}
              </dl>
              <p className="mt-1 text-[11px] text-subtle">
                {fmtNum(m.withdrawn.n)} withdrawn/expired without a sale{m.withdrawn.median !== null ? ` (median ${fmtDays(m.withdrawn.median)} listed)` : ''} · {fmtNum(liquidation!.lifecycles)} lifecycles observed
              </p>
              <Table className="mt-3">
                <thead>
                  <tr>
                    <th className={th}>Asking band</th>
                    <th className={cn(th, 'text-right')}>Sold</th>
                    <th className={cn(th, 'text-right')}>Median time to sale</th>
                  </tr>
                </thead>
                <tbody>
                  {m.bands.map((b) => (
                    <tr key={b.band}>
                      <td className={cn(td, 'text-muted')}>{b.label}</td>
                      <td className={tdNum}>{b.n}</td>
                      <td className={tdNum}>{b.medianDays === null ? <span className="text-subtle" title="Fewer than 5 sold lifecycles in this band">Not enough data</span> : fmtDays(b.medianDays)}</td>
                    </tr>
                  ))}
                </tbody>
              </Table>
            </>
          ) : (
            <p className="mt-2 text-[12px] text-muted">Not enough data — no completed listing lifecycles observed for this asset or its category yet.</p>
          )}
        </section>

        {/* Fair buy / sell ladder */}
        <section>
          <h3 className="text-[11px] font-semibold uppercase tracking-wider text-subtle">Fair buy · fair sell</h3>
          {riv !== null && f ? (
            <Table className="mt-2">
              <tbody>
                {[
                  ['Aggressive buy', f.buyAggressive, null, 'RIV low band'],
                  ['Fair buy', f.buyFair, null, 'RIV'],
                  ['Fast sale', f.sellFast, f.sellFastDays, 'band with the shortest observed time to sale'],
                  ['Typical sale', f.sellTypical, f.sellTypicalDays, 'RIV'],
                  ['Patient sale', f.sellPatient, f.sellPatientDays, 'RIV high band'],
                ].map(([k, v, days, basis]) => (
                  <tr key={k as string}>
                    <td className={cn(td, 'text-muted')} title={`Basis: ${basis}`}>
                      {k}
                    </td>
                    <td className={cn(tdNum, 'font-medium')}>{v === null || v === undefined ? <Unavailable reason="Not enough data" /> : fmtMoney(v as number)}</td>
                    <td className={cn(tdNum, 'text-[11px] text-subtle')}>{days === null || days === undefined ? '' : fmtDays(days as number)}</td>
                  </tr>
                ))}
              </tbody>
            </Table>
          ) : (
            <p className="mt-2 text-[12px] text-muted">Not enough data — the ladder needs a published valuation.</p>
          )}
          <p className="mt-2 text-[11px] text-subtle">Prices come from the RIV low/high band; days from the observed asking bands above. Model analytics, not advice.</p>
        </section>
      </div>
    </Card>
  );
}