// library-page.jsx — where a buyer redeems an access code and downloads what their tier includes.
// Gating is client-side (access.js); see the limits noted there.

const QUIZ_KEY = 'vc_quiz_v1';
function readQuiz() { try { return JSON.parse(localStorage.getItem(QUIZ_KEY) || '{}') || {}; } catch (e) { return {}; } }

function V4Library() {
  const v4 = window.v4;
  const accent = v4.yellow;
  const access = window.useVCAccess();
  const [busy, setBusy] = React.useState('');
  const [err, setErr] = React.useState('');
  const has = !!access.product;
  const quiz = readQuiz();
  const chapters = (window.VC_QUIZ && window.VC_QUIZ.chapters) || [];
  const passed = chapters.filter(c => quiz[c.n] && quiz[c.n].passed).length;

  React.useEffect(() => {
    if (location.hash === '#code') { const el = document.getElementById('code'); if (el) setTimeout(() => el.scrollIntoView({ block: 'start' }), 60); }
  }, []);

  // Back from Stripe Checkout: library.html?session_id=cs_… → ask the server for the code, then unlock this browser.
  const sessionId = new URLSearchParams(location.search).get('session_id');
  const [claim, setClaim] = React.useState(sessionId ? { status: 'loading' } : null);
  const [copied, setCopied] = React.useState(false);
  React.useEffect(() => {
    if (!sessionId) return;
    let alive = true;
    (async () => {
      try {
        const r = await fetch('/api/claim?session_id=' + encodeURIComponent(sessionId), { cache: 'no-store' });
        const j = await r.json().catch(() => ({ ok: false, reason: 'The server answered in an unexpected way.' }));
        if (!j.ok) { if (alive) setClaim({ status: 'error', reason: j.reason }); return; }
        const v = await window.VCAccess.redeem(j.code);
        // Always hand over the code the server issued, even if this browser could not use it.
        if (alive) setClaim({ status: 'ok', code: j.code, name: j.name, receipt: j.receipt, unlocked: v.ok, why: v.ok ? null : v.reason });
      } catch (e) { if (alive) setClaim({ status: 'error', reason: 'We could not reach the server. Reload this page to try again.' }); }
    })();
    return () => { alive = false; };
  }, []);
  const copy = (text) => {
    const done = () => { setCopied(true); setTimeout(() => setCopied(false), 2500); };
    const fallback = () => { const t = document.createElement('textarea'); t.value = text; document.body.appendChild(t); t.select(); try { document.execCommand('copy'); done(); } catch (e) {} t.remove(); };
    if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(text).then(done, fallback); else fallback();
  };
  const contact = window.VC_CONTACT_EMAIL;

  const get = async (id) => {
    setErr(''); setBusy(id);
    try { await window.VCWorkbooks.download(id); } catch (e) { setErr(e.message || 'Download failed.'); }
    setBusy('');
  };

  const kicker = (t, c) => <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 3, color: c || v4.inkMuted, textTransform: 'uppercase', marginBottom: 14 }}>§ {t}</div>;
  const btn = (bg, color, extra) => ({ display: 'inline-block', background: bg, color, border: `1.5px solid ${v4.ink}`, padding: '11px 14px', fontFamily: v4.mono, fontSize: 11.5, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', textDecoration: 'none', cursor: 'pointer', ...extra });

  return (
    <div style={{ width: '100%', background: v4.bg, color: v4.ink, fontFamily: v4.sans, fontSize: 15, lineHeight: 1.5 }}>
      <V4UtilityBar live={has ? `● ${access.name.toUpperCase()} · ${access.until ? 'UNTIL ' + access.until.toUpperCase() : 'NO EXPIRY'}` : '● LIBRARY · Enter your access code'} />
      <V4Nav current="Library" />

      {claim ? (
        <div role="status" style={{ padding: '40px 36px', borderBottom: `4px solid ${v4.ink}`, background: claim.status === 'ok' ? accent : claim.status === 'error' ? v4.ink : v4.paper, color: claim.status === 'error' ? v4.bg : v4.ink }}>
          {claim.status === 'loading' ? (
            <div style={{ fontFamily: v4.mono, fontSize: 14, letterSpacing: 1.5, textTransform: 'uppercase' }}>Confirming your payment with Stripe…</div>
          ) : claim.status === 'ok' ? (
            <>
              <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 3, textTransform: 'uppercase', marginBottom: 10 }}>§ Payment received</div>
              <div style={{ fontSize: 44, fontWeight: 800, letterSpacing: -1.5, lineHeight: 1.05 }}>{claim.unlocked ? <>Thank you. {claim.name} is unlocked in this browser.</> : <>Thank you. Here is your {claim.name} code.</>}</div>
              {!claim.unlocked ? <div style={{ fontSize: 15, marginTop: 10, fontWeight: 700 }}>This browser could not use it ({claim.why}) Try pasting it into the Library page in another browser, or email us.</div> : null}
              <div style={{ fontSize: 16, marginTop: 14, maxWidth: 820 }}>Save your access code somewhere safe, such as a password manager. Paste it into the Library page to read on another browser or device.{claim.receipt ? <> Stripe sent your receipt to <b>{claim.receipt}</b>.</> : null}</div>
              <div style={{ display: 'flex', gap: 10, alignItems: 'stretch', flexWrap: 'wrap', marginTop: 18, maxWidth: 980 }}>
                <code style={{ flex: '1 1 420px', minWidth: 0, background: v4.paper, border: `1.5px solid ${v4.ink}`, padding: '12px 14px', fontFamily: v4.mono, fontSize: 12.5, wordBreak: 'break-all', lineHeight: 1.45 }}>{claim.code}</code>
                <button type="button" onClick={() => copy(claim.code)} style={btn(v4.ink, v4.bg)}>{copied ? '✓ Copied' : 'Copy code'}</button>
              </div>
              <div style={{ fontSize: 13, marginTop: 12, opacity: 0.8 }}>This page’s address can show the code again, so keep it private.</div>
            </>
          ) : (
            <>
              <div style={{ fontFamily: v4.mono, fontSize: 12, letterSpacing: 3, color: accent, textTransform: 'uppercase', marginBottom: 10 }}>§ We could not issue your code</div>
              <div style={{ fontSize: 26, fontWeight: 800, lineHeight: 1.2, maxWidth: 820 }}>{claim.reason}</div>
              <div style={{ fontSize: 15, marginTop: 12, color: '#d8d6cf', maxWidth: 820 }}>If you were charged, email {contact ? <a href={`mailto:${contact}`} style={{ color: accent }}>{contact}</a> : 'us at the support address on your Stripe receipt'} with the receipt and we will send your code by hand.</div>
            </>
          )}
        </div>
      ) : null}

      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', borderBottom: `4px solid ${v4.ink}` }}>
        <div style={{ padding: '64px 36px 48px', borderRight: `1.5px solid ${v4.ink}` }}>
          {kicker('Library')}
          <h1 style={{ fontSize: 102, fontWeight: 800, letterSpacing: -4.5, lineHeight: 0.9, margin: 0 }}>
            {has ? <>Your<br/><span style={{ background: accent, padding: '0 12px' }}>library.</span></> : <>Unlock<br/><span style={{ background: accent, padding: '0 12px' }}>your copy.</span></>}
          </h1>
          <p style={{ fontSize: 19, color: v4.inkSoft, maxWidth: 620, marginTop: 24 }}>
            {has
              ? <>You have <b>{access.name}</b>{access.until ? <> until <b>{access.until}</b></> : <>, with no expiry</>}. Everything it includes is below. Downloads are built in your browser.</>
              : <>Paste the access code from your purchase email. It is checked in this browser and kept here; there is no account. Use the same code on each browser you read on.</>}
          </p>
          {!has ? <a href="pricing.html" style={{ ...btn('transparent', v4.ink), marginTop: 8 }}>No code yet? See pricing →</a> : null}
          <div style={{ fontSize: 13.5, color: v4.inkMuted, marginTop: 18 }}>Lost your code? Email {contact ? <a href={`mailto:${contact}`}>{contact}</a> : <a href="terms.html#contact">us</a>} with your Stripe receipt and we will send it again.</div>
        </div>
        <div id="code" style={{ padding: '64px 36px 48px', background: v4.ink, color: v4.bg, scrollMarginTop: 20 }}>
          {kicker(has ? 'This browser' : 'Enter your code', accent)}
          {has ? (
            <>
              <div style={{ fontSize: 40, fontWeight: 800, letterSpacing: -1.5 }}>{access.name}</div>
              <div style={{ fontFamily: v4.mono, fontSize: 13, color: '#bdbdbd', marginTop: 6 }}>{access.until ? `Access until ${access.until}` : 'No expiry'}</div>
              <div style={{ marginTop: 26, paddingTop: 18, borderTop: '1px solid #333' }}>
                <div style={{ fontSize: 14, color: '#bdbdbd', marginBottom: 12 }}>Have a different code? Paste it here; it replaces this one.</div>
                <V4CodeForm dark />
              </div>
              <button type="button" onClick={() => { if (confirm('Remove the access code from this browser? You can paste it again later.')) window.VCAccess.clear(); }}
                style={{ marginTop: 20, background: 'none', border: 0, padding: 0, color: '#bdbdbd', fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', cursor: 'pointer', textDecoration: 'underline' }}>Remove code from this browser</button>
            </>
          ) : <V4CodeForm dark />}
        </div>
      </div>

      {/* workbooks */}
      <div style={{ padding: '64px 36px', borderBottom: `1.5px solid ${v4.ink}` }}>
        {kicker('Excel workbooks · live formulas')}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', border: `1.5px solid ${v4.ink}` }}>
          {window.VC_WORKBOOKS.map((w, i) => {
            const ok = has && window.VCAccess.workbookAllowed(w.tier);
            return (
              <div key={w.id} style={{ padding: '24px 22px', borderRight: i % 3 < 2 ? `1px solid ${v4.lineSoft}` : 'none', borderTop: i > 2 ? `1px solid ${v4.lineSoft}` : 'none', background: ok ? v4.paper : 'transparent', display: 'flex', flexDirection: 'column', gap: 8 }}>
                {w.cover ? <img src={`images/workbooks/${w.cover}.webp`} alt="" width={1200} height={1800} loading="lazy" decoding="async"
                  style={{ display: 'block', width: '100%', height: 'auto', aspectRatio: '1 / 1', objectFit: 'cover', objectPosition: '50% 45%', border: `1px solid ${v4.lineSoft}`, opacity: ok ? 1 : 0.55, marginBottom: 6 }} /> : null}
                <div style={{ fontFamily: v4.mono, fontSize: 10.5, letterSpacing: 1.5, textTransform: 'uppercase', color: v4.inkMuted }}>{w.tier === 'deal' ? 'Deal Pack · Complete' : 'Complete only'}</div>
                <div style={{ fontSize: 21, fontWeight: 800, letterSpacing: -0.4, lineHeight: 1.15 }}>{w.t}</div>
                <div style={{ fontSize: 14, color: v4.inkSoft, flex: 1 }}>{w.d}</div>
                {ok
                  ? <button type="button" disabled={busy === w.id} onClick={() => get(w.id)} style={btn(v4.ink, v4.bg, { alignSelf: 'flex-start' })}>{busy === w.id ? 'Building…' : '↓ Download .xlsx'}</button>
                  : <a href={has ? 'pricing.html#full' : 'pricing.html'} style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: v4.inkMuted }}>{has ? 'In Complete →' : 'Locked · see pricing →'}</a>}
              </div>
            );
          })}
        </div>
        {err ? <div style={{ color: v4.red, marginTop: 12 }}>{err}</div> : null}
        <div style={{ fontSize: 13, color: v4.inkMuted, marginTop: 14 }}>Yellow cells are inputs; everything else is a formula. Opens in Excel, Numbers, LibreOffice and Google Sheets.</div>
      </div>

      {/* calculator + lessons */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', borderBottom: `1.5px solid ${v4.ink}` }}>
        <div style={{ padding: '56px 36px', borderRight: `1.5px solid ${v4.ink}`, background: accent }}>
          {kicker('Earnings-bridge calculator', v4.ink)}
          <div style={{ fontSize: 34, fontWeight: 800, letterSpacing: -1, lineHeight: 1.08 }}>Run a deal’s numbers, then export the one-page PDF and the Excel.</div>
          <div style={{ marginTop: 14, fontSize: 15 }}>{has ? 'Exports are unlocked in this browser.' : 'Results are free on screen; exports come with either paid tier.'}</div>
          <a href="bridge.html" style={{ ...btn(v4.ink, v4.bg), marginTop: 20 }}>Open the calculator →</a>
        </div>
        <div style={{ padding: '56px 36px' }}>
          {kicker('Lessons')}
          {chapters.map(c => (
            <a key={c.n} href={c.href} className="gc-row-lv" style={{ display: 'grid', gridTemplateColumns: '44px 1fr auto', gap: 10, padding: '10px 0', borderTop: `1px solid ${v4.lineSoft}`, textDecoration: 'none', alignItems: 'baseline' }}>
              <span style={{ fontFamily: v4.mono, fontWeight: 700 }}>{c.roman}</span>
              <span style={{ fontWeight: 700 }}>{c.t}</span>
              <span style={{ fontFamily: v4.mono, fontSize: 11, color: v4.inkMuted }}>{c.n === 1 ? 'FREE' : has && access.lessons ? 'UNLOCKED' : 'FIRST LESSON FREE'} · {c.mins} MIN</span>
            </a>
          ))}
        </div>
      </div>

      {/* quizzes + records */}
      <div style={{ padding: '64px 36px', background: v4.ink, color: v4.bg }}>
        {kicker('Chapter quizzes and completion records', accent)}
        {access.quiz ? (
          <>
            <div style={{ fontSize: 17, color: '#d8d6cf', maxWidth: 760, marginBottom: 24 }}>Five questions per chapter; four correct passes. Each pass gives a printable record with the chapter’s reading time. Passed {passed} of {chapters.length}.</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 0, border: `1.5px solid ${v4.bg}` }}>
              {chapters.map((c, i) => {
                const q = quiz[c.n];
                return (
                  <a key={c.n} href={`quiz.html?ch=${c.n}`} style={{ padding: '20px 18px', textDecoration: 'none', color: v4.bg, borderRight: `1px solid #333`, borderBottom: `1px solid #333`, background: q && q.passed ? '#1d1c18' : 'transparent' }}>
                    <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5, color: q && q.passed ? accent : '#9e9e9e' }}>{q && q.passed ? `✓ PASSED ${q.score}/5` : q ? `LAST ${q.score}/5` : 'NOT TAKEN'}</div>
                    <div style={{ fontSize: 18, fontWeight: 800, marginTop: 6 }}>{c.roman} · {c.t}</div>
                    <div style={{ fontFamily: v4.mono, fontSize: 11, color: '#9e9e9e', marginTop: 6 }}>{q && q.passed ? 'Record · retake →' : 'Take the quiz →'}</div>
                  </a>
                );
              })}
              <a href={passed === chapters.length ? 'quiz.html?record=all' : undefined} style={{ padding: '20px 18px', textDecoration: 'none', color: passed === chapters.length ? v4.ink : '#9e9e9e', background: passed === chapters.length ? accent : 'transparent', borderBottom: `1px solid #333` }}>
                <div style={{ fontFamily: v4.mono, fontSize: 11, letterSpacing: 1.5 }}>WHOLE COURSE</div>
                <div style={{ fontSize: 18, fontWeight: 800, marginTop: 6 }}>{passed === chapters.length ? 'Course record →' : `Pass all ${chapters.length} to unlock`}</div>
              </a>
            </div>
            <div style={{ fontSize: 12.5, color: '#9e9e9e', marginTop: 14 }}>Results are kept in this browser. Records are self-issued and not accredited; check your professional body’s CPD rules.</div>
          </>
        ) : (
          <div style={{ fontSize: 17, color: '#d8d6cf', maxWidth: 760 }}>
            Quizzes and completion records come with Complete. {has ? <a href="pricing.html#full" style={{ color: accent }}>See Complete →</a> : <a href="pricing.html" style={{ color: accent }}>See pricing →</a>}
          </div>
        )}
      </div>

      <V4Footer />
    </div>
  );
}

window.V4Library = V4Library;