// Card components
const { useState, useEffect, useRef, useMemo, useCallback } = React;

function Card({ card, selected, dim, onClick, onPointerDown, style, className, innerRef, face }) {
  if (!card) return null;
  const faceStyle = face || (window.__cardFace || 'funky');
  const cls = [
    'card',
    card.joker ? 'joker' : card.color,
    selected ? 'selected' : '',
    dim ? 'dim' : '',
    faceStyle === 'funky' ? 'face-funky' : 'face-classic',
    className || ''
  ].join(' ');
  const suit = card.joker ? '' : card.suit;
  const label = card.joker ? '★' : card.rank;
  const isFunky = faceStyle === 'funky';
  const isRoyal = !card.joker && (card.rank === 'J' || card.rank === 'Q' || card.rank === 'K');
  const CharFace = card.joker ? window.CharacterFaces?.JOKER
    : (isRoyal ? window.CharacterFaces?.[card.rank] : null);
  return (
    <div
      className={cls}
      style={style}
      onClick={onClick}
      onPointerDown={onPointerDown}
      ref={innerRef}
      data-card-id={card.id}
    >
      {card.joker ? (
        <>
          <div className="idx-tl">JOKER</div>
          {isFunky && CharFace
            ? <div className="char-slot"><CharFace /></div>
            : <div className="pip">★</div>}
          <div className="idx-br">JOKER</div>
        </>
      ) : (
        <>
          <div className="idx-tl"><span>{label}</span><span className="idx-suit">{suit}</span></div>
          {isFunky && CharFace
            ? <div className="char-slot"><CharFace suit={suit}/></div>
            : <div className="pip">{suit}</div>}
          <div className="idx-br"><span>{label}</span><span className="idx-suit">{suit}</span></div>
        </>
      )}
    </div>
  );
}

function CardBack({ style, design = 'back-neon', className = '', rotation }) {
  const s = { ...(style || {}) };
  if (rotation != null) s.transform = `rotate(${rotation}deg)`;
  return <div className={`card-back ${design} ${className}`} style={s} />;
}

function Pile({ children, label, count, onClick, className = '', glow = '' }) {
  return (
    <div className={`pile ${className} ${glow ? 'glow-' + glow : ''}`} onClick={onClick}>
      {label && <div className="pile-label">{label}</div>}
      {children}
      {count != null && <div className="pile-count">{count}</div>}
    </div>
  );
}

function Avatar({ personality }) {
  const p = window.RomeAI.PERSONALITIES[personality];
  return (
    <div className="avatar" style={{ background: p.avatar.bg }}>
      {p.avatar.glyph}
    </div>
  );
}

function OpponentBadge({ personality, active, handCount, thinking }) {
  const p = window.RomeAI.PERSONALITIES[personality];
  return (
    <div className={`opponent-card ${active ? 'active' : ''}`}>
      <Avatar personality={personality} />
      <div className="opponent-info">
        <div className="opponent-name">{p.name} <span className="muted" style={{fontWeight:400,fontSize:11}}>· {p.title}</span></div>
        <div className="opponent-title">{thinking ? 'thinking…' : active ? 'their turn' : 'your move'}</div>
      </div>
      <div className="opponent-hand-count">{handCount} <span style={{opacity:.5}}>cards</span></div>
    </div>
  );
}

function Toast({ toast }) {
  return (
    <div className={`toast ${toast.kind}`}>
      {toast.who && <div className="who">{toast.who}</div>}
      {toast.text}
    </div>
  );
}

function MeldGroup({ meld }) {
  return (
    <div className={`meld-group ${meld.owner === 'you' ? 'own' : ''}`}>
      <div className="tag">{meld.type} · {meld.owner === 'you' ? 'You' : 'AI'}</div>
      {meld.cards.map(c => <Card key={c.id} card={c} />)}
    </div>
  );
}

Object.assign(window, { Card, CardBack, Pile, Avatar, OpponentBadge, Toast, MeldGroup });