/* Shared UI — 1st C&A: Traitors */
const { useState, useEffect, useRef } = React;

/* ---- atmospheric backdrop ---- */
function Room() {
  return <div className="t-room" aria-hidden="true" />;
}

/* ---- animated candle ---- */
function Candle({ scale = 1 }) {
  return (
    <span className="t-candle" style={{ transform: `scale(${scale})` }} aria-hidden="true">
      <span className="flame" />
      <span className="stick" />
    </span>
  );
}

/* ---- gold divider with diamond ---- */
function Rule() {
  return <div className="t-rule"><span className="diamond" /></div>;
}

/* ---- brand lockup: Scout fleur + group tag ---- */
function Brand({ light = true }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 9, opacity: .9 }}>
      <img src="assets/fleur-white.svg" alt="" style={{ height: 22, width: 'auto', filter: 'drop-shadow(0 1px 2px rgba(0,0,0,.6))' }} />
      <span style={{ fontSize: '.66rem', fontWeight: 800, letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--t-fg3)' }}>
        1st Chilwell &amp; Attenborough
      </span>
    </div>
  );
}

/* ---- avatar disc ---- */
function Avatar({ player, size = 44, dim = false }) {
  const dead = player.status !== 'active';
  return (
    <span style={{
      width: size, height: size, flex: `0 0 ${size}px`, borderRadius: '50%',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      fontWeight: 900, fontSize: size * 0.36, color: '#fff',
      background: dead ? '#241b33' : player.color,
      boxShadow: dead ? 'none' : `0 0 0 1px rgba(255,255,255,.12), 0 4px 14px ${player.color}55`,
      filter: dead || dim ? 'grayscale(1) brightness(.6)' : 'none',
      position: 'relative',
    }}>
      {player.avatar}
      {player.status === 'murdered' && <DeathMark kind="murder" />}
      {player.status === 'banished' && <DeathMark kind="banish" />}
    </span>
  );
}
function DeathMark({ kind }) {
  return (
    <span style={{
      position: 'absolute', inset: 0, borderRadius: '50%',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'rgba(7,5,11,.55)', fontSize: '1rem',
      color: kind === 'murder' ? 'var(--t-traitor-glow)' : 'var(--t-gold)',
    }} aria-hidden="true">{kind === 'murder' ? '✦' : '⌧'}</span>
  );
}

/* ---- a tappable player tile (used in vote screens) ---- */
function PlayerTile({ player, selected, onPick, disabled, badge }) {
  return (
    <button
      type="button"
      onClick={() => !disabled && onPick && onPick(player.id)}
      disabled={disabled}
      style={{
        appearance: 'none', cursor: disabled ? 'default' : 'pointer', textAlign: 'left',
        display: 'flex', alignItems: 'center', gap: 12, width: '100%',
        padding: '11px 13px', borderRadius: 'var(--t-r-md)', fontFamily: 'inherit',
        background: selected ? 'rgba(230,179,77,.12)' : 'var(--t-panel)',
        border: `1px solid ${selected ? 'var(--t-gold)' : 'var(--t-line)'}`,
        boxShadow: selected ? '0 0 0 2px rgba(230,179,77,.25)' : 'none',
        transition: 'all 160ms var(--t-ease)', opacity: disabled && !selected ? .55 : 1,
      }}>
      <Avatar player={player} size={40} />
      <span style={{ flex: 1, minWidth: 0 }}>
        <span style={{ display: 'block', fontWeight: 800, fontSize: '1rem', color: 'var(--t-fg)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
          {player.name}{player.isHost ? ' · Host' : ''}
        </span>
        {player.status !== 'active' && (
          <span style={{ fontSize: '.74rem', fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', color: player.status === 'murdered' ? '#ff9aa0' : 'var(--t-gold)' }}>
            {player.status}
          </span>
        )}
      </span>
      {badge != null && (
        <span style={{ fontWeight: 900, fontSize: '.9rem', color: 'var(--t-gold)', minWidth: 22, textAlign: 'center' }}>{badge}</span>
      )}
      {selected && <span style={{ color: 'var(--t-gold)', fontSize: '1.1rem' }}>✓</span>}
    </button>
  );
}

/* ---- pill / tag ---- */
function Pill({ kind, children }) {
  const cls = 't-pill' + (kind ? ' t-pill--' + kind : '');
  return <span className={cls}>{children}</span>;
}

/* ---- stat block ---- */
function Stat({ label, value, accent }) {
  return (
    <div style={{ flex: 1, textAlign: 'center', padding: '10px 6px' }}>
      <div style={{ fontWeight: 900, fontSize: '1.5rem', color: accent || 'var(--t-fg)', lineHeight: 1 }}>{value}</div>
      <div style={{ fontSize: '.62rem', fontWeight: 800, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--t-fg3)', marginTop: 6 }}>{label}</div>
    </div>
  );
}

/* ---- top app bar ---- */
function TopBar({ title, sub, right }) {
  return (
    <div className="t-spread" style={{ padding: '18px 22px 8px' }}>
      <div>
        {sub && <div className="t-kicker" style={{ marginBottom: 4 }}>{sub}</div>}
        <div style={{ fontWeight: 900, fontSize: '1.15rem', letterSpacing: '.02em' }}>{title}</div>
      </div>
      {right}
    </div>
  );
}

/* ---- phase banner (day/night) ---- */
function PhaseBanner({ phase, round }) {
  const map = {
    day:    { label: 'Round Table', icon: '☀', color: 'var(--t-gold)' },
    night:  { label: 'Nightfall', icon: '☾', color: 'var(--t-purple-bright)' },
    recruit:{ label: 'The Offer', icon: '✦', color: 'var(--t-traitor-glow)' },
  };
  const m = map[phase] || map.day;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'center' }}>
      <span style={{ fontSize: '1.1rem', color: m.color }}>{m.icon}</span>
      <span style={{ fontWeight: 900, letterSpacing: '.18em', textTransform: 'uppercase', fontSize: '.8rem', color: m.color }}>
        {m.label}{round ? ` · Round ${round}` : ''}
      </span>
      <span style={{ fontSize: '1.1rem', color: m.color }}>{m.icon}</span>
    </div>
  );
}

/* ---- modal-ish overlay sheet ---- */
function Sheet({ children, onClose, tone }) {
  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 40, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
      background: 'rgba(5,3,9,.72)', backdropFilter: 'blur(2px)' }} onClick={onClose}>
      <div className="t-enter" onClick={(e) => e.stopPropagation()} style={{
        background: 'linear-gradient(180deg, var(--t-panel), var(--t-bg))',
        borderTop: `2px solid ${tone || 'var(--t-gold-dim)'}`, borderTopLeftRadius: 24, borderTopRightRadius: 24,
        padding: '24px 22px calc(28px + env(safe-area-inset-bottom))', maxWidth: 520, margin: '0 auto', width: '100%',
        boxShadow: '0 -20px 60px rgba(0,0,0,.6)' }}>
        {children}
      </div>
    </div>
  );
}

Object.assign(window, {
  Room, Candle, Rule, Brand, Avatar, PlayerTile, Pill, Stat, TopBar, PhaseBanner, Sheet,
});