// ============ Log Trade (full-page form) ============
const Section = ({ n, title, subtitle, children }) => (
  <div className="card mb-16">
    <div className="card-head">
      <div style={{display:'flex',alignItems:'center',gap:10}}>
        <div style={{width:24,height:24,borderRadius:6,background:'#1a1a1a',display:'grid',placeItems:'center',fontSize:12,fontWeight:600,color:'#a3a3a3',fontFamily:'JetBrains Mono'}}>{n}</div>
        <div>
          <div className="card-title">{title}</div>
          <div className="card-sub">{subtitle}</div>
        </div>
      </div>
    </div>
    <div style={{padding:'18px 20px 22px'}}>{children}</div>
  </div>
);

const LogTradePage = ({ setRoute }) => {
  const { t, fmtCur, fmtCurShort } = useI18n();
  const { accounts, active, statsFor } = useAccounts();

  const handoff = useMemo(() => {
    try { const s = localStorage.getItem('edgebook:edit_trade'); if (s) { localStorage.removeItem('edgebook:edit_trade'); return JSON.parse(s); } } catch {}
    return null;
  }, []);
  const isEdit = handoff && !handoff._duplicate;
  const isConvert = handoff?._convertPlan;

  const defaultAcct = active === 'all' ? (accounts[0]?.id || 'main') : active;
  const [acctId, setAcctId] = useState(handoff?.accountId || defaultAcct);
  useEffect(()=>{ if (!handoff) setAcctId(active==='all' ? (accounts[0]?.id || 'main') : active); }, [active]);
  const activeAccount = accounts.find(a => a.id === acctId);

  // Plan vs Executed mode
  const [mode, setMode] = useState(handoff?._plan && !isConvert ? 'plan' : 'executed');

  // Per-trade asset class (only visible when account is Mixed)
  const accountAsset = activeAccount?.assetClass || 'Equities';
  const [perTradeAsset, setPerTradeAsset] = useState(handoff?.assetClass || (accountAsset==='Mixed' ? 'Equities' : accountAsset));
  const resolvedAsset = accountAsset === 'Mixed' ? perTradeAsset : accountAsset;
  useEffect(()=>{ if (accountAsset !== 'Mixed') setPerTradeAsset(accountAsset); }, [accountAsset]);

  const [dir, setDir] = useState(handoff?.dir || 'long');
  const [tags, setTags] = useState(handoff?.tags || ['ORB Breakout']);
  const [quality, setQuality] = useState(handoff?.quality || 4);
  const [mood, setMood] = useState(handoff?.mood || 5);
  const [discipline, setDiscipline] = useState({ followed: true, sized: true, stop: true });
  const [mistakes, setMistakes] = useState([]);
  const [grade, setGrade] = useState(handoff?.grade || 'B');
  const [ticker, setTicker] = useState(handoff?.ticker || 'NVDA');
  const [entry, setEntry] = useState(handoff?.entry ? String(handoff.entry) : '118.40');
  const [exit, setExit] = useState(handoff?.exit ? String(handoff.exit) : '121.85');
  const [size, setSize] = useState(handoff?.size ? String(handoff.size) : '200');
  const [commission, setCommission] = useState('2.00');
  const [stop, setStop] = useState(handoff?.stop ? String(handoff.stop) : '117.20');
  const [target, setTarget] = useState(handoff?.target ? String(handoff.target) : '122.00');

  // Asset-specific extras
  const [leverage, setLeverage] = useState(handoff?.leverage || 10);
  const [fundingRate, setFundingRate] = useState(handoff?.fundingRate || '0.01');
  const [pointValue, setPointValue] = useState(handoff?.pointValue || '50');
  const [tickSize, setTickSize] = useState(handoff?.tickSize || '0.25');
  const [strike, setStrike] = useState(handoff?.strike || '120');
  const [expiry, setExpiry] = useState(handoff?.expiry || '2026-05-17');
  const [premium, setPremium] = useState(handoff?.premium || '2.40');
  const [delta, setDelta] = useState(handoff?.delta || '0.45');

  // Plan-only
  const [whyTrade, setWhyTrade] = useState(handoff?.whyTrade || '');

  const toLocalISO = (d) => {
    const p = (n)=>String(n).padStart(2,'0');
    return `${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())}T${p(d.getHours())}:${p(d.getMinutes())}`;
  };
  const now = new Date();
  const earlier = new Date(now.getTime() - 34*60*1000);
  const [entryTime, setEntryTime] = useState(handoff?.date ? toLocalISO(new Date(handoff.date)) : toLocalISO(earlier));
  const [exitTime, setExitTime] = useState(toLocalISO(now));

  const [riskPct, setRiskPct] = useState('1.0');
  const toggle = (arr, set, v) => set(arr.includes(v) ? arr.filter(x=>x!==v) : [...arr, v]);

  const e = parseFloat(entry)||0, x = parseFloat(exit)||0, s = parseFloat(size)||0;
  const st = parseFloat(stop)||0, tg = parseFloat(target)||0;
  const comm = parseFloat(commission)||0;
  const grossPnl = dir==='long' ? (x-e)*s : (e-x)*s;
  const pnl = grossPnl - comm;
  const risk = Math.abs((dir==='long' ? e-st : st-e)*s);
  const r = risk ? (pnl/risk) : 0;
  const rr = risk ? Math.abs((dir==='long' ? tg-e : e-tg)*s) / risk : 0;

  const acctStats = activeAccount ? statsFor(activeAccount.id) : { netPnl: 0 };
  const acctBalance = (activeAccount?.startingCapital || 25000) + (acctStats.netPnl || 0);
  const riskDollars = acctBalance * (parseFloat(riskPct)||0) / 100;
  const perShare = Math.abs((dir==='long' ? e-st : st-e)) || 0;
  const suggestedSize = perShare > 0 ? Math.floor(riskDollars / perShare) : 0;
  const riskActualPct = acctBalance > 0 ? (risk / acctBalance) * 100 : 0;

  const moodLabels = t('mood7');
  const moodColor = (i) => i <= 1 ? '#ef4444' : i <= 2 ? '#f59e0b' : i === 3 ? '#fbbf24' : i === 4 ? '#a3a3a3' : i === 5 ? '#60a5fa' : i === 6 ? '#10b981' : '#8b5cf6';

  // ===== Reactive risk warnings =====
  const rules = activeAccount?.risk || {};
  const maxRiskPct = rules.maxRiskPerTrade ?? 1.0; // percent
  const dailyLimit = rules.maxDailyLoss ?? 500;   // dollars
  const minRR = rules.minRR ?? 1.5;
  const todaysRealized = useMemo(()=>{
    const todayKey = new Date().toISOString().slice(0,10);
    return (acctStats.todayTrades||[]).reduce((s,t)=>s+(t.pnl||0),0);
  }, [acctStats]);

  const warnings = [];
  const passes = [];
  // Risk pct
  if (riskActualPct > maxRiskPct) warnings.push({level:'red', key: (t('risk_warning_pct')||'Risk $ exceeds {n}% per-trade rule').replace('{n}',maxRiskPct)});
  else passes.push(`Risk within ${maxRiskPct}% per-trade limit`);
  // Daily limit
  const projectedDailyLow = todaysRealized - risk;
  if (projectedDailyLow < -Math.abs(dailyLimit)) warnings.push({level:'red', key: (t('daily_limit_warn')||'Daily loss limit will hit at {amt}').replace('{amt}', fmtCur(-Math.abs(dailyLimit)))});
  else passes.push('Daily loss limit not hit');
  // RR
  if (rr > 0 && rr < minRR) warnings.push({level:'amber', key: (t('rr_low')||'R:R below your {n} minimum').replace('{n}',minRR)});
  else if (rr >= minRR) passes.push(`R:R above ${minRR} minimum`);
  // Quality
  if (quality <= 2) warnings.push({level:'amber', key: t('quality_low')||'Setup quality < 3 — confidence low'});
  // Emotion extremes
  if (mood === 1 || mood === 7) warnings.push({level:'amber', key: t('emotion_extreme')||"You're emotionally extreme"});

  const reds = warnings.filter(w=>w.level==='red').length;
  const ambers = warnings.filter(w=>w.level==='amber').length;
  const discOn = Object.values(discipline).filter(Boolean).length;
  const baseEmo = Math.abs(mood - 4); // 0..3 from center
  const tilt = Math.max(0, Math.min(10, baseEmo + 1.5*reds + 0.5*ambers - 1.0*discOn + 2));
  const tiltColor = tilt <= 3 ? '#10b981' : tilt <= 6 ? '#f59e0b' : '#ef4444';

  // ===== Screenshots (multi) =====
  const DRAFT_KEY = `edgebook:logtrade_draft:${acctId}`;
  const [screenshots, setScreenshots] = useState([]); // {id, url, label}
  const [dragOver, setDragOver] = useState(false);
  const addFiles = (files) => {
    const arr = Array.from(files || []).filter(f => f.type?.startsWith('image/'));
    arr.forEach(f => {
      const reader = new FileReader();
      reader.onload = () => {
        setScreenshots(prev => [...prev, { id: Math.random().toString(36).slice(2), url: reader.result, label: '' }]);
      };
      reader.readAsDataURL(f);
    });
  };
  useEffect(() => {
    const on = (ev) => {
      const items = ev.clipboardData?.items; if (!items) return;
      for (const it of items) {
        if (it.type?.startsWith('image/')) { const f = it.getAsFile(); if (f) addFiles([f]); }
      }
    };
    window.addEventListener('paste', on);
    return () => window.removeEventListener('paste', on);
  }, []);

  // ===== Auto-save draft =====
  const [savedAt, setSavedAt] = useState(null);
  const [saveState, setSaveState] = useState('idle'); // idle | saving | saved
  const [tick, setTick] = useState(0);
  const [draftBanner, setDraftBanner] = useState(null);
  const firstLoadRef = useRef(true);

  useEffect(() => {
    if (!firstLoadRef.current) return;
    firstLoadRef.current = false;
    try {
      const raw = localStorage.getItem(DRAFT_KEY);
      if (raw) {
        const d = JSON.parse(raw);
        if (d._savedAt) {
          const mins = Math.max(1, Math.floor((Date.now() - d._savedAt) / 60000));
          setDraftBanner({ mins });
        }
      }
    } catch {}
  }, [acctId]);

  const formSnapshot = useMemo(()=>({
    mode, perTradeAsset, dir, ticker, entry, exit, size, commission, stop, target,
    entryTime, exitTime, riskPct, tags, quality, mood, discipline, mistakes, grade,
    leverage, fundingRate, pointValue, tickSize, strike, expiry, premium, delta, whyTrade,
    screenshots: screenshots.map(s=>({id:s.id,url:s.url,label:s.label})),
  }), [mode,perTradeAsset,dir,ticker,entry,exit,size,commission,stop,target,entryTime,exitTime,riskPct,tags,quality,mood,discipline,mistakes,grade,leverage,fundingRate,pointValue,tickSize,strike,expiry,premium,delta,whyTrade,screenshots]);

  useEffect(() => {
    if (firstLoadRef.current) return;
    setSaveState('saving');
    const tm = setTimeout(() => {
      try {
        localStorage.setItem(DRAFT_KEY, JSON.stringify({ ...formSnapshot, _savedAt: Date.now() }));
      } catch {}
      setSavedAt(Date.now());
      setSaveState('saved');
      setTimeout(()=>setSaveState('idle'), 1400);
    }, 600);
    return () => clearTimeout(tm);
  }, [formSnapshot]);

  useEffect(() => {
    const iv = setInterval(() => setTick(t=>t+1), 5000);
    return () => clearInterval(iv);
  }, []);

  const saveIndicator = (() => {
    if (saveState === 'saving') return t('saving_now')||'Saving…';
    if (saveState === 'saved') return t('all_saved')||'All changes saved';
    if (!savedAt) return null;
    const secs = Math.max(1, Math.round((Date.now() - savedAt) / 1000));
    const n = secs < 60 ? secs : Math.round(secs/60);
    return secs < 60
      ? (t('saved_x_ago')||'Saved {n}s ago').replace('{n}', secs)
      : (t('saved_x_ago_min')||'Saved {n}m ago').replace('{n}', n);
  })();

  const handleCancel = () => {
    try { localStorage.removeItem(DRAFT_KEY); } catch {}
    setRoute('trades');
  };

  const discardDraft = () => {
    try { localStorage.removeItem(DRAFT_KEY); } catch {}
    setDraftBanner(null);
  };

  // ===== Render =====
  return (
    <div className="page">
      {/* Plan/Executed mode toggle above title */}
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:12,gap:12,flexWrap:'wrap'}}>
        <div className="seg">
          <button className={mode==='plan'?'on':''} onClick={()=>setMode('plan')}>{t('plan_mode')||'Plan'}</button>
          <button className={mode==='executed'?'on':''} onClick={()=>setMode('executed')}>{t('executed_mode')||'Executed'}</button>
        </div>
        {saveIndicator && <div className="tiny muted mono">{saveIndicator}</div>}
      </div>

      {draftBanner && (
        <div className="card card-pad mb-16" style={{padding:'10px 14px',display:'flex',alignItems:'center',justifyContent:'space-between',gap:8,background:'rgba(245,158,11,.08)',borderColor:'rgba(245,158,11,.3)'}}>
          <div className="tiny"><span style={{color:'var(--amber)'}}>●</span> {(t('draft_restored')||'Draft restored — last edited {n}m ago').replace('{n}', draftBanner.mins)}</div>
          <button className="btn btn-ghost tiny" onClick={discardDraft}>{t('discard_draft')||'Discard draft'}</button>
        </div>
      )}

      <PageHead
        title={isEdit ? t('edit_trade_title') : (mode==='plan' ? (t('plan_trade_title')||'Plan trade') : t('nav_log_trade'))}
        sub={t('logtrade_sub')}
        actions={<>
          <button className="btn btn-ghost" onClick={handleCancel}><Icon name="x" size={13}/> {t('cancel')}</button>
          <button className="btn btn-primary"><Icon name="check" size={13}/> {mode==='plan' ? (t('save_plan')||'Save plan') : (isEdit ? t('save_changes_trade') : t('save_trade'))}</button>
        </>}
      />

      <div className="logtrade-shell" style={{display:'grid',gridTemplateColumns:'1fr 300px',gap:20,alignItems:'start'}}>
        <div>
          <Section n="1" title={t('sec_instrument')} subtitle={t('sec_instrument_sub')}>
            <div className="g-3">
              <div><label className="label">{t('ticker')}</label><input className="input mono" value={ticker} onChange={e=>setTicker(e.target.value.toUpperCase())} style={{width:'100%',fontWeight:600}}/></div>
              <div>
                <label className="label">{t('direction')}</label>
                <div className="toggle">
                  <button className={'long ' + (dir==='long'?'on':'')} onClick={()=>setDir('long')}>Long</button>
                  <button className={'short ' + (dir==='short'?'on':'')} onClick={()=>setDir('short')}>Short</button>
                </div>
              </div>
              <div>
                <label className="label">{t('asset_class')||'Asset'}</label>
                {accountAsset === 'Mixed' ? (
                  <select className="select" style={{width:'100%'}} value={perTradeAsset} onChange={e=>setPerTradeAsset(e.target.value)}>
                    <option>Equities</option><option>Crypto</option><option>Forex</option><option>Futures</option><option>Options</option>
                  </select>
                ) : (
                  <div className="input" style={{display:'flex',alignItems:'center',background:'var(--card-2)',border:'1px dashed var(--border)',color:'var(--text-2)',fontSize:12.5,height:32}}>
                    {(t('trading_badge')||'Trading: {asset}').replace('{asset}', resolvedAsset)}
                  </div>
                )}
              </div>
            </div>
          </Section>

          {mode==='executed' && (
          <Section n="2" title={t('sec_execution')} subtitle={t('sec_execution_sub')}>
            <div className="g-4">
              <div><label className="label">{t('entry_price')}</label><input className="input mono" value={entry} onChange={e=>setEntry(e.target.value)} style={{width:'100%'}}/></div>
              <div><label className="label">{t('entry_time')}</label><input type="datetime-local" className="input mono" value={entryTime} onChange={e=>setEntryTime(e.target.value)} style={{width:'100%'}}/></div>
              <div><label className="label">{t('exit_price')}</label><input className="input mono" value={exit} onChange={e=>setExit(e.target.value)} style={{width:'100%'}}/></div>
              <div><label className="label">{t('exit_time')}</label><input type="datetime-local" className="input mono" value={exitTime} onChange={e=>setExitTime(e.target.value)} style={{width:'100%'}}/></div>

              {/* Asset-specific size fields */}
              {resolvedAsset === 'Equities' && (
                <div><label className="label">{t('size_shares')||'Shares'}</label><input className="input mono" value={size} onChange={e=>setSize(e.target.value)} style={{width:'100%'}}/></div>
              )}
              {resolvedAsset === 'Crypto' && (<>
                <div><label className="label">{t('contracts')||'Contracts'}</label><input className="input mono" value={size} onChange={e=>setSize(e.target.value)} style={{width:'100%'}}/></div>
                <div><label className="label">{t('leverage')||'Leverage'} <span className="mono muted" style={{marginLeft:6}}>{leverage}×</span></label><input type="range" className="slider" min="1" max="100" value={leverage} onChange={e=>setLeverage(+e.target.value)}/></div>
                <div><label className="label">{t('funding_rate')||'Funding rate %'}</label><input className="input mono" value={fundingRate} onChange={e=>setFundingRate(e.target.value)} style={{width:'100%'}}/></div>
              </>)}
              {resolvedAsset === 'Forex' && (<>
                <div><label className="label">{t('lots')||'Lots'}</label><input className="input mono" type="number" step="0.01" value={size} onChange={e=>setSize(e.target.value)} style={{width:'100%'}}/></div>
                <div><label className="label">{t('pips')||'Pips'}</label><div className="input mono" style={{display:'flex',alignItems:'center',background:'var(--bg)',border:'1px dashed var(--border-strong)',color:'var(--text-2)'}}>{((dir==='long'?(x-e):(e-x))*10000).toFixed(1)}</div></div>
              </>)}
              {resolvedAsset === 'Futures' && (<>
                <div><label className="label">{t('contracts')||'Contracts'}</label><input className="input mono" value={size} onChange={e=>setSize(e.target.value)} style={{width:'100%'}}/></div>
                <div><label className="label">{t('point_value')||'Point value ($)'}</label><input className="input mono" value={pointValue} onChange={e=>setPointValue(e.target.value)} style={{width:'100%'}}/></div>
                <div><label className="label">{t('tick_size')||'Tick size ($)'}</label><input className="input mono" value={tickSize} onChange={e=>setTickSize(e.target.value)} style={{width:'100%'}}/></div>
              </>)}
              {resolvedAsset === 'Options' && (<>
                <div><label className="label">{t('contracts')||'Contracts'}</label><input className="input mono" value={size} onChange={e=>setSize(e.target.value)} style={{width:'100%'}}/></div>
                <div><label className="label">{t('strike')||'Strike'}</label><input className="input mono" value={strike} onChange={e=>setStrike(e.target.value)} style={{width:'100%'}}/></div>
                <div><label className="label">{t('expiry')||'Expiry'}</label><input type="date" className="input mono" value={expiry} onChange={e=>setExpiry(e.target.value)} style={{width:'100%'}}/></div>
                <div><label className="label">{t('premium')||'Premium'}</label><input className="input mono" value={premium} onChange={e=>setPremium(e.target.value)} style={{width:'100%'}}/></div>
                <div><label className="label">{t('delta')||'Delta'}</label><input className="input mono" type="number" step="0.01" min="-1" max="1" value={delta} onChange={e=>setDelta(e.target.value)} style={{width:'100%'}}/></div>
              </>)}

              <div><label className="label">{t('commission')}</label><input className="input mono" value={commission} onChange={e=>setCommission(e.target.value)} style={{width:'100%'}}/></div>
              <div><label className="label">{t('venue')}</label><select className="select" style={{width:'100%'}}><option>IBKR</option><option>Tradovate</option><option>Schwab</option></select></div>
              <div>
                <label className="label">{t('account')}</label>
                <select className="select" style={{width:'100%'}} value={acctId} onChange={e=>setAcctId(e.target.value)}>
                  {accounts.map(a => {
                    const s = statsFor(a.id);
                    const bal = a.startingCapital + s.netPnl;
                    return <option key={a.id} value={a.id}>{a.name} — {a.broker} · {fmtCurShort(bal)}</option>;
                  })}
                </select>
              </div>
            </div>
          </Section>
          )}

          {mode==='plan' && (
          <Section n="2" title={t('sec_execution')} subtitle={t('sec_execution_sub')}>
            <div className="g-3">
              <div>
                <label className="label">{t('account')}</label>
                <select className="select" style={{width:'100%'}} value={acctId} onChange={e=>setAcctId(e.target.value)}>
                  {accounts.map(a => <option key={a.id} value={a.id}>{a.name} — {a.broker}</option>)}
                </select>
              </div>
              <div><label className="label">{t('planned_size')||'Planned size'}</label><input className="input mono" value={size} onChange={e=>setSize(e.target.value)} style={{width:'100%'}}/></div>
              <div><label className="label">{t('entry_price')||'Planned entry'}</label><input className="input mono" value={entry} onChange={e=>setEntry(e.target.value)} style={{width:'100%'}}/></div>
            </div>
          </Section>
          )}

          <Section n="3" title={t('sec_risk')} subtitle={t('sec_risk_sub')}>
            <div className="g-3">
              <div><label className="label">{t('stop_loss')}</label><input className="input mono" value={stop} onChange={e=>setStop(e.target.value)} style={{width:'100%'}}/></div>
              <div><label className="label">{t('take_profit')}</label><input className="input mono" value={target} onChange={e=>setTarget(e.target.value)} style={{width:'100%'}}/></div>
              <div><label className="label">{t('planned_rr')}</label><div className="input mono" style={{display:'flex',alignItems:'center',background:'var(--bg)',border:'1px dashed var(--border-strong)',color:'var(--text-2)'}}>1 : {rr.toFixed(2)}</div></div>
            </div>
            <div className="hsep"/>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:12,alignItems:'end'}}>
              <div>
                <label className="label">{t('risk_pct_account')||'Risk % of account'}</label>
                <input className="input mono" value={riskPct} onChange={e=>setRiskPct(e.target.value)} style={{width:'100%'}}/>
              </div>
              <div>
                <label className="label">{t('risk_dollars')||'Risk ($)'}</label>
                <div className="input mono" style={{display:'flex',alignItems:'center',background:'var(--bg)',border:'1px dashed var(--border-strong)',color:'var(--text-2)'}}>{fmtCur(riskDollars,false)}</div>
              </div>
              <div>
                <label className="label">{t('suggested_size')||'Suggested size'}</label>
                <div style={{display:'flex',gap:6}}>
                  <div className="input mono" style={{flex:1,display:'flex',alignItems:'center',background:'var(--bg)',border:'1px dashed var(--border-strong)',color:'var(--text)',fontWeight:600}}>{suggestedSize || '—'}</div>
                  <button className="btn" onClick={()=>setSize(String(suggestedSize))} disabled={!suggestedSize} title="Apply">↵</button>
                </div>
              </div>
            </div>
            <div className="tiny muted" style={{marginTop:8}}>{t('risk_actual')||'Actual risk on this trade:'} <span className={'mono '+(riskActualPct>parseFloat(riskPct)?'dn':'up')} style={{fontWeight:600}}>{riskActualPct.toFixed(2)}%</span> {t('of_account')||'of account'}</div>
          </Section>

          <Section n="4" title={t('sec_context')} subtitle={t('sec_context_sub')}>
            <label className="label">{t('strategy_tags')}</label>
            <div className="chips" style={{marginBottom:18}}>
              {STRATS.map(s => <span key={s} className={'chip ' + (tags.includes(s)?'on':'')} onClick={()=>toggle(tags,setTags,s)}>{s}</span>)}
            </div>

            <label className="label">{t('setup_quality')} <span className="mono muted" style={{marginLeft:6}}>{quality}/5</span></label>
            <input type="range" className="slider" min="1" max="5" value={quality} onChange={e=>setQuality(+e.target.value)} style={{marginBottom:6}}/>
            <div style={{display:'flex',justifyContent:'space-between',fontSize:11,color:'#6b6b6b',marginTop:4,fontFamily:'JetBrains Mono',marginBottom:18}}>
              <span>C−</span><span>C</span><span>B</span><span>A</span><span>A+</span>
            </div>

            <label className="label">
              {t('emotion_state')}
              <span className="mono" style={{marginLeft:8, color: moodColor(mood), fontWeight:600}}>{moodLabels[mood-1]}</span>
              <span className="mono muted" style={{marginLeft:6}}>{mood}/7</span>
            </label>
            <div style={{position:'relative'}}>
              <div style={{height:6,borderRadius:3,background:'linear-gradient(90deg,#ef4444 0%,#f59e0b 20%,#fbbf24 33%,#a3a3a3 50%,#60a5fa 66%,#10b981 83%,#8b5cf6 100%)',marginBottom:8}}/>
              <input type="range" className="slider" min="1" max="7" value={mood} onChange={e=>setMood(+e.target.value)} style={{position:'absolute',top:-4,left:0,right:0,background:'transparent'}}/>
            </div>
            <div style={{display:'flex',justifyContent:'space-between',fontSize:10.5,color:'#6b6b6b',marginTop:4,marginBottom:20,gap:4}}>
              {moodLabels.map((l,i)=>(
                <span key={i} style={{flex:1,textAlign:'center',color: mood===i+1 ? moodColor(i+1) : undefined, fontWeight: mood===i+1 ? 600 : 400}}>{l}</span>
              ))}
            </div>

            {mode==='plan' && (
              <>
                <label className="label">{t('why_this_trade')||'Why this trade'}</label>
                <textarea className="input textarea" value={whyTrade} onChange={e=>setWhyTrade(e.target.value)} style={{width:'100%',minHeight:60}} placeholder="Catalyst, thesis, expected move..."/>
              </>
            )}

            <label className="label" style={{marginTop:16}}>{t('discipline_check')}</label>
            <div>
              {[['followed', t('disc_followed')], ['sized', t('disc_sized')], ['stop', t('disc_stop')]].map(([k,label]) => (
                <div key={k} className="disc-row">
                  <div className="disc-label">
                    <Icon name="check" size={14} style={{color: discipline[k] ? '#10b981' : '#3a3a3a'}}/>
                    {label}
                  </div>
                  <div className={'disc-sw ' + (discipline[k]?'on':'')} onClick={()=>setDiscipline({...discipline, [k]: !discipline[k]})}/>
                </div>
              ))}
            </div>
          </Section>

          {mode==='executed' && (
          <Section n="5" title={t('sec_reflection')} subtitle={t('sec_reflection_sub')}>
            <label className="label">{t('mistakes')}</label>
            <div className="chips" style={{marginBottom:16}}>
              {MISTAKES.map(m => <span key={m} className={'chip warn ' + (mistakes.includes(m)?'on':'')} onClick={()=>toggle(mistakes,setMistakes,m)}>{m}</span>)}
            </div>
            <div className="g-2" style={{alignItems:'start'}}>
              <div>
                <label className="label">{t('self_grade')}</label>
                <div className="chips">
                  {['A','B','C','D','F'].map(g => <span key={g} className={'chip neutral ' + (grade===g?'on':'')} onClick={()=>setGrade(g)} style={{minWidth:36,justifyContent:'center',textAlign:'center',fontFamily:'JetBrains Mono',fontWeight:600}}>{g}</span>)}
                </div>
              </div>
              <div>
                <label className="label">{t('screenshot')}</label>
                <div
                  onDragOver={e=>{e.preventDefault();setDragOver(true);}}
                  onDragLeave={()=>setDragOver(false)}
                  onDrop={e=>{e.preventDefault();setDragOver(false);addFiles(e.dataTransfer.files);}}
                  onClick={()=>{ const i=document.createElement('input');i.type='file';i.multiple=true;i.accept='image/*';i.onchange=()=>addFiles(i.files);i.click(); }}
                  style={{border:'2px dashed '+(dragOver?'#10b981':'var(--border-strong)'),borderRadius:8,padding:'24px 16px',textAlign:'center',cursor:'pointer',transition:'all .15s',background: dragOver?'rgba(16,185,129,.05)':'transparent',minHeight:160,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:6}}>
                  <Icon name="upload" size={20} style={{color:'var(--text-3)'}}/>
                  <div className="tiny" style={{color:'var(--text-2)',fontWeight:500}}>{t('drop_charts')||'Drop charts here, or click to upload'}</div>
                  <div className="tiny muted">{t('paste_tip')||'Tip: Cmd/Ctrl+V to paste from clipboard'}</div>
                </div>
                {screenshots.length > 0 && (
                  <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:8,marginTop:10}}>
                    {screenshots.map((sc, i) => (
                      <div key={sc.id} style={{position:'relative'}}>
                        <img src={sc.url} style={{width:'100%',aspectRatio:'1',objectFit:'cover',borderRadius:6,border:'1px solid var(--border)'}}/>
                        <input className="input tiny" placeholder={['Entry chart','Exit chart','Setup','After'][i%4]} value={sc.label} onChange={e=>setScreenshots(screenshots.map(x=>x.id===sc.id?{...x,label:e.target.value}:x))} style={{width:'100%',marginTop:4,fontSize:11,padding:'4px 6px',height:24}}/>
                        <button onClick={()=>setScreenshots(screenshots.filter(x=>x.id!==sc.id))} style={{position:'absolute',top:4,right:4,width:20,height:20,borderRadius:999,background:'rgba(0,0,0,.7)',color:'#fff',border:'none',cursor:'pointer',display:'grid',placeItems:'center',fontSize:12}}>×</button>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
            <label className="label" style={{marginTop:16}}>{t('notes')}</label>
            <textarea className="input textarea" style={{width:'100%'}} placeholder={t('notes_ph')} defaultValue="Clean ORB break with volume expansion on the 5m. Trimmed half into prior day high."/>
          </Section>
          )}

          <div style={{display:'flex',justifyContent:'flex-end',gap:8,flexWrap:'wrap'}}>
            <button className="btn btn-ghost" onClick={handleCancel}>{t('cancel')}</button>
            <button className="btn btn-primary"><Icon name="check" size={13}/> {mode==='plan' ? (t('save_plan')||'Save plan') : (isEdit ? t('save_changes_trade') : t('save_trade'))}</button>
          </div>
        </div>

        <div className="logtrade-preview" style={{position:'sticky',top:72}}>
          <div className="card" style={{padding:18}}>
            <div className="tiny muted" style={{textTransform:'uppercase',letterSpacing:'0.08em',fontWeight:500,marginBottom:12}}>{t('live_preview')}</div>
            <div style={{display:'flex',alignItems:'baseline',gap:10,marginBottom:4}}>
              <span className="ticker" style={{fontSize:20}}>{ticker||'—'}</span>
              <DirBadge dir={dir}/>
              {mode==='plan' && <span className="badge" style={{background:'rgba(245,158,11,.14)',color:'var(--amber)'}}>{t('pending_status')||'PENDING'}</span>}
            </div>
            <div className={'mono ' + (pnl>=0?'up':'dn')} style={{fontSize:26,fontWeight:600,letterSpacing:'-0.02em'}}>{mode==='plan' ? '—' : fmtCur(pnl)}</div>
            <div className="hsep"/>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,rowGap:12}}>
              <div><div className="tiny muted">{t('entry')}</div><div className="mono">${e.toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2})}</div></div>
              <div><div className="tiny muted">{t('exit')}</div><div className="mono">{mode==='plan' ? '—' : '$'+x.toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2})}</div></div>
              <div><div className="tiny muted">{t('size')}</div><div className="mono">{s}</div></div>
              <div><div className="tiny muted">{t('risk')}</div><div className="mono">{fmtCur(risk,false)}</div></div>
              <div><div className="tiny muted">{t('r_multiple')}</div><div className={'mono ' + (r>=0?'up':'dn')} style={{fontWeight:600}}>{mode==='plan'?'—':(r>=0?'+':'')+r.toFixed(2)+'R'}</div></div>
              <div><div className="tiny muted">{t('rr')}</div><div className="mono">1 : {rr.toFixed(2)}</div></div>
            </div>
          </div>

          <div className="card card-pad" style={{padding:14,marginTop:12}}>
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:10}}>
              <div className="tiny muted" style={{textTransform:'uppercase',letterSpacing:'0.08em',fontWeight:500}}>{t('risk_check')}</div>
              <div style={{display:'flex',alignItems:'center',gap:6}}>
                <div className="tiny muted">{t('tilt_score')||'Tilt'}</div>
                <div className="mono" style={{fontWeight:700,color:tiltColor}}>{tilt.toFixed(1)}</div>
              </div>
            </div>
            {warnings.map((w,i)=>(
              <div key={'w'+i} style={{display:'flex',alignItems:'flex-start',gap:8,marginBottom:6}}>
                <span style={{fontSize:11,lineHeight:'15px'}}>{w.level==='red'?'🔴':'🟡'}</span>
                <span className="tiny" style={{color: w.level==='red' ? 'var(--red)' : 'var(--amber)',textWrap:'pretty'}}>{w.key}</span>
              </div>
            ))}
            {passes.map((label,i)=>(
              <div key={'p'+i} style={{display:'flex',alignItems:'center',gap:8,marginBottom:6}}>
                <Icon name="check" size={13} style={{color:'#10b981',flexShrink:0}}/>
                <span className="tiny muted">{label}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

window.LogTradePage = LogTradePage;