// ============ Analytics page ============
const Donut = ({ segments, size = 160, thickness = 22 }) => {
  const r = (size - thickness) / 2;
  const c = 2 * Math.PI * r;
  let acc = 0;
  const total = segments.reduce((s,x)=>s+x.value,0) || 1;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="#1a1a1a" strokeWidth={thickness} />
      {segments.map((s,i) => {
        const frac = s.value / total;
        const dash = `${frac * c} ${c}`;
        const off = -acc * c;
        acc += frac;
        return <circle key={i} cx={size/2} cy={size/2} r={r} fill="none" stroke={s.color} strokeWidth={thickness} strokeDasharray={dash} strokeDashoffset={off} transform={`rotate(-90 ${size/2} ${size/2})`} />;
      })}
      <text x={size/2} y={size/2-4} textAnchor="middle" fill="#ededed" fontSize="22" fontFamily="JetBrains Mono" fontWeight="600">{Math.round((segments[0].value/total)*100)}%</text>
      <text x={size/2} y={size/2+14} textAnchor="middle" fill="#6b6b6b" fontSize="11">{segments[0].label}</text>
    </svg>
  );
};

const BarChart = ({ data, height = 180, positiveColor = '#10b981', negativeColor = '#ef4444', showZero = false }) => {
  const wrapRef = useRef(null);
  const [w, setW] = useState(500);
  useEffect(() => {
    const el = wrapRef.current; if (!el) return;
    const ro = new ResizeObserver(() => setW(el.clientWidth));
    ro.observe(el); setW(el.clientWidth);
    return () => ro.disconnect();
  }, []);
  const padL = 32, padR = 10, padT = 10, padB = 26;
  const innerW = Math.max(50, w - padL - padR);
  const innerH = height - padT - padB;
  const vals = data.map(d=>d.value);
  const max = Math.max(...vals, 0);
  const min = Math.min(...vals, 0);
  const span = max - min || 1;
  const zeroY = padT + (max / span) * innerH;
  const bw = innerW / data.length * 0.72;
  const gap = innerW / data.length;
  return (
    <div ref={wrapRef} style={{width:'100%'}}>
      <svg width={w} height={height}>
        {showZero && <line x1={padL} x2={padL+innerW} y1={zeroY} y2={zeroY} stroke="#2a2a2a" strokeWidth="1" />}
        {data.map((d,i) => {
          const cx = padL + gap*i + gap/2;
          const isPos = d.value >= 0;
          const barH = Math.abs(d.value) / span * innerH;
          const y = isPos ? zeroY - barH : zeroY;
          return (
            <g key={i}>
              <rect x={cx-bw/2} y={y} width={bw} height={Math.max(1,barH)} fill={isPos ? positiveColor : negativeColor} opacity="0.85" rx="2" />
              <text x={cx} y={height-8} textAnchor="middle" fill="#6b6b6b" fontSize="10" fontFamily="JetBrains Mono">{d.label}</text>
            </g>
          );
        })}
      </svg>
    </div>
  );
};

