/* TickProof verification page — app shell, tweaks, orchestration. */
const { useState, useEffect } = React;
const V = window.TP_VERIFY;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "view": "desktop",
  "direction": "terminal",
  "share": "c4f9k2",
  "type": "live"
}/*EDITMODE-END*/;

/* resolve which share to show from the /p/{id} URL (query, hash, or path) */
function readShareId() {
  try {
    var q = new URLSearchParams(location.search).get("id");
    if (q && V.SHARES[q]) return q;
    var h = (location.hash || "").replace(/^#\/?/, "");
    if (h && V.SHARES[h]) return h;
    var seg = location.pathname.split("/").filter(Boolean).pop();
    if (seg && V.SHARES[seg]) return seg;
  } catch (e) {}
  return null;
}

function SiteFooter() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-brand">
            <a className="brand" href="/"><span className="mark"></span><span className="wm">TICK<span className="ac">PROOF</span></span></a>
            <p>The verified trade journal built for futures prop firm traders. Built by traders, for traders.</p>
          </div>
          <div className="foot-col">
            <h5>Product</h5>
            <a href="/#verified">Verified shares</a>
            <a href="/#journal">Trade journal</a>
            <a href="/#accounts">Multi-account</a>
            <a href="/#pricing">Pricing</a>
          </div>
          <div className="foot-col">
            <h5>Company</h5>
            <a href="mailto:hello@tickproof.io">hello@tickproof.io</a>
            <a href="/#firms">Supported firms</a>
            <a href="/#waitlist">Join waitlist</a>
          </div>
          <div className="foot-col">
            <h5>Follow</h5>
            <a href="https://x.com/TickProofHQ" target="_blank" rel="noopener"><svg className="soc-ic" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z"/></svg>@TickProofHQ</a>
            <a href="https://instagram.com/TickProofHQ" target="_blank" rel="noopener"><svg className="soc-ic" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.72 3.72 0 0 1-1.38-.9 3.72 3.72 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16Zm0 1.44c-3.14 0-3.51.01-4.75.07-1.15.05-1.77.24-2.18.4-.55.22-.94.47-1.35.88-.41.41-.66.8-.88 1.35-.16.41-.35 1.03-.4 2.18-.06 1.24-.07 1.61-.07 4.75s.01 3.51.07 4.75c.05 1.15.24 1.77.4 2.18.22.55.47.94.88 1.35.41.41.8.66 1.35.88.41.16 1.03.35 2.18.4 1.24.06 1.61.07 4.75.07s3.51-.01 4.75-.07c1.15-.05 1.77-.24 2.18-.4.55-.22.94-.47 1.35-.88.41-.41.66-.8.88-1.35.16-.41.35-1.03.4-2.18.06-1.24.07-1.61.07-4.75s-.01-3.51-.07-4.75c-.05-1.15-.24-1.77-.4-2.18a3.64 3.64 0 0 0-.88-1.35 3.64 3.64 0 0 0-1.35-.88c-.41-.16-1.03-.35-2.18-.4-1.24-.06-1.61-.07-4.75-.07Zm0 2.45a5.95 5.95 0 1 1 0 11.9 5.95 5.95 0 0 1 0-11.9Zm0 9.81a3.86 3.86 0 1 0 0-7.72 3.86 3.86 0 0 0 0 7.72Zm7.58-10.05a1.39 1.39 0 1 1-2.78 0 1.39 1.39 0 0 1 2.78 0Z"/></svg>@TickProofHQ</a>
            <a href="https://facebook.com/TickProofHQ" target="_blank" rel="noopener"><svg className="soc-ic" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07c0 6.02 4.39 11.01 10.13 11.93v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.08 24 18.09 24 12.07Z"/></svg>@TickProofHQ</a>
          </div>
        </div>
        <div className="foot-legal">
          <p className="foot-disc">Risk disclosure: Futures and forex trading contains substantial risk and is not for every investor. An investor could potentially lose all or more than the initial investment. Risk capital is money that can be lost without jeopardizing ones' financial security or life style. Only risk capital should be used for trading and only those with sufficient risk capital should consider trading. Past performance is not necessarily indicative of future results.</p>
          <p className="foot-disc">NinjaTrader affiliation: NinjaTrader® is a registered trademark of NinjaTrader Group, LLC. No NinjaTrader company has any affiliation with the owner, developer, or provider of the products or services described herein, or any interest, ownership or otherwise, in any such product or service, or endorses, recommends or approves any such product or service.</p>
          <p className="foot-disc">Affiliate disclosure: TickProof participates in affiliate programs with some of the proprietary trading firms listed on this site. If you sign up with a firm through a link on TickProof, we may earn a commission at no additional cost to you. This does not influence which firms we support or how rule tracking is calculated.</p>
          <p className="foot-disc">TickProof is a software tool. Nothing on this site, in the product, or in any user-shared content constitutes financial, investment, or trading advice. <a href="/risk-disclosure" style={{ color: "var(--fg-secondary)", textDecoration: "underline" }}>Read the full risk disclosure</a>.</p>
          <div className="foot-bot">
            <span className="cp">© <span id="yr">2026</span> TickProof. All rights reserved.</span>
            <div className="fl">
              <a href="/risk-disclosure">Risk disclosure</a>
              <a href="/privacy">Privacy</a>
              <a href="/terms">Terms</a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = useState(0);
  const [modal, setModal] = useState(false);
  const [toast, setToast] = useState({ msg: "", show: false });

  // When served from a static share folder (/p/<id>/index.html), that page sets
  // window.__TP_SHARE to lock the page to its share. Otherwise the Share tweak / ?id drives it.
  const forcedShare = (typeof window !== "undefined" && V.SHARES[window.__TP_SHARE]) ? window.__TP_SHARE : null;
  const share = V.SHARES[forcedShare] || V.SHARES[t.share] || V.SHARES.c4f9k2;
  const type = t.type;
  const scopeMode = share.scopeMode;
  const accounts = share.accounts.map((id) => V.acct(id));
  const shareUrl = share.url;

  const view = V.shareView(share.id);
  const stats = view.stats;
  const equity = view.equity;
  const trades = view.trades;

  // URL ↔ share sync (skipped when the folder locks the share)
  useEffect(() => {
    if (forcedShare) return;
    const urlId = readShareId();
    if (urlId && urlId !== t.share) setTweak("share", urlId);
  }, []);
  useEffect(() => {
    setPage(0);
    if (forcedShare) return;
    try { history.replaceState(null, "", "?id=" + t.share); } catch (e) {}
  }, [t.share, forcedShare]);

  let toastTimer = null;
  function fireToast(msg) {
    setToast({ msg, show: true });
    clearTimeout(toastTimer);
    toastTimer = setTimeout(() => setToast((s) => ({ ...s, show: false })), 2200);
  }
  function onCopy() {
    const url = "https://" + shareUrl;
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(url).then(() => fireToast("Share link copied"), () => fireToast("Share link copied"));
    } else { fireToast("Share link copied"); }
  }
  function onXlsx() { fireToast("Trade list queued for export · XLSX"); }

  const content = (
    <>
      <StatusBar type={type} broker="Tradovate" refreshed="4 min ago" onHow={() => setModal(true)} />

      <main className="vp">
        {/* hero */}
        <section className="vhero">
          <p className="vhero-eyebrow">Verified share · {share.kind === "calendar" ? "monthly calendar · single account" : "30-day summary · " + accounts.length + " accounts"}</p>
          {share.kind === "calendar"
            ? <CalendarHero type={type} share={share} V={V} />
            : <SummaryHero type={type} share={share} V={V} />}
          <p className="vhero-sub">This is the card Dale Morrison shared. Every figure below is drawn from the same broker data and covers the {share.periodLabel} record in full for the {scopeMode === "multi" ? "accounts" : "account"} in scope.</p>
        </section>

        {/* attribution */}
        <section className="vp-sec">
          <Attribution shareCount={6} />
        </section>

        {/* track record */}
        <section className="vp-sec">
          <div className="vp-label"><span className="ix">01</span><span className="eb">{share.periodLabel} track record</span><span className="rule"></span></div>
          <ScopeBar scopeMode={scopeMode} accounts={accounts} />
          <TrackRecord stats={stats} windowVal={view.windowVal} windowSub={view.windowSub} V={V} />
        </section>

        {/* equity */}
        <section className="vp-sec">
          <div className="vp-label"><span className="ix">02</span><span className="eb">Equity curve</span><span className="rule"></span></div>
          <EquityCurve pts={equity} axis={view.axis} periodLabel={share.periodLabel} V={V} />
        </section>

        {/* trade list */}
        <section className="vp-sec vp-wide">
          <div className="vp-label"><span className="ix">03</span><span className="eb">Trade details · {share.periodLabel}</span><span className="rule"></span></div>
          <TradeTable trades={trades} scopeMode={scopeMode} page={page} setPage={setPage} onXlsx={onXlsx} periodLabel={share.periodLabel} V={V} />
        </section>

        {/* verify it yourself */}
        <section className="vp-sec">
          <div className="vp-label"><span className="ix">04</span><span className="eb">Verify it yourself</span><span className="rule"></span></div>
          <HowItWorks />
        </section>

        {/* cta */}
        <section className="vp-sec">
          <ConversionCTA />
        </section>
      </main>

      <SiteFooter />
    </>
  );

  const rootCls = "dir-" + t.direction + (t.view === "phone" ? " as-phone" : "");

  return (
    <div className={rootCls}>
      <div className="vp-gridbg"></div>

      {t.view === "phone"
        ? <div className="device"><div className="notch"></div><div className="device-scroll">{content}</div></div>
        : content}

      <TweaksPanel>
        <TweakSection label="Presentation" />
        <TweakRadio label="View" value={t.view} options={["desktop", "phone"]} onChange={(v) => setTweak("view", v)} />
        <TweakSelect label="Direction" value={t.direction}
          options={[{ value: "terminal", label: "Terminal" }, { value: "spotlight", label: "Spotlight" }, { value: "compact", label: "Compact" }]}
          onChange={(v) => setTweak("direction", v)} />
        <TweakSection label="Share data" />
        {!forcedShare && (
          <TweakSelect label="Share" value={t.share}
            options={[{ value: "m5y6", label: "Calendar · 1 account (/p/m5y6)" }, { value: "c4f9k2", label: "30-day · 5 accounts (/p/c4f9k2)" }]}
            onChange={(v) => setTweak("share", v)} />
        )}
        <TweakSelect label="Account type" value={t.type}
          options={[{ value: "live", label: "Live funded" }, { value: "eval", label: "Evaluation" }, { value: "sim", label: "Paper" }]}
          onChange={(v) => setTweak("type", v)} />
      </TweaksPanel>

      {modal && <HowModal onClose={() => setModal(false)} />}
      <Toast msg={toast.msg} show={toast.show} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);