import { createPortal } from 'react-dom'
import { PREVIEW_WIDTH, type PreviewState } from '../hooks/usePreview'
import { formatUsd, printingLabel } from '../lib/price'
import { ManaCost, ManaText } from './ManaCost'

// Rules-text panel shown on hover, built from the server's own card data
// (no external image requests). Rendered into <body>, not where it's used:
// a panel inside the sidebar (the ban list) would otherwise sit in the
// sidebar's stacking context, and the deck column would paint over it.
export function CardPreview({ state }: { state: PreviewState | null }) {
  if (!state) return null
  const { card } = state
  // Multi-face cards (split, adventure, transform) join each field with " // ".
  const names = card.name.split(' // ')
  const types = card.type_line.split(' // ')
  const costs = card.mana_cost.split(' // ')
  const texts = card.oracle_text.split(' // ')
  return createPortal(
    <div className="card-preview" style={{ left: state.x, top: state.y, width: PREVIEW_WIDTH }} aria-hidden="true">
      {names.map((name, i) => (
        <div key={i} className="preview-face">
          <div className="preview-title">
            <span>{name}</span>
            <ManaCost cost={costs[i] ?? ''} />
          </div>
          <div className="preview-type">{types[i] ?? types[0]}</div>
          {(texts[i] ?? '').split('\n').filter(Boolean).map((para, j) => (
            <p key={j}><ManaText text={para} /></p>
          ))}
          {card.stats?.[i] && <div className="preview-stats">{card.stats[i]}</div>}
        </div>
      ))}
      {card.price && (
        <div className="preview-price">
          Cheapest: <strong>{formatUsd(card.price.usd)}</strong> · {printingLabel(card.price)}
        </div>
      )}
    </div>,
    document.body,
  )
}