/* sol-token.jsx — eCash /sol-token tab (v2 · sol-ecash swap math spreadsheet)
 * Loaded by index.html via: <script type="text/babel" src="/sol-token.jsx"></script>
 * Rendered in App via:      {tab === 'sol-token' && <window.TabSolToken accent={accent} setTab={setTab} />}
 *
 * Data:
 *   • Creator rewards (USD) → /api/sol-token  config.creatorRewardsUsd  (SOL balance × SOL/USD)
 * Degrades gracefully to built-in fallback — page renders immediately.
 *
 * All CSS is scoped under .solmath so nothing leaks into the dark site.
 */
(function () {
  const { useState, useEffect } = React;

  const TOKEN_MINT = 'cTxqg4vt21u1Q2f9DSEig6S1fxmxLSsUV2v2wWspump';
  const REWARDS_ADDR = 'AZAQQsLehoqJawgT1dZjYuicZZG12uPCkoFGufwitkBu';
  const MAX_POOL = 50000;
  const REF_PRICE = 30;  // fixed swap reference price — not editable

  function val(s) { var n = parseFloat(s); return isFinite(n) ? n : 0; }
  function usd(v, dec) {
    dec = (dec === undefined) ? 0 : dec;
    return '$' + Number(v).toLocaleString('en-US', { minimumFractionDigits: dec, maximumFractionDigits: dec });
  }
  function commas(v, dec) {
    dec = (dec === undefined) ? 0 : dec;
    return Number(v).toLocaleString('en-US', { minimumFractionDigits: dec, maximumFractionDigits: dec });
  }

  const CSS = `
.solmath{--ink:#161616;--ink-soft:#555;--line:#cfcfcf;--line-strong:#9a9a9a;--head:#f1f1f1;--edit:#fffceb;--edit-line:#d8cf9a;--paper:#ffffff;--shade:#fafafa;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;background:#e9e9e9;padding:28px 16px 60px;min-height:100vh;color:#161616;box-sizing:border-box;}
.solmath *,.solmath *::before,.solmath *::after{box-sizing:border-box;}
.solmath a{color:inherit;text-decoration:none;}
.solmath .sheet{max-width:880px;margin:0 auto;background:var(--paper);border:1px solid var(--line-strong);}
.solmath .filebar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--head);border-bottom:1px solid var(--line-strong);padding:7px 12px;font-size:11.5px;color:var(--ink-soft);}
.solmath .filebar-logo{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.solmath .filebar-logo img{width:18px;height:18px;display:block;}
.solmath .filebar-logo .logo-name{color:var(--ink);font-weight:500;font-size:12px;letter-spacing:.04em;}
.solmath .filebar .fname{color:var(--ink);font-weight:500;}
.solmath .filebar .ro{border:1px solid var(--line-strong);padding:1px 6px;border-radius:2px;background:#fff;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;}
.solmath .pad{padding:26px 30px;}
.solmath h1{font-size:24px;font-weight:700;margin:0 0 2px;letter-spacing:-0.01em;color:var(--ink);font-family:inherit;line-height:1.2;}
.solmath .h1-sub{font-size:11px;color:var(--ink-soft);letter-spacing:.08em;margin:0 0 14px;}
.solmath .sub{color:var(--ink-soft);margin:0 0 18px;font-size:13px;max-width:62ch;}
.solmath .cta{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);border:1px solid var(--ink);background:#fff;padding:8px 14px;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px;font-weight:500;cursor:pointer;transition:background .12s,color .12s;}
.solmath .cta:hover{background:var(--ink);color:#fff;}
.solmath .cta .arrow{font-weight:700;}
.solmath .note{border:1px solid var(--line-strong);background:var(--shade);padding:12px 14px;font-size:12.5px;color:var(--ink);margin:18px 0;}
.solmath .note.tight{margin:10px 0 0;}
.solmath .note .lbl{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px;}
.solmath .note.secondary{background:#fff;}
.solmath .sectionhead{display:flex;align-items:baseline;gap:10px;margin:34px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--ink);}
.solmath .sectionhead .n{font-weight:700;font-size:13px;color:var(--ink);}
.solmath .sectionhead h2{font-size:14px;font-weight:500;margin:0;color:var(--ink);font-family:inherit;}
.solmath table{width:100%;border-collapse:collapse;font-size:13px;color:var(--ink);}
.solmath th,.solmath td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:middle;}
.solmath thead th{background:var(--head);border-color:var(--line-strong);font-weight:500;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);}
.solmath .rownum{width:30px;background:var(--head);color:var(--ink-soft);text-align:center;font-size:11px;border-color:var(--line-strong);}
.solmath td.label{width:46%;}
.solmath td.val{text-align:right;font-weight:500;color:var(--ink);}
.solmath tr.total td{border-top:2px solid var(--line-strong);font-weight:700;background:var(--shade);}
.solmath tr.derived td.val{color:var(--ink);}
.solmath td.input{background:var(--edit);border-color:var(--edit-line);padding:0;text-align:right;}
.solmath td.input input{width:100%;border:0;background:transparent;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px;font-weight:500;color:var(--ink);text-align:right;padding:7px 10px;display:block;}
.solmath td.input input:focus{outline:2px solid #2b2b2b;outline-offset:-2px;background:#fffef5;}
.solmath .unit{color:var(--ink-soft);font-weight:400;}
.solmath .live-tag{display:inline-block;font-size:9px;letter-spacing:.06em;text-transform:uppercase;background:#ecfdf5;color:#059669;border:1px solid #a7f3d0;padding:1px 5px;border-radius:2px;vertical-align:middle;margin-left:5px;}
.solmath .wallet-hint{font-size:10px;color:var(--ink-soft);margin-top:3px;word-break:break-all;font-weight:400;}
.solmath .addrbox{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border:1px solid var(--line-strong);background:var(--shade);padding:12px 14px;margin-top:8px;}
.solmath .addrbox .k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
.solmath .addrbox .a{font-size:12.5px;word-break:break-all;flex:1 1 240px;color:var(--ink);}
.solmath .copybtn{border:1px solid var(--ink);background:#fff;color:var(--ink);font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;padding:5px 12px;cursor:pointer;transition:background .12s,color .12s;}
.solmath .copybtn:hover,.solmath .copybtn.ok{background:var(--ink);color:#fff;}
.solmath .bottomctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;}
.solmath footer{margin-top:30px;padding-top:14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-soft);}
.solmath .smallnote{font-size:12px;color:var(--ink-soft);margin:9px 0 0;}
@media(max-width:640px){
  .solmath{padding:14px 8px 40px;}
  .solmath .pad{padding:20px 16px;}
}
`;

  function ensureStyles() {
    if (document.getElementById('solmath-styles')) return;
    const el = document.createElement('style');
    el.id = 'solmath-styles';
    el.textContent = CSS;
    document.head.appendChild(el);
  }

  function TabSolToken({ accent, setTab }) {
    const [futurePrice, setFuturePrice] = useState('120');
    const [mult, setMult] = useState('5');
    const [creatorRewards, setCreatorRewards] = useState(48469);
    const [copied, setCopied] = useState(false);

    useEffect(() => { ensureStyles(); }, []);

    // Creator rewards: live SOL balance × SOL/USD from backend
    useEffect(() => {
      let alive = true;
      fetch('/api/sol-token', { headers: { accept: 'application/json' } })
        .then(r => r.ok ? r.json() : Promise.reject())
        .then(j => {
          if (!alive) return;
          const v = j && j.config && j.config.creatorRewardsUsd;
          if (v != null && isFinite(Number(v))) setCreatorRewards(Number(v));
        })
        .catch(() => {});
      return () => { alive = false; };
    }, []);

    // derived math — REF_PRICE is fixed at $30
    const ecx     = creatorRewards / REF_PRICE;
    const pct     = ecx / MAX_POOL * 100;
    const poolVal = ecx * REF_PRICE;

    const m          = val(mult);
    const fp         = val(futurePrice);
    const futRewards = creatorRewards * m;
    const futEcx     = futRewards / REF_PRICE;
    const futPct     = futEcx / MAX_POOL * 100;
    const futPoolVal = futEcx * fp;

    // UTC date stamp for filebar
    const d = new Date();
    const stamp = d.getUTCFullYear() + '-' +
      String(d.getUTCMonth() + 1).padStart(2, '0') + '-' +
      String(d.getUTCDate()).padStart(2, '0');

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

    const multInputStyle = {
      width: '34px',
      border: '1px solid var(--edit-line)',
      background: 'var(--edit)',
      fontFamily: '"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace',
      fontSize: '12px',
      textAlign: 'center',
      padding: '1px',
    };

    return (
      <div className="solmath">
        <div className="sheet">

          {/* spreadsheet chrome */}
          <div className="filebar">
            <div className="filebar-logo">
              <EcashGlyph />
              <span className="logo-name">eCash</span>
            </div>
            <span className="fname">sol-ecash_swap_math.xlsx</span>
            <span className="ro">updated {stamp}</span>
          </div>

          <div className="pad">
            <h1>sol-ecash → $ECX</h1>
            <div className="h1-sub">swap math</div>
            <p className="sub">The top 5 holders of the pump.fun $eCash token at fork day can swap into $ECX, up to 5 times each, weighted by their share of the top-5 pool.</p>

            <div className="note">
              <span className="lbl">Note</span>
              This is not a focus of the project. But a sol-ecash market already exists, it is spreading, and it will continue with or without us. Documenting one limited swap is the cleanest way to point that energy in the same direction as the fork.
            </div>

            <div className="note secondary">
              Real eCash is not a Solana token. The Solana token is a memecoin. The only thing described here is a limited swap calculation.
            </div>

            {/* ── Section 1: Current outcome ────────────────────────────── */}
            <div className="sectionhead">
              <span className="n">1.</span>
              <h2>Current outcome</h2>
            </div>
            <table>
              <thead>
                <tr>
                  <th className="rownum">#</th>
                  <th>Item</th>
                  <th style={{textAlign:'right'}}>Value</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td className="rownum">1</td>
                  <td className="label">
                    Creator rewards so far <span className="live-tag">live</span>
                    <div className="wallet-hint">{REWARDS_ADDR}</div>
                  </td>
                  <td className="val">{usd(creatorRewards)}</td>
                </tr>
                <tr>
                  <td className="rownum">2</td>
                  <td className="label">eCash reference price</td>
                  <td className="val">$30</td>
                </tr>
                <tr className="derived">
                  <td className="rownum">3</td>
                  <td className="label">eCash in swap pool <span className="unit">= row 1 / row 2</span></td>
                  <td className="val">{commas(ecx, 1)} ECX</td>
                </tr>
                <tr className="derived">
                  <td className="rownum">4</td>
                  <td className="label">% of 50,000 max pool</td>
                  <td className="val">{pct.toFixed(2)}%</td>
                </tr>
                <tr className="total">
                  <td className="rownum">5</td>
                  <td className="label">Value of pool at ref price</td>
                  <td className="val">{usd(poolVal)}</td>
                </tr>
              </tbody>
            </table>
            <p className="smallnote">
              If the top holders were combined into one person, they would receive around{' '}
              {commas(Math.round(ecx))} real eCash, currently valued at $30 per coin.
            </p>

            {/* ── Section 2: Potential outcome ──────────────────────────── */}
            <div className="sectionhead">
              <span className="n">2.</span>
              <h2>Potential outcome</h2>
            </div>
            <table>
              <thead>
                <tr>
                  <th className="rownum">#</th>
                  <th>Item</th>
                  <th style={{textAlign:'right'}}>Value</th>
                </tr>
              </thead>
              <tbody>
                <tr className="derived">
                  <td className="rownum">1</td>
                  <td className="label">
                    Creator rewards <span className="unit">×</span>
                    <input
                      type="text"
                      inputMode="decimal"
                      value={mult}
                      onChange={e => setMult(e.target.value)}
                      style={multInputStyle}
                    />
                  </td>
                  <td className="val">{usd(futRewards)}</td>
                </tr>
                <tr>
                  <td className="rownum">2</td>
                  <td className="label">eCash reference price used for pool</td>
                  <td className="val">$30</td>
                </tr>
                <tr>
                  <td className="rownum">3</td>
                  <td className="label">Example future eCash price</td>
                  <td className="input">
                    <input
                      type="text"
                      inputMode="decimal"
                      value={futurePrice}
                      onChange={e => setFuturePrice(e.target.value)}
                    />
                  </td>
                </tr>
                <tr className="derived">
                  <td className="rownum">4</td>
                  <td className="label">eCash in swap pool <span className="unit">= row 1 / row 2</span></td>
                  <td className="val">{commas(futEcx, 1)} ECX</td>
                </tr>
                <tr className="derived">
                  <td className="rownum">5</td>
                  <td className="label">% of 50,000 max pool</td>
                  <td className="val">{futPct.toFixed(2)}%</td>
                </tr>
                <tr className="total">
                  <td className="rownum">6</td>
                  <td className="label">Value of pool at future price</td>
                  <td className="val">{usd(futPoolVal)}</td>
                </tr>
              </tbody>
            </table>
            <div className="note tight">
              The swap pool is calculated at $30/ECX. The second example only shows what that same ECX amount would be worth if ECX later traded at higher price.
            </div>

            {/* ── Section 3: Token reference ────────────────────────────── */}
            <div className="sectionhead">
              <span className="n">3.</span>
              <h2>Token reference</h2>
            </div>
            <div className="addrbox">
              <span className="k">Token address</span>
              <span className="a">{TOKEN_MINT}</span>
              <button className={'copybtn' + (copied ? ' ok' : '')} onClick={handleCopy}>
                {copied ? 'Copied' : 'Copy'}
              </button>
            </div>
            <div className="bottomctas">
              <a
                className="cta"
                href={'https://pump.fun/coin/' + TOKEN_MINT}
                target="_blank"
                rel="noopener noreferrer"
              >
                View token on pump.fun <span className="arrow">→</span>
              </a>
            </div>

          </div>
        </div>
      </div>
    );
  }

  window.TabSolToken = TabSolToken;
})();