// ============================================================
// TRADES — P&L calendar dashboard. Click a day → that day's
// trades. Click a trade → detail ticket (app-level sheet).
// ============================================================
const { useMemo: useMemoT, useState: useStateT } = React;

const DKEY = (d) => d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate();
// localized month / weekday labels (read at render time)
const MONTHS = () => window.CJI18n.list('months');
const DOW = () => window.CJI18n.list('dow');

function TradesScreen({ trades, confluences, user, view, onNew, onOpen }) {
  const { Btn, Icon, fmtUSD } = window.CJUI;
  const now = new Date(window.CJData.NOW);
  const [anchor, setAnchor] = useStateT(() => new Date(now.getFullYear(), now.getMonth(), 1));
  const [day, setDay] = useStateT(null); // Date or null (calendar drill-down)

  // index trades by calendar day
  const byDay = useMemoT(() => {
    const m = new Map();
    trades.forEach((t) => {
      const k = DKEY(new Date(t.ts));
      if (!m.has(k)) m.set(k, { net: 0, count: 0, wins: 0, items: [] });
      const e = m.get(k); e.net += t.pnl; e.count += 1; if (t.pnl > 0) e.wins += 1; e.items.push(t);
    });
    return m;
  }, [trades]);

  if (view === 'list') {
    return <ListView trades={trades} user={user} onOpen={onOpen} />;
  }
  if (day) {
    return <DayView date={day} entry={byDay.get(DKEY(day))} user={user} onBack={() => setDay(null)} onOpen={onOpen} />;
  }
  return <Calendar anchor={anchor} setAnchor={setAnchor} byDay={byDay} now={now} onPickDay={setDay} />;
}

