// ============================================================
// TANK'S TRADING DESK — track-records.jsx
// Standalone "Track Records" page: the data-to-plan-to-execution
// workbench (moved off the homepage). Loads the same canonical
// performance.json + trades.json and renders <TradePlanWorkbench>.
// ============================================================
const { useState: trUseState, useEffect: trUseEffect, useCallback: trUseCb } = React;

function TrNav() {
  return (
    <div className="nav" role="navigation">
      <a className="logo" href="index.html" aria-label="Tank's Trading Desk home">
        <span className="logo-mark" aria-hidden="true">
          <svg viewBox="0 0 48 48" width="40" height="40"><rect width="48" height="48" rx="12" fill="#4B5E8E" /><rect x="13" y="11" width="22" height="4" rx="1.5" fill="#fff" /><rect x="19" y="18" width="10" height="17" rx="1.5" fill="#fff" /></svg>
        </span>
        <span className="logo-wm">
          <span className="wm-main"><span className="wm-light">Tank</span><span className="wm-dot" aria-hidden="true" />TradingDesk</span>
          <span className="wm-sub">process over prediction</span>
        </span>
      </a>
      <nav className="nav-links" aria-label="Primary">
        <a className="nav-link" href="index.html">Home</a>
        <a className="nav-link active" href="track-records.html">Track Records</a>
        <a className="nav-link" href="dashboard.html?from=track-records">Performance Dashboard</a>
        <a className="nav-link" href="rulebook.html">Rulebook</a>
        <a className="nav-link" href="indicator.html">Indicator</a>
      </nav>
    </div>);
}

function TrackRecordsApp() {
  const [data, setData] = trUseState(null);
  const [err, setErr] = trUseState(null);
  const [currentTradeId, setCurrentTradeId] = trUseState(null);

  trUseEffect(() => {
    const R = window.__resources || {};
    const okJson = (label) => (r) => { if (!r.ok) throw new Error('Failed to load ' + label + ': ' + r.status); return r.json(); };
    const perfUrl = R.performance || 'data/performance.json';
    const tradesUrl = R.trades || 'data/trades.json';
    Promise.all([
      fetch(perfUrl).then(okJson('performance.json')),
      fetch(tradesUrl).then(okJson('trades.json'))
    ]).then(([perf, tr]) => {
      setData({
        ...perf, ...tr,
        meta: { ...(tr.meta || {}), ...(perf.meta || {}) },
        chart: { ...(perf.chart || {}), ...(tr.chart || {}) }
      });
    }).catch((e) => { console.error(e); setErr(e.message); });
  }, []);

  const hasTrade = trUseCb((id) => data?.trades.some((t) => t.id === id) ?? false, [data]);
  const selectTrade = (id) => {
    if (id === null) { setCurrentTradeId(null); return; }
    if (!hasTrade(id)) return;
    setCurrentTradeId((prev) => prev === id ? null : id);
  };

  if (err) {
    return (
      <div className="app"><TrNav /><div className="pad"><h2 className="hd-h">Couldn't load trade data.</h2><p className="hd-l">{err}</p></div></div>);
  }
  if (!data) {
    return (
      <div className="app"><TrNav /><div className="pad" style={{ textAlign: 'center', paddingTop: 80 }}><div style={{ fontFamily: 'var(--font-sans)', color: '#6B7280' }}>Loading the track record…</div></div></div>);
  }

  return (
    <div className="app">
      <TrNav />
      <div className="pad">
        <div className="recon-head">
          <p className="recon-eb">we mark our own homework</p>
          <h2 className="recon-h">Track records — <em>every plan, reconciled</em>.</h2>
          <p className="recon-sub">Each daily plan is published before the bell, then reconciled to real broker fills after the close — wins and losses alike. Pick a day and walk the full data-to-plan-to-execution trail. This is the running record, including the bad days. For headline performance, see the <a href="dashboard.html?from=track-records">Performance Dashboard</a>.</p>
        </div>

        <TradePlanWorkbench data={data} currentTradeId={currentTradeId} onSelect={selectTrade} />
      </div>

      <div className="footer footer-simple">
        <img className="footer-logo" src="assets/logo/tank-mark.svg" alt="Tank's Trading Desk" width="36" height="36" />
        <span className="footer-copy">© {data.meta.published_at.slice(0, 4)} Tank's Trading Desk · All rights reserved. Education only — not financial advice. Operated from Singapore. Past performance is not indicative of future results.</span>
      </div>
    </div>);
}

ReactDOM.createRoot(document.getElementById('root')).render(<TrackRecordsApp />);