/* ============================================================
   斗地主 · UI 组件
   ============================================================ */
const { useState, useEffect, useRef } = React;

/* ---------- 单张扑克牌 ---------- */
function Card({ card, selected, hintable, onClick, onDoubleClick, style }) {
  if (!card) return null;
  const isJoker = card.suit === 'joker';
  const wild = card.laizi === true;
  const cls = ['card', card.color === 'red' ? 'red' : '', isJoker ? 'joker-card' : '',
    wild ? 'laizi' : '', selected ? 'selected' : '', hintable ? 'hintable' : ''].filter(Boolean).join(' ');
  const label = isJoker ? (card.joker === 'big' ? 'JOKER' : 'joker') : card.rank;
  return (
    <div className={cls} style={style} onClick={onClick} onDoubleClick={onDoubleClick}>
      <div className="corner">
        <span className="r">{isJoker ? (card.joker === 'big' ? '大' : '小') : card.rank}</span>
        <span className="s">{isJoker ? '王' : card.symbol}</span>
      </div>
      <div className="pip">{isJoker ? (card.joker === 'big' ? '大王' : '小王') : card.symbol}</div>
      {wild && <div className="laizi-badge">癞</div>}
    </div>
  );
}

/* ---------- 牌背 ---------- */
function CardBack({ style }) {
  return <div className="card back" style={style} />;
}

/* ---------- 计时环 ---------- */
function TimerRing({ progress }) {
  const R = 45, C = 2 * Math.PI * R;
  return (
    <svg className="timer-ring" viewBox="0 0 100 100">
      <circle className="track" cx="50" cy="50" r={R} />
      <circle className="prog" cx="50" cy="50" r={R}
        strokeDasharray={C} strokeDashoffset={C * (1 - progress)}
        transform="rotate(-90 50 50)" />
    </svg>
  );
}

/* ---------- 对手座位 ---------- */
function OpponentSeat({ side, player, active, timer, isLandlord }) {
  return (
    <div className={`seat ${side}`}>
      <div className="avatar-wrap">
        {isLandlord && <div className="crown">👑</div>}
        <div className={`avatar ${active ? 'active' : ''}`}>{player.face}</div>
        {active && <TimerRing progress={timer} />}
        <div className={`role-tag ${isLandlord ? 'landlord' : 'farmer'}`}>
          {isLandlord ? '地主' : '农民'}
        </div>
      </div>
      <div className="seat-info">
        <div className="pname">{player.name}</div>
        <div className="coins">{player.coins.toLocaleString()}</div>
        <div className="cardback-count">
          <div className="mini-back" />
          <span className="num">{player.hand.length}</span>
        </div>
      </div>
    </div>
  );
}

/* ---------- 我的座位信息 ---------- */
function MySeat({ player, active, timer, isLandlord }) {
  return (
    <div className="seat me">
      <div className="avatar-wrap">
        {isLandlord && <div className="crown">👑</div>}
        <div className={`avatar ${active ? 'active' : ''}`}>{player.face}</div>
        {active && <TimerRing progress={timer} />}
        {(isLandlord !== null) && (
          <div className={`role-tag ${isLandlord ? 'landlord' : 'farmer'}`}>
            {isLandlord ? '地主' : '农民'}
          </div>
        )}
      </div>
      <div className="seat-info">
        <div className="pname">{player.name}</div>
        <div className="coins">{player.coins.toLocaleString()}</div>
      </div>
    </div>
  );
}

/* ---------- 出牌区 ---------- */
function PlayZone({ pos, move }) {
  // move: { cards, pass, label, anim }
  if (!move) return <div className={`play-zone ${pos}`} />;
  return (
    <div className={`play-zone ${pos}`}>
      {move.label && <div className="move-label">{move.label}</div>}
      {move.pass
        ? <div className="pass-stamp">不出</div>
        : <div className={`played-cards ${move.anim ? 'anim' : ''}`}>
            {move.cards.map((c, i) => (
              <Card key={c.id} card={c}
                style={{ marginLeft: i ? -26 : 0, animationDelay: `${i * 28}ms` }} />
            ))}
          </div>}
    </div>
  );
}

/* ---------- 底牌 ---------- */
function HoleCards({ cards, revealed }) {
  return (
    <div className="hole-cards">
      <div className="hole-label">底　牌</div>
      <div className="row">
        {cards.map((c, i) => revealed
          ? <Card key={c.id} card={c} />
          : <CardBack key={i} style={{ '--cw': '50px', '--ch': '70px' }} />)}
      </div>
    </div>
  );
}

/* ---------- 喊话气泡 ---------- */
function Bubble({ text, pos, score }) {
  return (
    <div className={`bubble ${pos} ${score ? 'score-bubble' : ''}`}
      style={bubblePosition(pos)}>
      {text}
    </div>
  );
}
function bubblePosition(pos) {
  switch (pos) {
    case 'left':  return { left: 130, top: 220 };
    case 'right': return { right: 130, top: 220 };
    case 'me':    return { left: 130, bottom: 130 };
    default: return {};
  }
}

Object.assign(window, { Card, CardBack, TimerRing, OpponentSeat, MySeat, PlayZone, HoleCards, Bubble });