/* atelier onboarding — confirmation payoff */
const { useState: useStateC, useMemo } = React;

function ConfirmStep({ data, queuePos, refCode, onExplore }) {
  const [copied, setCopied] = useStateC(false);
  const name = (data.firstName || '').trim();
  const a = data.answers;

  const refUrl = data.referral_link || ('myatelier.io/r/' + refCode);
  const fullUrl = 'https://' + refUrl;

  // did they engage with the quiz at all?
  const answeredAny =
    a.style.length || a.fit.length || a.colors.length || a.painPoint || a.firstFeature;

  function copy() {
    const done = () => { setCopied(true); setTimeout(() => setCopied(false), 2200); };
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(fullUrl).then(done).catch(fallback);
    } else { fallback(); }
    function fallback() {
      const t = document.createElement('textarea');
      t.value = fullUrl; document.body.appendChild(t); t.select();
      try { document.execCommand('copy'); } catch (e) {}
      document.body.removeChild(t); done();
    }
  }

  const greeting = name ? `You're on the list, ${name}.` : "You're on the list.";

  return (
    <div className="card-body step-anim">
      <span className="eyebrow"><span className="dot"></span>Spot saved</span>
      <h1 className="serif-h h-lg" style={{ marginTop: 12 }}
          dangerouslySetInnerHTML={{ __html: greeting.replace(/(,?\s*[^,]+)\.$/, '<em>$1.</em>') }} />
      <p className="lede">
        We're putting the finishing touches on atelier. — we'll email you the moment early access opens.
      </p>

      {answeredAny ? (
        <div className="profile-box">
          <div className="pb-head">
            <span className="pb-title">Your style profile</span>
            <span className="pb-saved">Saved</span>
          </div>

          {a.style.length > 0 && (
            <div className="pb-group">
              <div className="pb-label">Style</div>
              <div className="pb-tags">{a.style.map((s) => <span className="tag" key={s}>{s}</span>)}</div>
            </div>
          )}
          {a.fit.length > 0 && (
            <div className="pb-group">
              <div className="pb-label">Fit</div>
              <div className="pb-tags">{a.fit.map((s) => <span className="tag" key={s}>{s}</span>)}</div>
            </div>
          )}
          {a.colors.length > 0 && (
            <div className="pb-group">
              <div className="pb-label">Palette</div>
              <div className="pb-tags">
                {a.colors.map((c) => (
                  <span className="tag" key={c}><span className="sw" style={{ background: COLOR_MAP[c] }}></span>{c}</span>
                ))}
              </div>
            </div>
          )}
          {a.firstFeature && (
            <div className="pb-group">
              <div className="pb-label">First thing you'll use</div>
              <div className="pb-tags"><span className="tag">{a.firstFeature}</span></div>
            </div>
          )}
        </div>
      ) : (
        <div className="profile-box">
          <div className="pb-head"><span className="pb-title">Your style profile</span></div>
          <p style={{ margin: 0, fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.55 }}>
            No quiz, no problem — we'll learn your style as you save. Every piece you add teaches atelier. what you actually wear.
          </p>
        </div>
      )}

      <div className="queue-row">
        <div className="queue-card">
          <div className="ql">Your place in line</div>
          <div className="qn"><em>#</em>{queuePos.toLocaleString()}</div>
        </div>
      </div>

      <div className="referral">
        <div className="rl"><b>Share to move up the list.</b> Each friend who joins bumps you ahead.</div>
        <div className="ref-control">
          <span className="ref-link">{refUrl}</span>
          <button className={'copy-btn ' + (copied ? 'done' : '')} onClick={copy}>
            {copied ? <Icon.tick /> : <Icon.copy />}
            {copied ? 'Copied' : 'Copy'}
          </button>
        </div>
      </div>

      <div className="confirm-foot">
        <button className="muted-link" onClick={onExplore}>Back to atelier</button>
      </div>
    </div>
  );
}

Object.assign(window, { ConfirmStep });