// ============ Trade detail drawer ============
const TradeDrawer = ({ trade, onClose, onEdit, onDuplicate, onDelete }) => {
  const { t, fmtCur } = useI18n();
  const { accountsById } = useAccounts();

  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  if (!trade) return null;
  const acct = accountsById[trade.accountId];
  const fmtPx = (v) => '$' + Number(v||0).toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2});
  const dur = () => {
    if (!trade.exit || !trade.date) return '—';
    // Pseudo duration based on volatility
    const mins = 15 + ((trade.id*7) % 180);
    const h = Math.floor(mins/60), m = mins%60;
    return h ? `${h}h ${m}m` : `${m}m`;
  };
  const risk$ = Math.abs(((trade.dir==='long'?trade.entry-(trade.stop||trade.entry*.99):(trade.stop||trade.entry*1.01)-trade.entry))*trade.size);
  const rr = trade.target ? Math.abs((trade.dir==='long'?trade.target-trade.entry:trade.entry-trade.target)*trade.size)/Math.max(1,risk$) : 0;
  const emColor = trade.mood>=6?'#10b981':trade.mood>=5?'#60a5fa':trade.mood===4?'#a3a3a3':trade.mood>=3?'#fbbf24':trade.mood>=2?'#f59e0b':'#ef4444';

  return (
    <>
      <div className="td-scrim" onClick={onClose}/>
      <div className="td-drawer" role="dialog" aria-label="Trade details">
        <div className="td-head">
          <div style={{flex:1,minWidth:0}}>
            <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:4,flexWrap:'wrap'}}>
              <span className="ticker" style={{fontSize:22}}>{trade.ticker}</span>
              <DirBadge dir={trade.dir}/>
              <OutcomeBadge out={trade.outcome}/>
            </div>
            <div className={'mono ' + (trade.pnl>0?'up':trade.pnl<0?'dn':'neu')} style={{fontSize:24,fontWeight:600,letterSpacing:'-0.02em'}}>
              {trade.status==='open' ? '—' : fmtCur(trade.pnl)}
            </div>
            <div className="muted tiny" style={{marginTop:4}}>
              {acct && <><span style={{display:'inline-block',width:8,height:8,borderRadius:'50%',background:acct.color,marginRight:6,verticalAlign:'middle'}}/>{acct.name} · </>}
              {fmtDate(trade.date)} · {fmtTime(trade.date)}
            </div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x" size={16}/></button>
        </div>

        <div className="td-body">
          <div className="td-sec">
            <div className="td-sec-title">{t('td_execution')}</div>
            <div className="td-kv">
              <div><div>{t('entry_price')}</div><div className="mono">{fmtPx(trade.entry)}</div></div>
              <div><div>{t('exit_price')}</div><div className="mono">{trade.exit ? fmtPx(trade.exit) : '—'}</div></div>
              <div><div>{t('size')}</div><div className="mono">{trade.size}</div></div>
              <div><div>{t('commission')}</div><div className="mono muted">−$2.00</div></div>
              <div><div>{t('td_duration')}</div><div className="mono">{dur()}</div></div>
              <div><div>{t('venue')}</div><div>{acct?.broker || 'IBKR'}</div></div>
            </div>
          </div>

          <div className="td-sec">
            <div className="td-sec-title">{t('td_risk')}</div>
            <div className="td-kv">
              <div><div>{t('stop_loss')}</div><div className="mono">{fmtPx(trade.stop || trade.entry*(trade.dir==='long'?.99:1.01))}</div></div>
              <div><div>{t('take_profit')}</div><div className="mono">{fmtPx(trade.target || trade.entry*(trade.dir==='long'?1.02:.98))}</div></div>
              <div><div>{t('td_risk_dollars')}</div><div className="mono">{fmtPx(risk$)}</div></div>
              <div><div>{t('rr')}</div><div className="mono">1 : {rr.toFixed(2)}</div></div>
              <div><div>{t('r_multiple')}</div><div className={'mono ' + (trade.r>0?'up':trade.r<0?'dn':'neu')} style={{fontWeight:600}}>{trade.status==='open'?'—':(trade.r>=0?'+':'')+trade.r.toFixed(2)+'R'}</div></div>
            </div>
          </div>

          <div className="td-sec">
            <div className="td-sec-title">{t('td_context')}</div>
            <div style={{marginBottom:10}}>
              <div className="tiny muted" style={{marginBottom:6}}>{t('strategy_tags')}</div>
              <div className="chips">
                {(trade.tags||[]).map(tg => <span key={tg} className="tag">{tg}</span>)}
                {!(trade.tags||[]).length && <span className="muted tiny">—</span>}
              </div>
            </div>
            <div className="td-kv" style={{marginTop:10}}>
              <div><div>{t('setup_quality')}</div><div className="mono">{trade.quality || 4}/5</div></div>
              <div><div>{t('emotion_label')}</div><div style={{display:'flex',alignItems:'center',gap:6}}><span style={{width:8,height:8,borderRadius:'50%',background:emColor}}/>{['Fear','Anxious','Doubt','Neutral','Focused','Confident','Euphoric'][Math.max(0,Math.min(6,(trade.mood||5)-1))]}</div></div>
            </div>
            <div style={{marginTop:12}}>
              <div className="tiny muted" style={{marginBottom:6}}>{t('discipline_check')}</div>
              <div style={{display:'flex',flexDirection:'column',gap:4}}>
                {[[t('disc_followed'), true],[t('disc_sized'), trade.outcome!=='loss' || Math.random()>.5],[t('disc_stop'), true]].map(([lab,ok],i)=>(
                  <div key={i} style={{display:'flex',alignItems:'center',gap:8,fontSize:13}}>
                    <Icon name={ok?'check':'x'} size={13} style={{color:ok?'#10b981':'#ef4444'}}/>
                    <span>{lab}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="td-sec">
            <div className="td-sec-title">{t('td_reflection')}</div>
            {trade.outcome==='loss' && (
              <div style={{marginBottom:10}}>
                <div className="tiny muted" style={{marginBottom:6}}>{t('mistakes')}</div>
                <div className="chips">
                  <span className="chip warn on">Chased entry</span>
                  <span className="chip warn on">Moved stop</span>
                </div>
              </div>
            )}
            <div className="td-kv" style={{marginBottom:10}}>
              <div><div>{t('self_grade')}</div><div className="mono" style={{fontSize:16,fontWeight:600}}>{trade.grade || (trade.outcome==='win'?'B':'C')}</div></div>
            </div>
            <div className="tiny muted" style={{marginBottom:6}}>{t('notes')}</div>
            <div style={{fontSize:13,textWrap:'pretty',color:'#d4d4d4',background:'#0f0f0f',border:'1px solid var(--border)',borderRadius:8,padding:'10px 12px'}}>
              {trade.notes || `${trade.strategy} setup on ${trade.ticker}. ${trade.outcome==='win'?'Clean execution, held to target.':'Entry was fine but exit was premature.'}`}
            </div>
          </div>

          <div className="td-sec">
            <div className="td-sec-title">{t('td_timestamps')}</div>
            <div className="td-kv">
              <div><div>{t('entry_time')}</div><div className="mono tiny">{fmtDate(trade.date)} {fmtTime(trade.date)}</div></div>
              <div><div>{t('exit_time')}</div><div className="mono tiny">{trade.exit ? `${fmtDate(trade.date)} ${fmtTime(new Date(trade.date.getTime()+45*60000))}` : '—'}</div></div>
              <div><div>{t('td_created')}</div><div className="mono tiny">{fmtDate(trade.date)}</div></div>
              <div><div>{t('td_updated')}</div><div className="mono tiny">{fmtDate(trade.date)}</div></div>
            </div>
          </div>
        </div>

        <div className="td-foot">
          <button className="btn btn-primary" onClick={()=>onEdit(trade)} style={{flex:1,justifyContent:'center'}}><Icon name="edit" size={13}/> {t('td_edit')}</button>
          <button className="btn" onClick={()=>onDuplicate(trade)}><Icon name="layers" size={13}/> {t('td_duplicate')}</button>
          <button className="btn" style={{color:'#ef4444',borderColor:'rgba(239,68,68,.3)'}} onClick={()=>onDelete(trade)}><Icon name="trash" size={13}/> {t('td_delete')}</button>
        </div>
      </div>
    </>
  );
};

window.TradeDrawer = TradeDrawer;