/* global React, CardFace, CardBack */
const { useState, useEffect, useRef } = React;

const toRoman = n => {
  if (n === 0) return '0';
  const vals = [[10,'X'],[9,'IX'],[5,'V'],[4,'IV'],[1,'I']];
  let r = '', num = n;
  for (const [v, s] of vals) { while (num >= v) { r += s; num -= v; } }
  return r;
};

// A flippable card — shows back, flips to face on click.
// Also used (face-up only) in detail/library views.
const FlipCard = ({ card, faceUp = false, reversed = false, onClick, size = 'md', className = '' }) => {
  const sizes = {
    xs: { w: 70,  h: 105 },
    sm: { w: 136, h: 204 },
    md: { w: 220, h: 330 },
    lg: { w: 300, h: 450 },
    xl: { w: 360, h: 540 }
  };
  const dim = sizes[size] || sizes.md;
  const radius = Math.round(dim.w * 0.05);

  return (
    <div
      className={`flip-card ${faceUp ? 'is-flipped' : ''} ${onClick ? 'is-clickable' : ''} ${className}`}
      style={{ width: dim.w, height: dim.h, '--card-radius': `${radius}px` }}
      onClick={onClick}
    >
      <div className="flip-card-inner">
        <div className="flip-card-back">
          <CardBack/>
        </div>
        <div className="flip-card-front">
          {card && <CardFace card={card} reversed={reversed}/>}
        </div>
      </div>
    </div>
  );
};

// Static face-up card for grids
const StaticCard = ({ card, reversed = false, size = 'sm', onClick, label }) => {
  const sizes = {
    xs: { w: 70,  h: 105 },
    sm: { w: 136, h: 204 },
    md: { w: 200, h: 300 },
    lg: { w: 260, h: 390 },
    xl: { w: 315, h: 472.5 },
    library: { w: 200, h: 300 }
  };
  const dim = sizes[size] || sizes.sm;
  const radius = Math.round(dim.w * 0.05);
  return (
    <div className={`static-card static-card-${size} ${onClick ? 'is-clickable' : ''}`} onClick={onClick} style={{ width: dim.w, '--card-radius': `${radius}px` }}>
      <div className="static-card-art" style={{ width: dim.w, height: dim.h }}>
        <CardFace card={card} reversed={reversed}/>
      </div>
      {label !== false && (
        <div className="static-card-label">
          <div className="cn">{card.roman && <><span className="card-num" style={{letterSpacing:0}}>{card.roman}</span>{' '}</>}{card.nameZh}{reversed && <span className="rev"> · 逆位</span>}</div>
          <div className="en">{card.nameEn}</div>
        </div>
      )}
    </div>
  );
};

window.FlipCard = FlipCard;
window.StaticCard = StaticCard;