const { Icon } = window.PryzeDesignSystem_b2bad9;
const { USER } = window.PryzeData;

const CONF_C = ['#FF5A2E', '#FF8A5B', '#FF6FA5', '#9C8FFF', '#5B4FE0', '#F3F0E8', '#FFD7C7'];
const FALL = Array.from({ length: 380 }, (_, i) => ({
  x: (i * 13.7) % 100,
  d: 1.9 + ((i * 7) % 30) / 10,
  dl: ((i * 11) % 52) / 10,
  r: (i * 83) % 900 - 450,
  sx: ((i * 29) % 90) - 45,
  w: 4 + (i % 4) * 2,
  h: (i % 5 === 0 ? 4 : 9) + (i % 3) * 4,
  rd: i % 5 === 0 ? '50%' : i % 3 === 0 ? '999px' : '1px',
  c: CONF_C[i % 7],
}));
const BURST = Array.from({ length: 210 }, (_, i) => ({
  a: (i * 37) % 360,
  dist: 120 + ((i * 23) % 200),
  up: 90 + ((i * 31) % 260),
  d: 1.1 + ((i * 9) % 16) / 10,
  dl: ((i * 7) % 9) / 20,
  r: (i * 97) % 720 - 360,
  w: 4 + (i % 3) * 3,
  h: 8 + (i % 4) * 4,
  rd: i % 4 === 0 ? '50%' : '1px',
  side: i % 2 ? 8 : 92,
  c: CONF_C[(i + 3) % 7],
}));
const STREAM = Array.from({ length: 60 }, (_, i) => ({
  x: (i * 17.3) % 100,
  d: 2.6 + ((i * 13) % 26) / 10,
  dl: ((i * 9) % 46) / 10,
  sx: ((i * 41) % 120) - 60,
  tilt: ((i * 53) % 40) - 20,
  w: 3 + (i % 3),
  h: 22 + (i % 5) * 9,
  c: CONF_C[(i + 5) % 7],
}));

function useCountUp(target, ms, go) {
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    if (!go) return;
    let raf, t0;
    const tick = t => {
      if (!t0) t0 = t;
      const p = Math.min(1, (t - t0) / ms);
      setN(Math.round(target * (1 - Math.pow(1 - p, 3))));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, go]);
  return n;
}

function JuicyBattery({ pct }) {
  return (
    <div className="jb">
      <span className="jb-cap" />
      <div className="jb-body">
        <span className="jb-fill" style={{ height: pct + '%' }}>
          <span className="jb-wave" /><span className="jb-wave jb-wave2" />
          <span className="jb-bubbles">{Array.from({ length: 9 }, (_, i) => <i key={i} style={{ '--bx': (8 + i * 10) + '%', '--bd': (1.6 + (i % 4) * .5) + 's', '--bdl': (i * .32) + 's', '--bs': (3 + i % 3) + 'px' }} />)}</span>
        </span>
        <span className="jb-gloss" />
        <span className="jb-bolt"><Icon name="lightning" size={24} weight="fill" color="#fff" /></span>
      </div>
    </div>
  );
}

function CelebrateStage({ stats, onNext }) {
  const n = useCountUp(stats.total, 1700, true);
  React.useEffect(() => { const t = setTimeout(onNext, 6600); return () => clearTimeout(t); }, []);
  return (
    <div className="wr-cel">
      <span className="wr-cel-flash" />
      <span className="wr-cel-ring" /><span className="wr-cel-ring wr-cel-ring2" /><span className="wr-cel-ring wr-cel-ring3" /><span className="wr-cel-ring wr-cel-ring4" /><span className="wr-cel-ring wr-cel-ring5" /><span className="wr-cel-ring wr-cel-ring6" />
      <div className="wr-confetti">
        {FALL.map((c, i) => (
          <span key={i} style={{ left: c.x + '%', width: c.w, height: c.h, background: c.c, borderRadius: c.rd, '--d': c.d + 's', '--dl': c.dl + 's', '--r': c.r + 'deg', '--sx': c.sx + 'px' }} />
        ))}
      </div>
      <div className="wr-streamers">
        {STREAM.map((c, i) => (
          <i key={i} style={{ left: c.x + '%', width: c.w, height: c.h, background: c.c, borderRadius: '999px', '--d': c.d + 's', '--dl': c.dl + 's', '--sx': c.sx + 'px', '--tilt': c.tilt + 'deg' }} />
        ))}
      </div>
      <div className="wr-cannons">
        {BURST.map((c, i) => (
          <span key={i} className="wr-shot" style={{ left: c.side + '%', width: c.w, height: c.h, background: c.c, borderRadius: c.rd, '--bx': ((c.side < 50 ? 1 : -1) * c.dist) + 'px', '--by': -c.up + 'px', '--d': c.d + 's', '--dl': c.dl + 's', '--r': c.r + 'deg' }} />
        ))}
      </div>
      <div className="wr-cel-core">
        <JuicyBattery pct={100} />
        <p className="wr-cel-kicker">shift banked</p>
        <p className="wr-cel-num">{n.toLocaleString()}</p>
        <p className="wr-cel-unit">points · ${(stats.total / 100).toFixed(2)} earned</p>
        <div className="wr-cel-chips">
          <span className="wr-chip" style={{ '--i': 0 }}>{stats.batteries} cans</span>
          <span className="wr-chip" style={{ '--i': 1 }}>{stats.bottles} packs</span>
          <span className="wr-chip" style={{ '--i': 2 }}>{stats.streak} day streak</span>
        </div>
      </div>
    </div>
  );
}

