// ============================================================================
// Shared UI: Card, HPBar, EnergyBar, FloatNum, Ornament, TimerRing, ActionCounter
// ============================================================================

const { useState, useEffect, useRef, useMemo } = React;

function PCard({ card, size = '', faceDown = false, inBest = false, dim = false, className = '', style = {}, onClick }) {
  if (faceDown || !card) {
    return (
      <div
        className={`pcard face-down ${size} ${className}`}
        style={style}
        onClick={onClick}
      ></div>
    );
  }
  const rank = card[0];
  const suit = card[1];
  const red  = suit === 'h' || suit === 'd';
  return (
    <div
      className={`pcard ${size} ${red ? 'is-red' : 'is-black'} ${inBest ? 'in-best' : ''} ${dim ? 'dim' : ''} ${className}`}
      style={style}
      onClick={onClick}
    >
      <div className="corner tl">
        <span>{Poker.RANK_LABEL[rank]}</span>
        <span className="glyph">{Poker.SUIT_GLYPH[suit]}</span>
      </div>
      <div className="center">{Poker.SUIT_GLYPH[suit]}</div>
      <div className="corner br">
        <span>{Poker.RANK_LABEL[rank]}</span>
        <span className="glyph">{Poker.SUIT_GLYPH[suit]}</span>
      </div>
    </div>
  );
}

function HPBar({ hp, maxHp, shield = 0, hit = false, label, mirror = false }) {
  const pct = Math.max(0, Math.min(100, (hp / maxHp) * 100));
  const sPct = Math.max(0, Math.min(100 - pct, (shield / maxHp) * 100));
  return (
    <div className={`hpbar ${hit ? 'hp-hit' : ''}`} style={{flexDirection: mirror ? 'row-reverse' : 'row'}}>
      <div className="track">
        <div className="fill" style={{ width: pct + '%' }} />
        {sPct > 0 && (
          <div className="shield-fill" style={{ left: pct + '%', width: sPct + '%' }} />
        )}
      </div>
      <div className="num">
        {Math.max(0, Math.ceil(hp))}<span style={{opacity:.4}}>/{maxHp}</span>
        {shield > 0 && <span style={{color:'var(--shield)',marginLeft:4}}>+{Math.ceil(shield)}</span>}
      </div>
    </div>
  );
}

function EnergyBar({ energy, max = 100, pips = 6 }) {
  const pct = Math.min(1, energy / max);
  const lit = Math.round(pct * pips);
  const full = energy >= max;
  return (
    <div className="energy">
      {Array.from({length: pips}).map((_, i) => (
        <div key={i} className={`pip ${i < lit ? 'lit' : ''} ${full ? 'full' : ''}`} />
      ))}
    </div>
  );
}

// floating damage number
function FloatNum({ value, kind = 'damage', x = 50, y = 50, onDone }) {
  useEffect(() => {
    const t = setTimeout(onDone, 1400);
    return () => clearTimeout(t);
  }, []);
  const color = {
    damage: '#ff8a4a',
    heal:   '#7adba0',
    shield: '#a0c8e8',
    poison: '#b8d870',
  }[kind] || '#ff8a4a';
  return (
    <div className="float-num" style={{ color, top: `${y}%`, left: `${x}%` }}>
      {kind === 'heal' ? '+' : kind === 'shield' ? '⛨' : kind === 'poison' ? '☠' : '−'}{Math.ceil(value)}
    </div>
  );
}

function Ornament({ width = 120 }) {
  return (
    <div className="divider-orn" style={{width}}>
      ✦ ✦ ✦
    </div>
  );
}

function TimerRing({ secondsLeft, totalSeconds = 10 }) {
  const pct = Math.max(0, Math.min(1, secondsLeft / totalSeconds));
  const deg = pct * 360;
  return (
    <div style={{
      width: 60, height: 60, borderRadius: '50%',
      background: `conic-gradient(var(--brass-1) ${deg}deg, rgba(80,40,20,0.3) ${deg}deg)`,
      display: 'grid', placeItems: 'center',
      boxShadow: '0 0 8px rgba(255,138,31,0.3)',
    }}>
      <div style={{
        width: 50, height: 50, borderRadius: '50%',
        background: 'var(--ink-1)',
        display: 'grid', placeItems: 'center',
        fontFamily: 'var(--font-mono)', fontSize: 18, color: 'var(--brass-1)',
      }}>
        {Math.ceil(secondsLeft)}
      </div>
    </div>
  );
}

function ActionCounter({ count, side = 'player' }) {
  return (
    <span className="mono" style={{
      fontSize: 12, color: count > 0 ? 'var(--brass-1)' : 'var(--parch-faded)',
      letterSpacing: '.05em',
    }}>
      ⚔ {count}
    </span>
  );
}

Object.assign(window, { PCard, HPBar, EnergyBar, FloatNum, Ornament, TimerRing, ActionCounter });