import EntityBadge from '@/components/common/EntityBadge'
import type { TokenLiquidityMarketView } from '@/utils/tokenMarket'
import {
  formatCashInBankLabel,
  formatHoLiquidityAuditFreshness,
  formatHoReserveCoverageLabel,
  formatSupplyNostroMatchLabel,
  formatTotalSupplyHoBackingLabel,
  resolveDisplayedCashInBankUsd,
} from '@/utils/tokenMarket'
import { formatUsdValue } from '@/utils/displayCurrency'

type HoBackingSummaryCardProps = {
  market: TokenLiquidityMarketView & { totalSupplyUsd?: number }
}

export default function HoBackingSummaryCard({ market }: HoBackingSummaryCardProps) {
  const coverage = market.hoReserveCoverage
  const nostroMatch = market.supplyNostroMatch

  return (
    <div className="rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/40">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <div className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
          HO backing &amp; audit
        </div>
        <div className="text-xs text-gray-500 dark:text-gray-400">{formatHoLiquidityAuditFreshness(market)}</div>
      </div>
      <div className="mt-4 grid gap-4 lg:grid-cols-2">
        <div className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
          <div className="font-semibold text-gray-900 dark:text-white">Nostro settlement (GL 13010)</div>
          <div>
            {formatCashInBankLabel(
              resolveDisplayedCashInBankUsd(market),
              market.cashInBankAudit,
              market.supplyNostroMatch,
            )}
          </div>
          {nostroMatch ? (
            <div className="flex flex-wrap items-center gap-2">
              <EntityBadge
                label={formatSupplyNostroMatchLabel(nostroMatch)}
                tone={nostroMatch.status === 'matched' ? 'success' : nostroMatch.status === 'break' ? 'warning' : 'neutral'}
              />
            </div>
          ) : null}
          {market.totalSupplyUsd != null ? (
            <div className="text-xs text-gray-500 dark:text-gray-400">
              {formatTotalSupplyHoBackingLabel(market.totalSupplyUsd, market.supplyNostroMatch)}
            </div>
          ) : null}
          <p className="text-xs text-gray-500 dark:text-gray-400">
            Per-token supply vs 1.2× external nostro cash. Large c* supply can break while reserve economics remain sufficient. GL 2100 M1 book money is never cash-in-bank.
          </p>
        </div>
        <div className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
          <div className="font-semibold text-gray-900 dark:text-white">Reserve coverage (GL 1000+1050)</div>
          {coverage ? (
            <>
              <div>{formatHoReserveCoverageLabel(coverage)}</div>
              <EntityBadge
                label={coverage.status === 'sufficient' ? 'Reserve sufficient' : coverage.status}
                tone={coverage.status === 'sufficient' ? 'success' : coverage.status === 'insufficient' ? 'warning' : 'neutral'}
              />
              <div className="text-xs text-gray-500 dark:text-gray-400">
                Reserve assets {formatUsdValue(coverage.reserveAssetsUsd)} · required{' '}
                {formatUsdValue(coverage.requiredReserveUsd)} · aggregate issued c*{' '}
                {formatUsdValue(coverage.issuedCStarUsd)}
              </div>
            </>
          ) : (
            <div className="text-gray-500">Reserve coverage unavailable</div>
          )}
          <p className="text-xs text-gray-500 dark:text-gray-400">
            M0 reserve stock vs 1.2× aggregate Chain 138 issued c*. Not correspondent nostro cash and not GL 2100 M1 book money.
          </p>
        </div>
      </div>
    </div>
  )
}
