/* global React, apiFetch */
function MonthlyPreview({ account }) {
  const [data,setData]=React.useState(null);
  const [error,setError]=React.useState("");
  React.useEffect(()=>{
    let alive=true;
    setData(null); setError("");
    if (!account || account.server !== "OctaFX-Demo") return ()=>{alive=false;};
    const load=()=>apiFetch(`/monthly/${encodeURIComponent(account.id)}`).then(value=>{
      if(alive){setData(value);setError("");}
    }).catch(()=>{if(alive)setError("Monthly observations are temporarily unavailable.");});
    load(); const timer=setInterval(load,60000);
    return ()=>{alive=false;clearInterval(timer);};
  },[account && account.id,account && account.server]);
  if(!account || account.server!=="OctaFX-Demo") return null;
  const row=data && data.latest;
  const money=v=>Number.isFinite(v)?v.toLocaleString(undefined,{style:"currency",currency:"USD",maximumFractionDigits:2}):"—";
  const unavailable=!row || row.status==="inputs_unavailable";
  return <div className="panel" data-testid="monthly-preview">
    <div className="panel-header"><div className="panel-title">Gold Commercial Positioning · Monthly</div><span className="pill">Read-only preview</span></div>
    <div style={{padding:18,lineHeight:1.6}}>
      <p style={{marginTop:0}}>Experimental long/cash strategy. This monitor uses your actual demo balance and equity. It records sizing observations; it does not place orders or simulate profits.</p>
      {error && <p role="alert">{error}</p>}
      {data && data.stale && <p role="status">Observations are stale or pending. Do not treat this as a current trading signal.</p>}
      {!data && !error && <p>Loading observations…</p>}
      {row && <>
        <div className="grid-2">
          <div>Risk equity<br/><strong>{money(row.risk_equity_usd)}</strong></div>
          <div>Equity needed for minimum lot at current risk<br/><strong>{money(row.minimum_equity_usd)}</strong></div>
        </div>
        <p><strong>{unavailable?"Waiting for valid inputs":row.sizing_status==="below_minimum"?"Below minimum trade size — skip":"Size is representable — execution still disabled"}</strong></p>
        {!unavailable && <p>Signal: {row.status==="signal_cash"?"Cash":row.status==="target_long"||row.status==="below_minimum"?"Long indication":row.status.replaceAll("_"," ")} · Rounded target: {Number(row.target_lots||0).toFixed(2)} lots</p>}
        <p style={{color:"var(--text-2)",fontSize:12}}>Observed: {new Date(row.captured_at).toLocaleString()}<br/>Report date: {row.report_date?new Date(row.report_date).toLocaleDateString():"—"}</p>
      </>}
      <p>Risk is fixed at a 5% annual volatility target, capped at unlevered exposure. Lots round down; a small account is never rounded up or given an artificial balance.</p>
      <p style={{color:"var(--text-2)",fontSize:12}}>Historical results are promising, not proof of a winning strategy. Monthly execution timing and holding costs still need verification. Your currently selected bot runs separately from this monitor.</p>
      <details><summary>Recent sizing observations ({data?data.observations.length:0})</summary>
        <ul>{data && data.observations.map((r,i)=><li key={`${r.captured_at}-${i}`}>{new Date(r.captured_at).toLocaleString()} — {(r.sizing_status||r.status).replaceAll("_"," ")}</li>)}</ul>
      </details>
    </div>
  </div>;
}
window.MonthlyPreview=MonthlyPreview;