const SOCIALS = [
  { k: 'ig', l: 'Instagram story', e: '📸', c: 'linear-gradient(135deg,#F9CE34,#EE2A7B 55%,#6228D7)' },
  { k: 'snap', l: 'Snapchat', e: '👻', c: '#FFFC00' },
  { k: 'tt', l: 'TikTok', e: '🎵', c: '#111' },
  { k: 'wa', l: 'WhatsApp group', e: '💬', c: '#25D366' },
  { k: 'copy', l: 'Copy link', e: '🔗', c: 'rgba(243,240,232,.14)' },
];

function ShareCard({ stats, code }) {
  return (
    <div className="wr-ticket">
      <span className="wr-notch wr-notch-l" /><span className="wr-notch wr-notch-r" />
      <div className="wr-tk-head">
        <span className="wr-card-av">{USER.photo ? <img src={USER.photo} alt="" /> : (USER.name || 'You')[0]}</span>
        <span className="wr-card-who"><b>{(USER.name || 'You').split(' ')[0]}</b><em>banked a shift</em></span>
        <span className="wr-card-mark">pryze</span>
      </div>
      <div className="wr-tk-hero">
        <div className="wr-tk-hero-txt">
          <p className="wr-card-num">+{stats.total.toLocaleString()}</p>
          <p className="wr-card-unit">points · ${(stats.total / 100).toFixed(2)}</p>
        </div>
        <JuicyBattery pct={Math.min(100, Math.round(stats.batteries / 40 * 100))} />
      </div>
      <div className="wr-card-stats">
        <span><b>{stats.batteries}</b>cans</span>
        <span><b>{stats.bottles}</b>packs</span>
        <span><b>{stats.streak}</b>day streak</span>
      </div>
      <span className="wr-tk-sticker">+{stats.vsAvg}% vs your average</span>
      <span className="wr-tk-perf" />
      <div className="wr-tk-lines">
        <span><em>locked in</em><b>{stats.mins} min</b></span>
        <span><em>goals done</em><b>{stats.goals}</b></span>
        <span><em>phone pickups</em><b>{stats.lifts}</b></span>
      </div>
      <div className="wr-tk-foot">
        <span className="wr-tk-code">{code}</span>
        <span className="wr-barcode">{Array.from({ length: 30 }, (_, i) => <i key={i} style={{ width: (i % 4 === 0 ? 3 : 1.5) + 'px', opacity: i % 3 ? .8 : .4 }} />)}</span>
      </div>
    </div>
  );
}

function ShareSheet({ stats, code, onClose }) {
  const [sent, setSent] = React.useState(null);
  return (
    <div className="wr-back" onClick={onClose}>
      <div className="wr-sheet" onClick={e => e.stopPropagation()}>
        <span className="wr-sheet-grab" />
        <p className="wr-sheet-h">here's what goes out</p>
        <p className="wr-sheet-sub">Image only — points and streak, never store or manager data.</p>
        <div className="wr-preview"><div className="wr-preview-scale"><ShareCard stats={stats} code={code} /></div></div>
        <div className="wr-share-list">
          {SOCIALS.map(s => (
            <button key={s.k} className={'wr-share-row' + (sent === s.k ? ' is-on' : '')} onClick={() => setSent(s.k)}>
              <span className="wr-share-ic" style={{ background: s.c }}>{s.e}</span>
              <span className="wr-share-l">{s.l}</span>
              {sent === s.k ? <Icon name="check" size={16} weight="bold" color="#FF5A2E" /> : <Icon name="caret-right" size={14} weight="bold" color="rgba(243,240,232,.3)" />}
            </button>
          ))}
        </div>
        <button className="wr-ghost" onClick={onClose}>done</button>
      </div>
    </div>
  );
}

