/* eslint-disable */
const { useState, useEffect } = React;

// ── Selection Card (character or quirk) ──────────────
function SelectionCard({ kind, item, idx, total, onReroll, onLock, onOpenPartyInfo, onOpenHowTo }) {
  // 'kind' = 'character' | 'quirk'
  const [phase, setPhase] = useState('enter'); // 'enter' | 'idle' | 'rip'
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [displayItem, setDisplayItem] = useState(item);
  const [displayIdx, setDisplayIdx] = useState(idx);

  useEffect(() => {
    if (item !== displayItem) {
      // reroll already triggered the rip; this effect just refreshes when next mounts
    }
  }, [item]);

  useEffect(() => {
    setPhase('enter');
    const t = setTimeout(() => setPhase('idle'), 600);
    return () => clearTimeout(t);
  }, [displayItem]);

  function reroll() {
    if (phase === 'rip') return;
    setPhase('rip');
    setTimeout(() => {
      onReroll();
    }, 460);
  }

  // Sync with parent prop changes (after rip completes the parent advances)
  useEffect(() => {
    setDisplayItem(item);
    setDisplayIdx(idx);
  }, [item, idx]);

  const heading = kind === 'character' ? "THY CHARACTER" : "THY QUIRK";
  const counterText = kind === 'character'
    ? `CHARACTER ${displayIdx + 1} OF ${total}`
    : `QUIRK ${displayIdx + 1} OF ${total}`;

  return (
    <div className="screen">
      <div className="counter">{counterText}</div>

      <div className="card-stack">
        <div className={'card ' + (kind === 'quirk' ? 'quirk-card ' : '') + phase} key={kind === 'character' ? displayItem.name : displayItem}>
          <SigilSVG />
          <div className="card-kicker">{heading}</div>
          {kind === 'character' ? (
            <>
              <h2 className="card-name">{displayItem.name}</h2>
              <div className="card-desc">{displayItem.description}</div>
            </>
          ) : (
            <h2 className="card-name">"{displayItem}"</h2>
          )}
        </div>
      </div>

      <div className="actions">
        <button className="btn" onClick={reroll}>Re-roll</button>
        <button className="btn btn--primary" onClick={() => setConfirmOpen(true)}>Lock In</button>
      </div>

      <div className="bottom-nav">
        <button className="btn btn--ghost" onClick={onOpenPartyInfo}>Details on the party — when, where, why?</button>
        <button className="btn btn--ghost" onClick={onOpenHowTo}>How to play Party Quirks</button>
      </div>

      {confirmOpen && (
        <ConfirmDialog
          title={kind === 'character' ? 'Lock in this character?' : 'Lock in this quirk?'}
          body={
            <>
              <p style={{textAlign:'center', margin:'6px 0 14px'}}>
                {kind === 'character'
                  ? <><b>{displayItem.name}</b><br/><i>{displayItem.description}</i></>
                  : <i>"{displayItem}"</i>}
              </p>
              <p style={{textAlign:'center', color:'#7a1f1f', fontWeight:'bold', margin:'12px 0 0'}}>
                This is permanent. There is no going back.
              </p>
            </>
          }
          confirmLabel={kind === 'character' ? 'Lock in character' : 'Lock in quirk'}
          onConfirm={() => { setConfirmOpen(false); onLock(); }}
          onCancel={() => setConfirmOpen(false)}
        />
      )}
    </div>
  );
}

// ── Reveal screen ────────────────────────────────────
function RevealScreen({ character, quirk, onOpenPartyInfo, onOpenHowTo, onReset }) {
  return (
    <div className="screen">
      <div className="counter">YOUR ASSIGNMENT</div>
      <h1 className="h-rpg" style={{fontSize:'clamp(28px,5vw,42px)'}}>The dice are cast.</h1>
      <div className="body-text" style={{maxWidth:520, fontStyle:'italic'}}>
        Cross the threshold and become.
      </div>

      <div className="reveal">
        <div className="reveal-card">
          <SigilSVG />
          <div className="reveal-kicker">YOU ARE</div>
          <div className="reveal-rule" />
          <h2 className="reveal-name">{character.name}</h2>
          <p className="reveal-desc">{character.description}</p>
        </div>
        <div className="reveal-card">
          <SigilSVG />
          <div className="reveal-kicker">YOUR QUIRK</div>
          <div className="reveal-rule" />
          <p className="reveal-desc" style={{fontSize:'clamp(18px,3vw,22px)'}}>"{quirk}"</p>
        </div>
      </div>

      <div className="bottom-nav">
        <button className="btn btn--ghost" onClick={onOpenPartyInfo}>Details on the party — when, where, why?</button>
        <button className="btn btn--ghost" onClick={onOpenHowTo}>How to play Party Quirks</button>
      </div>

      <div className="footnote">
        Log back in any time with your email to view this assignment.
      </div>
    </div>
  );
}

