// ============ Trades page ============
const TradesPage = ({ setRoute }) => {
  const { t } = useI18n();
  const { active, filteredTrades } = useAccounts();
  const [q, setQ] = useState('');
  const [status, setStatus] = useState('all');
  const [dir, setDir] = useState('all');
  const [outcome, setOutcome] = useState('all');
  const [sort, setSort] = useState('date_desc');
  const [page, setPage] = useState(1);
  const [drawer, setDrawer] = useState(null);
  const [menu, setMenu] = useState(null); // trade id
  const [toDelete, setToDelete] = useState(null);
  const [deletedIds, setDeletedIds] = useState(() => {
    try { return JSON.parse(localStorage.getItem('edgebook:deleted_trades')||'[]'); } catch { return []; }
  });
  const per = 15;

  useEffect(()=>{
    const onDoc = () => setMenu(null);
    document.addEventListener('click', onDoc);
    return () => document.removeEventListener('click', onDoc);
  }, []);

  const persistDel = (arr) => {
    setDeletedIds(arr);
    try { localStorage.setItem('edgebook:deleted_trades', JSON.stringify(arr)); } catch {}
  };

  const filtered = useMemo(() => {
    let r = filteredTrades.filter(tr => {
      if (deletedIds.includes(tr.id)) return false;
      if (status !== 'all' && tr.status !== status) return false;
      if (dir !== 'all' && tr.dir !== dir) return false;
      if (outcome !== 'all' && tr.outcome !== outcome) return false;
      if (q && !tr.ticker.toLowerCase().includes(q.toLowerCase()) && !tr.strategy.toLowerCase().includes(q.toLowerCase())) return false;
      return true;
    });
    const cmp = {
      date_desc: (a,b) => b.date - a.date,
      date_asc: (a,b) => a.date - b.date,
      pnl_desc: (a,b) => b.pnl - a.pnl,
      pnl_asc: (a,b) => a.pnl - b.pnl,
      r_desc: (a,b) => b.r - a.r,
    }[sort];
    return [...r].sort(cmp);
  }, [q, status, dir, outcome, sort, filteredTrades, deletedIds]);

  const pages = Math.max(1, Math.ceil(filtered.length / per));
  const rows = filtered.slice((page-1)*per, page*per);
  useEffect(()=>{ setPage(1); }, [q, status, dir, outcome, sort]);

  const onEdit = (tr) => { try { localStorage.setItem('edgebook:edit_trade', JSON.stringify(tr)); } catch {} setDrawer(null); setRoute('logtrade'); };
  const onDuplicate = (tr) => { const d = { ...tr, _duplicate:true }; try { localStorage.setItem('edgebook:edit_trade', JSON.stringify(d)); } catch {} setDrawer(null); setRoute('logtrade'); };
  const onDelete = (tr) => { setDrawer(null); setToDelete(tr); };
  const confirmDelete = () => { persistDel([...deletedIds, toDelete.id]); setToDelete(null); };

  return (
    <div className="page">
      <PageHead
        title={t('nav_trades')}
        sub={t('trades_sub', { n: filtered.length.toLocaleString(), total: filteredTrades.length.toLocaleString() })}
        actions={<>
          <button className="btn"><Icon name="upload" size={13}/> {t('import')}</button>
          <button className="btn"><Icon name="download" size={13}/> {t('export_csv')}</button>
        </>}
      />

      <div className="card card-pad mb-16" style={{padding:'12px 14px'}}>
        <div className="row" style={{gap:8, flexWrap:'wrap'}}>
          <input className="input search" placeholder={t('search_ph')} value={q} onChange={e=>setQ(e.target.value)} style={{width:260}} />
          <select className="select" value={status} onChange={e=>setStatus(e.target.value)}>
            <option value="all">{t('all_statuses')}</option>
            <option value="closed">{t('closed')}</option>
            <option value="open">{t('open')}</option>
          </select>
          <select className="select" value={dir} onChange={e=>setDir(e.target.value)}>
            <option value="all">{t('any_direction')}</option>
            <option value="long">{t('long')}</option>
            <option value="short">{t('short')}</option>
          </select>
          <select className="select" value={outcome} onChange={e=>setOutcome(e.target.value)}>
            <option value="all">{t('any_outcome')}</option>
            <option value="win">{t('wins_only')}</option>
            <option value="loss">{t('losses_only')}</option>
            <option value="be">{t('breakeven')}</option>
          </select>
          <div style={{flex:1}} />
          <span className="muted tiny">{t('sort_by')}</span>
          <select className="select" value={sort} onChange={e=>setSort(e.target.value)}>
            <option value="date_desc">{t('newest')}</option>
            <option value="date_asc">{t('oldest')}</option>
            <option value="pnl_desc">{t('highest_pnl')}</option>
            <option value="pnl_asc">{t('lowest_pnl')}</option>
            <option value="r_desc">{t('highest_r')}</option>
          </select>
        </div>
      </div>

      <div className="card">
        <table className="table">
          <thead>
            <tr>
              <th>{t('th_ticker')}</th><th>{t('th_dir')}</th><th>{t('th_size')}</th><th>{t('th_entry')}</th><th>{t('th_exit')}</th><th>{t('th_pnl')}</th><th>{t('th_r')}</th><th>{t('th_tags')}</th><th>{t('th_date')}</th><th></th>
            </tr>
          </thead>
          <tbody>
            {rows.length === 0 ? (
              <tr><td colSpan={10} style={{padding:40, textAlign:'center'}} className="muted">{t('no_match')}</td></tr>
            ) : rows.map(tr => (
              <tr key={tr.id} className="tr-clickable" onClick={()=>setDrawer(tr)}>
                <TradeRowCells t={tr}/>
                <td style={{textAlign:'right',position:'relative'}} onClick={e=>e.stopPropagation()}>
                  <button className="icon-btn" onClick={(e)=>{e.stopPropagation();setMenu(menu===tr.id?null:tr.id);}}><Icon name="more" size={14}/></button>
                  {menu===tr.id && (
                    <div className="row-menu" onClick={e=>e.stopPropagation()}>
                      <div className="row-menu-item" onClick={()=>{setMenu(null);setDrawer(tr);}}><Icon name="search" size={13}/> {t('td_view')}</div>
                      <div className="row-menu-item" onClick={()=>{setMenu(null);onEdit(tr);}}><Icon name="edit" size={13}/> {t('td_edit')}</div>
                      <div className="row-menu-item" onClick={()=>{setMenu(null);onDuplicate(tr);}}><Icon name="layers" size={13}/> {t('td_duplicate')}</div>
                      <div className="row-menu-item danger" onClick={()=>{setMenu(null);setToDelete(tr);}}><Icon name="trash" size={13}/> {t('td_delete')}</div>
                    </div>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {rows.length > 0 && <div>{rows.map(tr => <TradeCard key={tr.id} t={tr}/>)}</div>}
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'12px 16px',borderTop:'1px solid #1c1c1c',flexWrap:'wrap',gap:8}}>
          <div className="muted tiny">{t('showing')} <span className="mono">{(page-1)*per+1}–{Math.min(filtered.length, page*per)}</span> {t('of')} <span className="mono">{filtered.length}</span></div>
          <div className="row" style={{gap:4}}>
            <button className="btn btn-ghost" disabled={page===1} onClick={()=>setPage(p=>Math.max(1,p-1))} style={{opacity:page===1?0.4:1}}><Icon name="chevron-left" size={13}/> {t('prev')}</button>
            {Array.from({length: Math.min(5, pages)}).map((_,i)=>{
              const n = Math.max(1, Math.min(pages-4, page-2)) + i;
              if (n > pages) return null;
              return <button key={n} className={'btn ' + (n===page?'':'btn-ghost')} onClick={()=>setPage(n)} style={{minWidth:32, justifyContent:'center'}}>{n}</button>;
            })}
            <button className="btn btn-ghost" disabled={page===pages} onClick={()=>setPage(p=>Math.min(pages,p+1))} style={{opacity:page===pages?0.4:1}}>{t('next')} <Icon name="chevron-right" size={13}/></button>
          </div>
        </div>
      </div>

      {drawer && <TradeDrawer trade={drawer} onClose={()=>setDrawer(null)} onEdit={onEdit} onDuplicate={onDuplicate} onDelete={onDelete}/>}

      {toDelete && (
        <div className="modal-scrim" onClick={()=>setToDelete(null)}>
          <div className="modal" onClick={e=>e.stopPropagation()} style={{width:'min(420px,100%)'}}>
            <div className="modal-head">
              <div><div style={{fontWeight:600,fontSize:15}}>{t('td_delete_title')}</div></div>
              <button className="icon-btn" onClick={()=>setToDelete(null)}><Icon name="x" size={16}/></button>
            </div>
            <div className="modal-body">
              <div className="muted" style={{fontSize:13.5,textWrap:'pretty'}}>
                {t('td_delete_body', { ticker: toDelete.ticker, dir: toDelete.dir.toUpperCase(), date: fmtDate(toDelete.date) })}
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn" onClick={()=>setToDelete(null)}>{t('cancel')}</button>
              <button className="btn" style={{background:'#ef4444',color:'#fff',borderColor:'transparent'}} onClick={confirmDelete}><Icon name="trash" size={13}/> {t('td_delete')}</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

// Split TradeRow into cell-only version used inside tr with click handler
const TradeRowCells = ({ t: trade }) => {
  const { fmtCur } = useI18n();
  const fmtPx = (v) => '$' + v.toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2});
  return (
    <>
      <td><span className="ticker">{trade.ticker}</span></td>
      <td><DirBadge dir={trade.dir} /></td>
      <td className="mono muted">{trade.size}</td>
      <td className="mono">{fmtPx(trade.entry)}</td>
      <td className="mono">{trade.exit ? fmtPx(trade.exit) : <span className="muted">—</span>}</td>
      <td className={'mono ' + (trade.pnl>0?'up':trade.pnl<0?'dn':'neu')} style={{fontWeight:600}}>{trade.status==='open' ? <span className="muted">—</span> : fmtCur(trade.pnl)}</td>
      <td className={'mono ' + (trade.r>0?'up':trade.r<0?'dn':'neu')}>{trade.status==='open' ? <span className="muted">—</span> : (trade.r>=0?'+':'') + trade.r.toFixed(2) + 'R'}</td>
      <td>{trade.tags.map((tag,i)=><span key={i} className="tag">{tag}</span>)}</td>
      <td className="muted mono tiny">{fmtDate(trade.date)} · {fmtTime(trade.date)}</td>
    </>
  );
};

window.TradesPage = TradesPage;