/* screens/Summary.jsx — prediction snapshot + share. window.SummaryScreen */
/* UUID is managed by useStore and passed in as store.uuid / uuid prop. */

function ShareCard({ bracket, results, name, uuid, innerRef }) {
  const winners = window.WC.groupOrder.map((g) => bracket.st[g].complete ? bracket.st[g][0].code : null);
  const champ = bracket.champ;
  const F = bracket.rounds.F[0];
  const finalists = [F.aCode, F.bCode];
  const groupPreds = window.WC.fixtures.filter((f) => results[f.id] && results[f.id].o).length;
  // Shareable URL — full UUID in the query param
  const shareUrl = `beram.dev/bworldcuppredictor?p=${uuid}`;

  return (
    <div className="sharecard" ref={innerRef}>
      <div className="sharecard__bg" />
      <div className="sharecard__head">
        <div className="row" style={{ gap: 10 }}><span className="nav__brand" style={{ fontSize: 20 }}><span className="dot" />BWORLDCUP<span style={{ color: 'var(--gold)' }}>PREDICTOR</span></span></div>
        <div className="sharecard__name">{name ? '@' + name : 'My bracket'}</div>
      </div>

      <div className="sharecard__champ">
        <div className="sharecard__chlbl"><IconTrophy size={16} /> Predicted champion</div>
        {champ ? <>
          <div className="sharecard__chflag">{window.WC.team(champ).flag}</div>
          <div className="sharecard__chname display">{window.WC.team(champ).name}</div>
        </> : <div className="sharecard__chname display" style={{ color: 'var(--ink-faint)' }}>Undecided</div>}
        <div className="sharecard__finalists">
          {finalists.map((c, i) => (
            <span key={i} className="sc-final">
              {c ? <><span style={{ fontSize: 20 }}>{window.WC.team(c).flag}</span> {window.WC.team(c).name}</> : 'Finalist TBD'}
              {i === 0 && <span className="sc-vs">FINAL</span>}
            </span>
          ))}
        </div>
      </div>

      <div className="sharecard__groups">
        <div className="sharecard__seclbl">Group winners</div>
        <div className="sharecard__gw">
          {window.WC.groupOrder.map((g, i) => (
            <div className="sc-gw" key={g}>
              <span className="sc-gw__g">{g}</span>
              {winners[i] ? <span className="sc-gw__f">{window.WC.team(winners[i]).flag}</span> : <span className="sc-gw__f" style={{ opacity: .3 }}>·</span>}
              <span className="sc-gw__n">{winners[i] ? window.WC.team(winners[i]).name : 'TBD'}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="sharecard__foot">
        <span className="tnum">{groupPreds}/72 group picks · full bracket</span>
        <span className="sharecard__url">{shareUrl}</span>
      </div>
    </div>
  );
}

function SummaryScreen({ store, go, uuid }) {
  const { useState, useRef } = React;
  const { results, ko, name } = store.state;
  const [emailVal, setEmailVal] = useState('');
  const [emailStatus, setEmailStatus] = useState('idle'); // idle | busy | done | error
  const submitEmail = async () => {
    if (!emailVal.includes('@')) return;
    setEmailStatus('busy');
    try {
      await store.saveEmail(emailVal);
      window.bwcpTrack?.('bwcp_email_captured', { source: 'summary' });
      setEmailStatus('done');
    } catch (_) { setEmailStatus('error'); }
  };
  const bracket = window.WCLogic.buildBracket(results, ko);
  const [open, setOpen] = useState(false);
  const [copied, setCopied] = useState(false);
  const [busy, setBusy] = useState(false);
  const cardRef = useRef(null);

  // Full UUID in the URL so it can be loaded on another device
  const shareUrl = `https://beram.dev/bworldcuppredictor?p=${uuid}`;
  const displayUrl = `beram.dev/bworldcuppredictor?p=${uuid.slice(0, 8)}…`;

  const download = async () => {
    if (!window.htmlToImage || !cardRef.current) return;
    setBusy(true);
    try {
      const dataUrl = await window.htmlToImage.toPng(cardRef.current, { pixelRatio: 2, backgroundColor: '#0b1228' });
      const a = document.createElement('a'); a.href = dataUrl; a.download = 'my-world-cup-bracket.png'; a.click();
      window.bwcpTrack?.('bwcp_png_downloaded');
    } catch (e) { console.warn(e); }
    setBusy(false);
  };
  const copy = () => {
    navigator.clipboard?.writeText(shareUrl);
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
    window.bwcpTrack?.('bwcp_link_copied');
  };
  const openShare = () => {
    setOpen(true);
    window.bwcpTrack?.('bwcp_share_card_opened');
  };

  return (
    <div className="page">
      <header className="phead">
        <div>
          <div className="eyebrow">Step 03 · Share</div>
          <h1 className="section-h">Your bracket</h1>
          <p className="muted phead__sub">A single-screen snapshot of your whole tournament. Share the card, send the link, and track every result as it comes in.</p>
        </div>
        <div className="phead__side">
          <input className="nameinput" placeholder="Add your name / handle" value={name} onChange={(e) => store.setName(e.target.value.replace(/[^a-z0-9_]/gi, '').slice(0, 18))} />
          <div className="row" style={{ gap: 8 }}>
            <Btn variant="ghost" size="sm" onClick={copy}><IconLink size={14} /> {copied ? 'Copied!' : 'Copy link'}</Btn>
            <Btn size="sm" onClick={openShare}><IconShare size={14} /> Share card</Btn>
          </div>
        </div>
      </header>

      <div className="summary-wrap">
        <ShareCard bracket={bracket} results={results} name={name} uuid={uuid} innerRef={cardRef} />
        <aside className="summary-side">
          <div className="urlbox">
            <div className="urlbox__lbl">Your shareable link</div>
            <div className="urlbox__url"><IconLink size={14} /> {displayUrl}</div>
            <Btn block size="sm" variant="quiet" onClick={copy}>{copied ? 'Copied to clipboard' : 'Copy link'}</Btn>
          </div>
          <div className="urlbox">
            <div className="urlbox__lbl">📬 Get your accuracy summary</div>
            {emailStatus === 'done' ? (
              <p className="muted" style={{ fontSize: 13, margin: 0 }}>You're on the list — we'll send your full breakdown after the final on Jul 19. 🏆</p>
            ) : (
              <>
                <p className="muted" style={{ fontSize: 13, margin: '0 0 12px' }}>After the final whistle we'll email you how your predictions held up, match by match.</p>
                <input
                  className="nameinput"
                  type="email"
                  placeholder="your@email.com"
                  value={emailVal}
                  onChange={e => setEmailVal(e.target.value)}
                  onKeyDown={e => e.key === 'Enter' && submitEmail()}
                  style={{ marginBottom: 8, width: '100%' }}
                />
                <Btn block size="sm" onClick={submitEmail} disabled={emailStatus === 'busy' || !emailVal.includes('@')}>
                  {emailStatus === 'busy' ? 'Saving…' : 'Notify me after the final'}
                </Btn>
                {emailStatus === 'error' && <p style={{ fontSize: 12, color: '#f87171', margin: '8px 0 0' }}>Something went wrong — try again.</p>}
              </>
            )}
          </div>
          <div className="urlbox">
            <div className="urlbox__lbl">Track it live</div>
            <p className="muted" style={{ fontSize: 13, margin: '0 0 12px' }}>Once matches kick off, this same link turns into a live scorecard of your accuracy.</p>
            <Btn block size="sm" variant="ghost" onClick={() => go('live')}><IconTarget size={14} /> Preview live tracking</Btn>
          </div>
          {bracket.champ && (
            <div className="urlbox" style={{ borderColor: 'var(--gold-deep)', background: 'var(--gold-dim)' }}>
              <div className="urlbox__lbl" style={{ color: 'var(--gold)' }}>🏆 Bracket locked in</div>
              <p className="muted" style={{ fontSize: 13, margin: '0 0 12px' }}>
                {window.WC.team(bracket.champ).flag} {window.WC.team(bracket.champ).name} to win it all — bold call. If you're enjoying the app, a coffee means a lot.
              </p>
              <Btn block size="sm" onClick={() => { window.bwcpTrack?.('bwcp_tip_clicked'); window.open('https://ko-fi.com/beram', '_blank', 'noopener,noreferrer'); }}>☕ Buy me a coffee</Btn>
            </div>
          )}
          <Btn block onClick={openShare}><IconDownload size={16} /> Download bracket PNG</Btn>
        </aside>
      </div>

      {open && (
        <div className="scrim" onClick={() => setOpen(false)}>
          <div className="modal sharemodal" onClick={(e) => e.stopPropagation()}>
            <div className="modal__head">
              <span className="row" style={{ gap: 8, fontWeight: 800 }}><IconShare size={16} /> Share your bracket</span>
              <button className="iconbtn" onClick={() => setOpen(false)}><IconClose size={18} /></button>
            </div>
            <div className="modal__preview">
              <div className="modal__scale"><ShareCard bracket={bracket} results={results} name={name} uuid={uuid} /></div>
            </div>
            <div className="modal__actions">
              <Btn variant="ghost" onClick={copy}><IconLink size={16} /> {copied ? 'Link copied' : 'Copy link'}</Btn>
              <Btn onClick={download} disabled={busy}><IconDownload size={16} /> {busy ? 'Rendering…' : 'Download PNG'}</Btn>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
window.SummaryScreen = SummaryScreen; window.ShareCard = ShareCard;