/* ============================================================
   SECRET ROLES — private hidden objectives; one player may be a traitor.
   Secrets render ONLY on the owning device (+ the host). The Main screen
   shows nothing identifying until the host triggers the reveal.
   • SecretMainLayer  — ambient cue, then the dramatic unmasking
   • SecretPlayerCard — a hold-to-reveal private card for the owner
   ============================================================ */
const { useState: useS_sr, useRef: useR_sr } = React;

/* ---------- MAIN SCREEN — ambient only, then reveal ---------- */
function SecretMainLayer(){
  const game = useGame();
  const s = game.secrets;
  useGameEvents((ev)=>{ if(ev.type==='secrets-reveal'){ try{ audio.play('boom'); }catch(_){} } });
  if(!s.active) return null;

  if(!s.revealed){
    return (
      <div className="secret-cue">
        <span className="secret-cue-eye">◑</span>
        <span className="secret-cue-text">{s.cue}</span>
      </div>
    );
  }

  const entries = game.players.filter(p=>s.roles[p.id]).map(p=>({ p, r:s.roles[p.id] }));
  const traitor = entries.find(e=>e.r.faction==='traitor');
  return (
    <div className="secret-reveal-stage">
      <Embers count={22}/>
      <div className="secret-reveal-title display">The Masks Come Off</div>
      <div className="secret-reveal-grid">
        {entries.map(({p,r})=>(
          <div key={p.id} className={`secret-reveal-card ${r.faction}`}>
            <div className="secret-rc-name">{p.name.split(' ')[0]}</div>
            <div className={`secret-rc-faction ${r.faction}`}>{r.faction==='traitor'?'⚔ Traitor':'✦ Loyal'}</div>
            <div className="secret-rc-role">{r.role}</div>
            <div className="secret-rc-objs">
              {r.objectives.map(o=>(
                <div key={o.id} className={`secret-rc-obj ${o.met===true?'met':o.met===false?'failed':'open'}`}>
                  <span className="secret-rc-obj-mark">{o.met===true?'✓':o.met===false?'✗':'•'}</span>
                  <span>{o.text}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
      {traitor && (
        <div className="secret-verdict">
          {traitor.r.objectives.length>0 && traitor.r.objectives.every(o=>o.met===true)
            ? `${traitor.p.name.split(' ')[0]} the traitor achieved their dark purpose.`
            : traitor.r.objectives.some(o=>o.met===false)
              ? `The party thwarted ${traitor.p.name.split(' ')[0]}.`
              : `${traitor.p.name.split(' ')[0]} walked among you all along.`}
        </div>
      )}
    </div>
  );
}
window.SecretMainLayer = SecretMainLayer;

/* ---------- PLAYER — a private hold-to-reveal card ---------- */
function SecretPlayerCard({ player }){
  const game = useGame();
  const s = game.secrets;
  const [open, setOpen] = useS_sr(false);
  const [viewing, setViewing] = useS_sr(false);
  const mine = s.roles[player.id];
  if(!mine) return null;
  const revealed = s.revealed;

  const hold = (on)=>{ setViewing(on); if(on) haptic([12]); };

  return (
    <>
      <button className={`secret-chip ${mine.faction} ${revealed?'open':''}`} onClick={()=>setOpen(true)}>
        <span className="secret-chip-mask">🎭</span> {revealed?'Your role':'Your secret'}
      </button>
      {open && (
        <div className="secret-modal" onClick={()=>setOpen(false)}>
          <div className={`secret-card ${viewing||revealed?'viewing':''} ${mine.faction}`} onClick={e=>e.stopPropagation()}>
            <div className="secret-card-head">
              <span className="secret-card-eyebrow">{revealed?'Revealed to all':'For your eyes only'}</span>
              <button className="secret-card-x" onClick={()=>setOpen(false)}>✕</button>
            </div>

            <div className="secret-card-body">
              <div className="face">
                <div className={`secret-faction-badge ${mine.faction}`}>{mine.faction==='traitor'?'⚔ Traitor':'✦ Loyal to the party'}</div>
                <div className="secret-role-name display">{mine.role}</div>
                <div className="secret-objs">
                  {mine.objectives.map(o=>(
                    <div key={o.id} className={`secret-obj ${o.met===true?'met':o.met===false?'failed':''}`}>
                      <span className="secret-obj-dot">{o.met===true?'✓':o.met===false?'✗':'◇'}</span>
                      <span>{o.text}</span>
                    </div>
                  ))}
                  {mine.objectives.length===0 && <div className="secret-obj"><span className="secret-obj-dot">◇</span><span>No objective — yet.</span></div>}
                </div>
              </div>
              {!revealed && !viewing && <div className="secret-cover">Press &amp; hold to reveal</div>}
            </div>

            {!revealed && (
              <button className="secret-hold-btn"
                onPointerDown={()=>hold(true)} onPointerUp={()=>hold(false)}
                onPointerLeave={()=>hold(false)} onContextMenu={e=>e.preventDefault()}>
                {viewing ? 'Release to hide' : 'Hold to reveal'}
              </button>
            )}
            <div className="secret-card-note">Keep this to yourself. {revealed?'':'It vanishes the moment you let go.'}</div>
          </div>
        </div>
      )}
    </>
  );
}
window.SecretPlayerCard = SecretPlayerCard;