const AnalyticsPage = () => {
  const { t, fmtCur } = useI18n();
  const { active, filteredTrades } = useAccounts();
  const closed = filteredTrades.filter(x=>x.status==='closed');
  const wins = closed.filter(x=>x.pnl>0).length;
  const losses = closed.filter(x=>x.pnl<0).length;
  const be = closed.length - wins - losses;
  const wlSegs = [
    { label:t('wins'), value:wins, color:'#10b981' },
    { label:t('losses'), value:losses, color:'#ef4444' },
    { label:t('be'), value:be, color:'#3a3a3a' },
  ];
  const buckets = [-3,-2,-1,0,1,2,3,4];
  const rDist = buckets.map((b,i) => {
    const next = buckets[i+1] ?? Infinity;
    const count = closed.filter(x => x.r >= b && x.r < next).length;
    return { label: b < 0 ? b+'R' : '+'+b+'R', value: count };
  });
  const dayNames = t('lang_mn') ? ['Ня','Да','Мя','Лх','Пү','Ба','Бя'] : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
  const byDay = [1,2,3,4,5].map(d => {
    const ts = closed.filter(x => x.date.getDay() === d);
    return { label: dayNames[d], value: +ts.reduce((s,x)=>s+x.pnl,0).toFixed(0) };
  });
  const byHour = Array.from({length:7}, (_,i) => {
    const h = 9 + i;
    const ts = closed.filter(x => x.date.getHours() === h);
    return { label: (h>12?h-12:h)+(h>=12?'p':'a'), value: +ts.reduce((s,x)=>s+x.pnl,0).toFixed(0) };
  });
  const byStrat = useMemo(() => {
    const m = {};
    closed.forEach(t => {
      if (!m[t.strategy]) m[t.strategy] = { name:t.strategy, trades:0, wins:0, sumR:0, net:0 };
      m[t.strategy].trades++;
      if (t.pnl>0) m[t.strategy].wins++;
      m[t.strategy].sumR += t.r;
      m[t.strategy].net += t.pnl;
    });
    return Object.values(m).map(s => ({ ...s, winRate: s.trades ? s.wins/s.trades : 0, avgR: s.trades ? +(s.sumR/s.trades).toFixed(2) : 0, net:+s.net.toFixed(2) })).sort((a,b)=>b.net-a.net);
  }, [closed]);
  const byInst = (() => {
    const m = {};
    closed.forEach(x => { if (!m[x.ticker]) m[x.ticker] = { ticker:x.ticker, count:0, pnl:0, wins:0 }; m[x.ticker].count++; m[x.ticker].pnl += x.pnl; if (x.pnl>0) m[x.ticker].wins++; });
    return Object.values(m).sort((a,b)=>b.pnl-a.pnl).slice(0,8);
  })();

  const avgWin = closed.filter(x=>x.pnl>0).reduce((s,x)=>s+x.pnl,0)/Math.max(1,wins);
  const avgLoss = closed.filter(x=>x.pnl<0).reduce((s,x)=>s+x.pnl,0)/Math.max(1,losses);

  return (
    <div className="page">
      <PageHead
        title={t('nav_analytics')}
        sub={t('analytics_sub')}
        actions={<>
          <div className="seg">
            <button>30D</button><button className="on">90D</button><button>YTD</button><button>All</button>
          </div>
          <button className="btn"><Icon name="download" size={13}/> {t('export')}</button>
        </>}
      />
      <KPIRow />

      <div className="card mb-16">
        <div className="card-head">
          <div className="card-title">{t('equity_curve')}</div>
          <div className="tiny muted">96 days · {t('n_trades', { n: closed.length })}</div>
        </div>
        <div style={{padding:'10px 12px 16px'}}><EquityCurve height={280} /></div>
      </div>

      <div className="g-2">
        <div className="card">
          <div className="card-head"><div className="card-title">{t('wl_mix')}</div><span className="tiny muted">{t('n_trades', { n: closed.length })}</span></div>
          <div className="card-pad" style={{display:'flex',alignItems:'center',gap:24,justifyContent:'center',padding:'28px 18px',flexWrap:'wrap'}}>
            <Donut segments={wlSegs} size={160} />
            <div className="donut-legend">
              <div><span className="dot" style={{background:'#10b981'}}/>{t('wins')} <span className="mono muted" style={{marginLeft:10}}>{wins}</span></div>
              <div><span className="dot" style={{background:'#ef4444'}}/>{t('losses')} <span className="mono muted" style={{marginLeft:10}}>{losses}</span></div>
              <div><span className="dot" style={{background:'#3a3a3a'}}/>{t('be')} <span className="mono muted" style={{marginLeft:10}}>{be}</span></div>
              <div className="hsep" style={{margin:'8px 0'}}/>
              <div className="tiny muted">{t('avg_win')} <span className="mono up">{fmtCur(avgWin)}</span></div>
              <div className="tiny muted">{t('avg_loss')} <span className="mono dn">{fmtCur(avgLoss)}</span></div>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><div className="card-title">{t('r_dist')}</div><span className="tiny muted">{t('r_dist_sub')}</span></div>
          <div className="card-pad"><BarChart data={rDist} height={200} /></div>
        </div>

        <div className="card">
          <div className="card-head"><div className="card-title">{t('pnl_by_dow')}</div></div>
          <div className="card-pad"><BarChart data={byDay} height={200} showZero /></div>
        </div>

        <div className="card">
          <div className="card-head"><div className="card-title">{t('pnl_by_hour')}</div></div>
          <div className="card-pad"><BarChart data={byHour} height={200} showZero /></div>
        </div>

        <div className="card">
          <div className="card-head"><div className="card-title">{t('best_worst_strategies')}</div></div>
          <div style={{overflowX:'auto'}}>
          <table className="table" style={{display:'table'}}>
            <thead><tr><th>{t('th_strategy')}</th><th>{t('th_trades')}</th><th>{t('th_winrate')}</th><th>{t('th_avg_r')}</th><th>{t('th_net')}</th></tr></thead>
            <tbody>
              {byStrat.map(s => (
                <tr key={s.name}>
                  <td>{s.name}</td>
                  <td className="mono muted">{s.trades}</td>
                  <td className="mono">{fmtPct(s.winRate)}</td>
                  <td className={'mono ' + (s.avgR>=0?'up':'dn')}>{(s.avgR>=0?'+':'')+s.avgR.toFixed(2)}R</td>
                  <td className={'mono ' + (s.net>=0?'up':'dn')} style={{fontWeight:600}}>{fmtCur(s.net)}</td>
                </tr>
              ))}
            </tbody>
          </table>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><div className="card-title">{t('by_instrument')}</div></div>
          <div style={{overflowX:'auto'}}>
          <table className="table" style={{display:'table'}}>
            <thead><tr><th>{t('th_ticker')}</th><th>{t('th_trades')}</th><th>{t('th_winrate')}</th><th>{t('th_net')}</th></tr></thead>
            <tbody>
              {byInst.map(s => (
                <tr key={s.ticker}>
                  <td><span className="ticker">{s.ticker}</span></td>
                  <td className="mono muted">{s.count}</td>
                  <td className="mono">{fmtPct(s.wins/s.count)}</td>
                  <td className={'mono ' + (s.pnl>=0?'up':'dn')} style={{fontWeight:600}}>{fmtCur(s.pnl)}</td>
                </tr>
              ))}
            </tbody>
          </table>
          </div>
        </div>
      </div>
    </div>
  );
};

window.AnalyticsPage = AnalyticsPage;