// ── Confirm Dialog ───────────────────────────────────
function ConfirmDialog({ title, body, confirmLabel, onConfirm, onCancel }) {
  return (
    <div className="modal-backdrop" onClick={onCancel}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h2>{title}</h2>
        <div className="scroll-rule" />
        <div>{body}</div>
        <div className="actions" style={{marginTop:24}}>
          <button className="btn" onClick={onCancel}>Cancel</button>
          <button className="btn btn--danger" onClick={onConfirm}>{confirmLabel}</button>
        </div>
      </div>
    </div>
  );
}

// ── Info Modals ──────────────────────────────────────
function PartyInfoModal({ onClose }) {
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="close-x" onClick={onClose} aria-label="Close">✕</button>
        <h2>Details of the Gathering</h2>
        <div className="scroll-rule" />
        <div className="modal-row"><span className="label">Venue</span><span className="value">13 Audrey St, Charlemont, 3217</span></div>
        <div className="modal-row"><span className="label">Date</span><span className="value">Saturday, 3rd of October</span></div>
        <div className="modal-row"><span className="label">The Game</span><span className="value">Commences 6:30 PM sharp, runs until ~8:30 PM</span></div>
        <div className="modal-row"><span className="label">After</span><span className="value">The party converts into a normal, chill party</span></div>
        <div className="modal-row"><span className="label">Dress</span><span className="value">Dress up if you wish — ultimately, up to you</span></div>
        <div className="scroll-rule" />
        <p style={{textAlign:'center', fontStyle:'italic'}}>
          A celebration of Russell's 31st turning of the wheel.
        </p>
      </div>
    </div>
  );
}

function HowToPlayModal({ onClose }) {
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="close-x" onClick={onClose} aria-label="Close">✕</button>
        <h2>How to Play Party Quirks</h2>
        <div className="scroll-rule" />
        <p>This is no ordinary gathering. Every guest is <b>both host and character</b> — at once.</p>
        <ul>
          <li>You arrive at the party as your <b>assigned character</b>, performing your <b>assigned quirk</b>.</li>
          <li>Everyone else is doing the same. Trust no one, suspect everyone.</li>
          <li>Your quest: <b>guess who everyone else is playing</b>, and what their quirk is.</li>
          <li><b>Help others get there.</b> You're meant to make your character and quirk discoverable — play them big and obvious. Don't intentionally gatekeep it.</li>
          <li>There will be a <b>guessing box</b> to fill in during the night: your name, who you think each person is, and their quirk. Most correct answers <b>wins a prize</b>.</li>
          <li>Stay in character for the game (6:30–8:30). Commit to the bit. Do not break.</li>
          <li>It is meant to be chaotic and hilarious. Lean into it.</li>
        </ul>
        <p style={{textAlign:'center', fontStyle:'italic', marginTop:18}}>
          The cleverer your guesses, the greater your renown.
        </p>
      </div>
    </div>
  );
}

// ── Sigil ornament ───────────────────────────────────
function SigilSVG() {
  return (
    <svg className="sigil" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
      <path d="M16 2 L20 12 L30 12 L22 18 L25 28 L16 22 L7 28 L10 18 L2 12 L12 12 Z"
            fill="none" stroke="#5c3a1e" strokeWidth="1.5" strokeLinejoin="round"/>
      <circle cx="16" cy="16" r="2" fill="#5c3a1e"/>
    </svg>
  );
}

window.PartyComponents = window.PartyComponents || {};
Object.assign(window.PartyComponents, {
  SelectionCard, RevealScreen, ConfirmDialog, PartyInfoModal, HowToPlayModal, SigilSVG
});