// ---------------- List view (grouped by day) ----------------
function ListView({ trades, user, onOpen }) {
  const { fmtUSD, dayKey, t } = window.CJUI;
  const { nameOf } = window.CJData;
  const s = useMemoT(() => window.CJData.summary(trades, user.minConfluences), [trades, user]);
  const groups = useMemoT(() => {
    const out = []; let cur = null;
    trades.forEach((t) => {
      const k = dayKey(t.ts);
      if (!cur || cur.key !== k) { cur = { key: k, items: [], net: 0, wins: 0, ts: t.ts }; out.push(cur); }
      cur.items.push(t); cur.net += t.pnl; if (t.pnl > 0) cur.wins += 1;
    });
    return out;
  }, [trades]);

  return (
    <div className="fade-in" style={{ paddingTop: 20 }}>
      <section className="cal-summary" style={{ marginBottom: 22 }}>
        <div className="cal-sum-hero">
          <div className="kicker">{t('cal.netAll')}</div>
          <div className={'cal-sum-net mono ' + (s.net >= 0 ? 'pos' : 'neg')}>{fmtUSD(s.net)}</div>
          <div className="cal-sum-sub">{t('cal.tradesWinners', { n: s.count, w: trades.filter((x) => x.pnl > 0).length })}</div>
        </div>
        <div className="cal-sum-stats">
          <SumStat k={t('stat.winRate')} v={s.winRate + '%'} />
          <SumStat k={t('stat.profitFactor')} v={s.profitFactor === Infinity ? '∞' : s.profitFactor.toFixed(2)} />
          <SumStat k={t('stat.avgTrade')} v={fmtUSD(s.avg)} cls={s.avg >= 0 ? 'pos' : 'neg'} />
          <SumStat k={t('stat.discipline')} v={s.discipline + '%'} cls={s.discipline >= 80 ? 'pos' : s.discipline >= 60 ? '' : 'neg'} />
        </div>
      </section>

      <div className="ledger">
        <div className="ledger-head">
          <span className="ledger-title">{t('cal.tradeLog')}</span>
          <span className="ledger-sub">{t('cal.logSub', { n: trades.length, s: groups.length })}</span>
        </div>
        {groups.map((g) => {
          const gd = new Date(g.ts);
          return (
            <div className="lgroup" key={g.key}>
              <div className="lgroup-head">
                <div className="lgroup-left">
                  <span className="lgroup-day">{g.key}</span>
                  <span className="lgroup-date mono">{gd.toLocaleDateString(window.CJI18n.locale, { month: 'short', day: 'numeric' })} · {gd.toLocaleDateString(window.CJI18n.locale, { weekday: 'short' })}</span>
                </div>
                <div className="lgroup-right">
                  <span className="lgroup-rec mono">{g.items.length}T · <b className="pos">{g.wins}W</b> <b className="neg">{g.items.length - g.wins}L</b></span>
                  <span className={'lgroup-net mono ' + (g.net >= 0 ? 'pos' : 'neg')}>{fmtUSD(g.net)}</span>
                </div>
              </div>
              {g.items.map((t) => <TradeRow key={t.id} t={t} user={user} nameOf={nameOf} onClick={() => onOpen(t)} />)}
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ---------------- Calendar ----------------
function Calendar({ anchor, setAnchor, byDay, now, onPickDay }) {
  const { Icon, fmtUSD, t } = window.CJUI;
  const months = MONTHS();
  const y = anchor.getFullYear(), mo = anchor.getMonth();

  // build weeks (Mon-start) covering the month
  const weeks = useMemoT(() => {
    const first = new Date(y, mo, 1);
    const start = new Date(first);
    const dow = (first.getDay() + 6) % 7; // 0=Mon
    start.setDate(first.getDate() - dow);
    const out = [];
    let cursor = new Date(start);
    for (let w = 0; w < 6; w++) {
      const days = [];
      let wkNet = 0, wkCount = 0, any = false;
      for (let d = 0; d < 7; d++) {
        const date = new Date(cursor);
        const e = byDay.get(DKEY(date));
        if (e) { wkNet += e.net; wkCount += e.count; }
        days.push({ date, inMonth: date.getMonth() === mo, entry: e });
        if (date.getMonth() === mo) any = true;
        cursor.setDate(cursor.getDate() + 1);
      }
      if (w < 5 || any) out.push({ days, wkNet, wkCount, hasTrades: wkCount > 0 });
    }
    return out;
  }, [y, mo, byDay]);

  // month summary
  const month = useMemoT(() => {
    let net = 0, count = 0, wins = 0, daysTraded = 0, best = null, worst = null;
    byDay.forEach((e, k) => {
      const [yy, mm] = k.split('-').map(Number);
      if (yy === y && mm === mo) {
        net += e.net; count += e.count; wins += e.wins; daysTraded += 1;
        if (!best || e.net > best.net) best = e;
        if (!worst || e.net < worst.net) worst = e;
      }
    });
    return { net, count, wins, daysTraded, winRate: count ? Math.round((wins / count) * 100) : 0, best, worst };
  }, [y, mo, byDay]);

  const go = (delta) => setAnchor(new Date(y, mo + delta, 1));

  return (
    <div className="fade-in cal-page">
      {/* month summary */}
      <section className="cal-summary">
        <div className="cal-sum-hero">
          <div className="kicker">{t('cal.netMonth', { month: months[mo], year: y })}</div>
          <div className={'cal-sum-net mono ' + (month.net >= 0 ? 'pos' : 'neg')}>{month.count ? fmtUSD(month.net) : '—'}</div>
          <div className="cal-sum-sub">{t('cal.daysTraded', { d: month.daysTraded, dayWord: month.daysTraded === 1 ? t('cal.tradingDay') : t('cal.tradingDays'), n: month.count })}</div>
        </div>
        <div className="cal-sum-stats">
          <SumStat k={t('stat.winRate')} v={month.count ? month.winRate + '%' : '—'} />
          <SumStat k={t('stat.greenDays')} v={[...byDay].filter(([k, e]) => { const [yy, mm] = k.split('-').map(Number); return yy === y && mm === mo && e.net > 0; }).length} cls="pos" />
          <SumStat k={t('stat.bestDay')} v={month.best ? fmtUSD(month.best.net) : '—'} cls="pos" />
          <SumStat k={t('stat.worstDay')} v={month.worst ? fmtUSD(month.worst.net) : '—'} cls={month.worst && month.worst.net < 0 ? 'neg' : ''} />
        </div>
      </section>

      {/* calendar */}
      <section className="cal">
        <div className="cal-nav">
          <button className="cal-arrow" onClick={() => go(-1)} aria-label={t('aria.prevMonth')}><Icon d="arrowL" size={16} /></button>
          <div className="cal-month">{months[mo]} <span className="cal-year">{y}</span></div>
          <button className="cal-arrow" onClick={() => go(1)} aria-label={t('aria.nextMonth')}><Icon d="arrowR" size={16} /></button>
          <button className="cal-today-btn" onClick={() => setAnchor(new Date(now.getFullYear(), now.getMonth(), 1))}>{t('cal.thisMonth')}</button>
        </div>

        <div className="cal-grid">
          {DOW().map((d) => <div key={d} className="cal-dow">{d}</div>)}
          <div className="cal-dow cal-dow-week">{t('cal.week')}</div>

          {weeks.map((wk, wi) => (
            <React.Fragment key={wi}>
              {wk.days.map((c, ci) => {
                const isToday = DKEY(c.date) === DKEY(now);
                const e = c.entry;
                const tone = e ? (e.net >= 0 ? 'pos' : 'neg') : '';
                return (
                  <button
                    key={ci}
                    className={'cal-cell' + (c.inMonth ? '' : ' out') + (e ? ' has ' + tone : '') + (isToday ? ' today' : '') + (e ? ' click' : '')}
                    onClick={e ? () => onPickDay(c.date) : undefined}
                    disabled={!e}
                  >
                    <span className="cal-num">{c.date.getDate()}{isToday && <span className="cal-todaytag">{t('cal.today')}</span>}</span>
                    {e ? (
                      <span className="cal-cell-body">
                        <span className={'cal-pnl mono ' + tone}>{fmtUSD(e.net)}</span>
                        <span className="cal-count">{e.count} {e.count === 1 ? t('common.trade') : t('common.trades')} · {e.wins}W</span>
                      </span>
                    ) : c.inMonth ? <span className="cal-empty-dot" /> : null}
                  </button>
                );
              })}
              <div className={'cal-week' + (wk.hasTrades ? (wk.wkNet >= 0 ? ' pos' : ' neg') : ' flat')}>
                {wk.hasTrades ? (
                  <>
                    <span className="cal-week-k">{t('cal.weekN', { n: wi + 1 })}</span>
                    <span className={'cal-week-net mono ' + (wk.wkNet >= 0 ? 'pos' : 'neg')}>{fmtUSD(wk.wkNet)}</span>
                    <span className="cal-week-c">{wk.wkCount} {t('common.trades')}</span>
                  </>
                ) : <span className="cal-week-k">{t('cal.weekN', { n: wi + 1 })}</span>}
              </div>
            </React.Fragment>
          ))}
        </div>
        <div className="cal-legend">
          <span><span className="cal-key pos" /> {t('cal.profitable')}</span>
          <span><span className="cal-key neg" /> {t('cal.losing')}</span>
          <span className="cal-legend-hint">{t('cal.clickDay')}</span>
        </div>
      </section>
    </div>
  );
}

function SumStat({ k, v, cls }) {
  const color = cls === 'pos' ? 'var(--long)' : cls === 'neg' ? 'var(--short)' : 'var(--ink)';
  return <div className="ovstat"><div className="ovstat-k">{k}</div><div className="ovstat-v mono" style={{ color }}>{v}</div></div>;
}

// ---------------- Day drill-down ----------------
function DayView({ date, entry, user, onBack, onOpen }) {
  const { Btn, Icon, fmtUSD, t } = window.CJUI;
  const { nameOf } = window.CJData;
  const items = entry ? entry.items : [];
  const net = entry ? entry.net : 0;
  const wins = entry ? entry.wins : 0;
  const disciplined = items.filter((t) => t.conf.length >= user.minConfluences).length;

  return (
    <div className="fade-in dayview">
      <button className="dv-back" onClick={onBack}><Icon d="arrowL" size={15} /> {t('day.back')}</button>

      <div className="dv-head">
        <div>
          <div className="kicker">{date.toLocaleDateString(window.CJI18n.locale, { weekday: 'long' })}</div>
          <h2 className="dv-date">{date.toLocaleDateString(window.CJI18n.locale, { month: 'long', day: 'numeric', year: 'numeric' })}</h2>
        </div>
        <div className={'dv-net mono ' + (net >= 0 ? 'pos' : 'neg')}>{fmtUSD(net)}</div>
      </div>

      <div className="dv-stats">
        <SumStat k={t('stat.trades')} v={items.length} />
        <SumStat k={t('stat.record')} v={wins + 'W · ' + (items.length - wins) + 'L'} />
        <SumStat k={t('stat.winRate')} v={items.length ? Math.round((wins / items.length) * 100) + '%' : '—'} />
        <SumStat k={t('stat.withinRules')} v={disciplined + ' / ' + items.length} cls={disciplined === items.length ? 'pos' : ''} />
      </div>

      <div className="dv-list">
        <div className="ledger-head" style={{ marginTop: 4 }}>
          <span className="ledger-title">{t('list.trades')}</span>
          <span className="ledger-sub">{t('list.thisSession', { n: items.length })}</span>
        </div>
        {items.map((t) => <TradeRow key={t.id} t={t} user={user} nameOf={nameOf} onClick={() => onOpen(t)} />)}
      </div>
    </div>
  );
}

// shared row (day view)
function TradeRow({ t, user, nameOf, onClick }) {
  const { fmtUSD } = window.CJUI;
  const tr = window.CJUI.t; // `t` is the trade here, so alias the translator
  const long = t.direction === 'Long';
  const below = t.conf.length < user.minConfluences;
  const names = t.conf.map(nameOf);
  const shown = names.slice(0, 3).join('   ·   ');
  const more = names.length > 3 ? `   +${names.length - 3}` : '';
  const d = new Date(t.ts);
  return (
    <button className={'lrow' + (below ? ' below' : '')} onClick={onClick}>
      <span className="lr-time mono">{d.toLocaleTimeString(window.CJI18n.locale, { hour: '2-digit', minute: '2-digit', hour12: false })}</span>
      <span className="lr-inst"><span className={'lr-dir ' + (long ? 'pos' : 'neg')}>{long ? '▲' : '▼'}</span><span className="mono">{t.instrument}</span></span>
      <span className="lr-conf">
        {names.length ? <><span className="lr-confnames">{shown}</span><span className="lr-more">{more}</span></> : <span className="lr-none">{tr('row.noConf')}</span>}
        {below && <span className="lr-below">{tr('row.below', { n: user.minConfluences })}</span>}
      </span>
      <span className={'lr-pnl mono ' + (t.pnl >= 0 ? 'pos' : 'neg')}>{fmtUSD(t.pnl)}</span>
    </button>
  );
}

window.TradesScreen = TradesScreen;