function ReceiptStage({ stats, onRate, left, paused, onToggle }) {
  const [share, setShare] = React.useState(false);
  const code = React.useMemo(() => 'PRZ-' + String(stats.total).padStart(5, '0') + '-' + String(new Date().getHours()).padStart(2, '0') + String(new Date().getMinutes()).padStart(2, '0'), []);
  return (
    <div className="wr-receipt">
      <div className="wr-ledger-top">
        <div>
          <p className="wr-h">the receipt</p>
          <p className="wr-sub">{USER.store || 'on the floor'} · {stats.mins} min</p>
        </div>
        <div className="wr-ledger-actions">
          <button className={'wr-timer' + (paused ? ' is-paused' : '')} onClick={onToggle} aria-label={paused ? 'Resume countdown' : 'Pause countdown'}>
            <svg viewBox="0 0 44 44"><circle cx="22" cy="22" r="19" /><circle className="wr-timer-p" cx="22" cy="22" r="19" /></svg>
            {paused ? <Icon name="play" size={12} weight="fill" color="rgba(243,240,232,.75)" /> : <em>{left}</em>}
          </button>
          <button className="wr-share-btn" onClick={() => setShare(true)} aria-label="Share this receipt"><Icon name="share-network" size={18} weight="bold" color="#fff" /></button>
        </div>
      </div>
      <ShareCard stats={stats} code={code} />
      <button className="wr-ghost wr-ghost-wide" onClick={onRate}>rate this shift</button>
      {share && <ShareSheet stats={stats} code={code} onClose={() => setShare(false)} />}
    </div>
  );
}

const FEELINGS = [
  { e: '😮‍💨', l: 'drained' },
  { e: '🙂', l: 'fine' },
  { e: '😤', l: 'locked in' },
  { e: '🤩', l: 'best one yet' },
];
const PACE = ['Too slow', 'Just right', 'Slammed'];

function FeedbackSheet({ onDone }) {
  const [pace, setPace] = React.useState(null);
  const [feel, setFeel] = React.useState(null);
  const [note, setNote] = React.useState('');
  const [sent, setSent] = React.useState(false);
  React.useEffect(() => { if (sent) { const t = setTimeout(onDone, 1500); return () => clearTimeout(t); } }, [sent]);
  return (
    <div className="wr-back">
      <div className="wr-sheet wr-sheet-fb">
        <span className="wr-sheet-grab" />
        {sent ? (
          <div className="wr-thanks">
            <span className="wr-thanks-e">🫶</span>
            <p className="wr-sheet-h">got it, thanks</p>
            <p className="wr-sheet-sub">Your manager sees the vibe, never the wording.</p>
          </div>
        ) : (
          <React.Fragment>
            <p className="wr-sheet-h">how was that shift?</p>
            <p className="wr-sheet-sub">10 seconds, then you're out.</p>
            <p className="wr-q">How was the pace?</p>
            <div className="wr-opts">
              {PACE.map(p => <button key={p} className={'wr-opt' + (pace === p ? ' is-on' : '')} onClick={() => setPace(p)}>{p}</button>)}
            </div>
            <p className="wr-q">How do you feel right now?</p>
            <div className="wr-feels">
              {FEELINGS.map(f => (
                <button key={f.l} className={'wr-feel' + (feel === f.l ? ' is-on' : '')} onClick={() => setFeel(f.l)}>
                  <span>{f.e}</span>{f.l}
                </button>
              ))}
            </div>
            <p className="wr-q">Anything else? <em>optional</em></p>
            <textarea className="wr-note" rows="2" placeholder="Say it how you'd say it" value={note} onChange={e => setNote(e.target.value)} />
            <div className="wr-fb-foot">
              <button className="wr-skip" onClick={onDone}>skip</button>
              <button className="wr-btn wr-btn-sm" disabled={!pace && !feel && !note} onClick={() => setSent(true)}>send it</button>
            </div>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

function WrapFlow({ stats, onDone }) {
  const [stage, setStage] = React.useState(0);
  const [fb, setFb] = React.useState(false);
  const [left, setLeft] = React.useState(10);
  const [paused, setPaused] = React.useState(false);
  React.useEffect(() => {
    if (stage !== 1 || paused || fb) return;
    if (left <= 0) { setFb(true); return; }
    const t = setTimeout(() => setLeft(v => v - 1), 1000);
    return () => clearTimeout(t);
  }, [stage, paused, left, fb]);
  return (
    <div className="wr-screen">
      <div className={'wr-stage wr-stage-' + stage} key={stage}>
        {stage === 0 && <CelebrateStage stats={stats} onNext={() => setStage(1)} />}
        {stage === 1 && <ReceiptStage stats={stats} left={left} paused={paused} onToggle={() => setPaused(p => !p)} onRate={() => setFb(true)} />}
      </div>
      {fb && <FeedbackSheet onDone={onDone} />}
    </div>
  );
}

window.PryzeWrap = { WrapFlow };