// ============ Playbook page ============

const STRAT_COLORS = ['#10b981','#3b82f6','#8b5cf6','#f59e0b','#ef4444','#06b6d4','#ec4899','#a3a3a3'];
const STRAT_TAG_OPTIONS = ['trend','mean reversion','momentum','news','scalp','swing'];
const TOD_OPTIONS = ['pre-market','open','morning','midday','power hour','after-hours'];

const PlaybookPage = () => {
  const { t, fmtCur } = useI18n();
  const { filteredTrades } = useAccounts();

  const [query, setQuery] = useState('');
  const [filterPerf, setFilterPerf] = useState('all');
  const [sortBy, setSortBy] = useState('net');
  const [selectedStrat, setSelectedStrat] = useState(null);
  const [menuOpenId, setMenuOpenId] = useState(null);
  const [editingStrat, setEditingStrat] = useState(null); // strategy object for modal (null/new/existing)
  const [showNewStrat, setShowNewStrat] = useState(false);
  const [extraStrats, setExtraStrats] = useState(() => {
    try { return JSON.parse(localStorage.getItem('edgebook:playbook_extra') || '[]'); } catch { return []; }
  });
  const [archived, setArchived] = useState(() => {
    try { return JSON.parse(localStorage.getItem('edgebook:playbook_archived') || '[]'); } catch { return []; }
  });
  const [showArchived, setShowArchived] = useState(false);
  const [confirmDelete, setConfirmDelete] = useState(null);

  const saveExtras = (next) => { setExtraStrats(next); try { localStorage.setItem('edgebook:playbook_extra', JSON.stringify(next)); } catch {} };
  const saveArchived = (next) => { setArchived(next); try { localStorage.setItem('edgebook:playbook_archived', JSON.stringify(next)); } catch {} };

  // All active strategy names
  const allStrats = useMemo(() => {
    const arch = new Set(archived);
    return [...STRATS.filter(n=>!arch.has(n)), ...extraStrats.filter(e=>!arch.has(e.name)).map(e=>e.name)];
  }, [extraStrats, archived]);

  const getStratMeta = (name) => extraStrats.find(p=>p.name===name) || PLAYBOOK.find(p=>p.name===name) || {};

  const playbook = useMemo(() => allStrats.map(name => {
    const ts = filteredTrades.filter(t=>t.status==='closed' && t.strategy===name);
    const wins = ts.filter(t=>t.pnl>0).length;
    const losses = ts.filter(t=>t.pnl<0).length;
    const grossWin = ts.filter(t=>t.pnl>0).reduce((s,t)=>s+t.pnl,0);
    const grossLoss = Math.abs(ts.filter(t=>t.pnl<0).reduce((s,t)=>s+t.pnl,0));
    const profitFactor = grossLoss ? +(grossWin/grossLoss).toFixed(2) : (grossWin>0 ? 99 : 0);
    const avgWin = wins ? grossWin/wins : 0;
    const avgLoss = losses ? grossLoss/losses : 0;
    const winRate = ts.length ? wins/ts.length : 0;
    const expectancy = ts.length ? (winRate*avgWin) - ((1-winRate)*avgLoss) : 0;
    const avgR = ts.length ? +(ts.reduce((s,t)=>s+t.r,0)/ts.length).toFixed(2) : 0;
    const net = +ts.reduce((s,t)=>s+t.pnl,0).toFixed(2);
    const meta = getStratMeta(name);
    return {
      name, trades: ts.length, wins, winRate,
      avgR, net, profitFactor, expectancy,
      lastUsed: ts[0] ? ts[0].date : null,
      description: meta.description || '',
      meta,
      tradesList: ts,
    };
  }), [filteredTrades, allStrats, extraStrats]);

  const filtered = useMemo(() => {
    let r = playbook;
    if (query) {
      const q = query.toLowerCase();
      r = r.filter(p => p.name.toLowerCase().includes(q) || p.description.toLowerCase().includes(q));
    }
    if (filterPerf === 'profitable') r = r.filter(p => p.net > 0);
    else if (filterPerf === 'losing')  r = r.filter(p => p.net < 0);
    else if (filterPerf === 'unused')  r = r.filter(p => p.trades === 0);
    const cmp = {
      net: (a,b) => b.net - a.net,
      wr: (a,b) => b.winRate - a.winRate,
      r: (a,b) => b.avgR - a.avgR,
      trades: (a,b) => b.trades - a.trades,
    }[sortBy];
    return [...r].sort(cmp);
  }, [playbook, query, filterPerf, sortBy]);

  useEffect(() => {
    if (!menuOpenId) return;
    const on = () => setMenuOpenId(null);
    document.addEventListener('click', on);
    return () => document.removeEventListener('click', on);
  }, [menuOpenId]);

  // Save a strategy (create or update)
  const saveStrategy = (s, originalName) => {
    const isExisting = extraStrats.some(x=>x.name===(originalName||s.name));
    if (originalName && isExisting) {
      saveExtras(extraStrats.map(x=>x.name===originalName ? s : x));
    } else if (originalName) {
      // editing a built-in: store override as extra
      saveExtras([...extraStrats.filter(x=>x.name!==s.name), s]);
    } else {
      saveExtras([...extraStrats, s]);
    }
    setEditingStrat(null);
    setShowNewStrat(false);
  };

  const archiveOne = (name) => { saveArchived([...archived, name]); setMenuOpenId(null); setSelectedStrat(null); };
  const unarchive = (name) => saveArchived(archived.filter(n=>n!==name));
  const deleteOne = (name) => {
    saveExtras(extraStrats.filter(s=>s.name!==name));
    saveArchived(archived.filter(n=>n!==name));
    setConfirmDelete(null);
    setSelectedStrat(null);
  };

  const renderCard = (p, archivedCard=false) => {
    const isGood = p.net >= 0;
    const isUnused = p.trades === 0;
    const meta = p.meta;
    const color = meta.color || STRAT_COLORS[0];
    return (
      <div key={p.name} className="card" style={{padding:0, overflow:'hidden', cursor:'pointer', position:'relative', opacity: archivedCard?0.65:1}} onClick={()=>setSelectedStrat(p.name)}>
        <div style={{height:3, background: isUnused ? 'var(--border)' : isGood ? `linear-gradient(90deg,${color},${color}40)` : 'linear-gradient(90deg,#ef4444,rgba(239,68,68,.2))'}}/>
        <div style={{padding:'16px 18px 14px'}}>
          <div style={{display:'flex',alignItems:'flex-start',justifyContent:'space-between',gap:8}}>
            <div style={{flex:1, minWidth:0}}>
              <div style={{display:'flex',alignItems:'center',gap:8}}>
                <span style={{width:8,height:8,borderRadius:999,background:color,flexShrink:0}}/>
                <div style={{fontSize:15,fontWeight:600,letterSpacing:'-0.01em'}}>{p.name}</div>
              </div>
              <div className="tiny muted" style={{marginTop:4, lineHeight:1.5}}>{p.description || <span style={{fontStyle:'italic'}}>{t('no_description')||'No description yet.'}</span>}</div>
            </div>
            <div style={{position:'relative'}} onClick={e=>e.stopPropagation()}>
              <button className="icon-btn" onClick={(e)=>{e.stopPropagation();setMenuOpenId(menuOpenId===p.name?null:p.name);}}><Icon name="more" size={16}/></button>
              {menuOpenId === p.name && (
                <div className="row-menu" style={{top:'calc(100% + 4px)',right:0}}>
                  {archivedCard ? (
                    <>
                      <div className="row-menu-item" onClick={()=>{unarchive(p.name);setMenuOpenId(null);}}><Icon name="check" size={13}/> {t('unarchive')||'Unarchive'}</div>
                      <div className="pf-sep"/>
                      <div className="row-menu-item danger" onClick={()=>{setConfirmDelete(p.name);setMenuOpenId(null);}}><Icon name="trash" size={13}/> {t('delete')||'Delete'}</div>
                    </>
                  ) : (
                    <>
                      <div className="row-menu-item" onClick={()=>{setSelectedStrat(p.name);setMenuOpenId(null);}}><Icon name="eye" size={13}/> {t('view_details')||'View details'}</div>
                      <div className="row-menu-item" onClick={()=>{setEditingStrat({...meta, name:p.name});setMenuOpenId(null);}}><Icon name="edit" size={13}/> {t('edit')||'Edit'}</div>
                      <div className="row-menu-item" onClick={()=>{setEditingStrat({...meta, name:p.name+' (copy)', _originalName:null});setMenuOpenId(null);}}><Icon name="copy" size={13}/> {t('duplicate')||'Duplicate'}</div>
                      <div className="pf-sep"/>
                      <div className="row-menu-item" onClick={()=>archiveOne(p.name)}><Icon name="archive" size={13}/> {t('archive')||'Archive'}</div>
                      <div className="row-menu-item danger" onClick={()=>{setConfirmDelete(p.name);setMenuOpenId(null);}}><Icon name="trash" size={13}/> {t('delete')||'Delete'}</div>
                    </>
                  )}
                </div>
              )}
            </div>
          </div>

          <div className="hsep" />

          {isUnused ? (
            <div style={{padding:'8px 0',color:'var(--text-3)'}} className="tiny">
              {t('no_trades_yet')||'No trades logged for this strategy yet.'}
            </div>
          ) : (
            <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)', gap:12}}>
              <div>
                <div className="tiny muted">{t('winrate')}</div>
                <div className="mono" style={{fontSize:16,fontWeight:600, marginTop:2}}>{fmtPct(p.winRate)}</div>
                <div className="bar" style={{marginTop:6}}><span style={{width:(p.winRate*100)+'%', background: p.winRate>=0.5?'#10b981':'#f59e0b'}}/></div>
              </div>
              <div>
                <div className="tiny muted">{t('kpi_avg_r')}</div>
                <div className={'mono ' + (p.avgR>=0?'up':'dn')} style={{fontSize:16,fontWeight:600, marginTop:2}}>{(p.avgR>=0?'+':'')+p.avgR.toFixed(2)}R</div>
                <div className="tiny muted" style={{marginTop:6}}>{t('over_n_trades', { n: p.trades })}</div>
              </div>
              <div>
                <div className="tiny muted">{t('net_pnl_label')}</div>
                <div className={'mono ' + (p.net>=0?'up':'dn')} style={{fontSize:16,fontWeight:600, marginTop:2}}>{fmtCur(p.net)}</div>
                <div className="tiny muted" style={{marginTop:6}}>{t('last_used')} {p.lastUsed ? fmtDate(p.lastUsed) : '—'}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  };

  const archivedData = archived.map(name => {
    const ts = filteredTrades.filter(t=>t.status==='closed' && t.strategy===name);
    const wins = ts.filter(t=>t.pnl>0).length;
    return { name, trades: ts.length, wins, winRate: ts.length?wins/ts.length:0, avgR: ts.length?+(ts.reduce((s,t)=>s+t.r,0)/ts.length).toFixed(2):0, net: +ts.reduce((s,t)=>s+t.pnl,0).toFixed(2), lastUsed: ts[0]?.date||null, description: getStratMeta(name).description||'', meta: getStratMeta(name), tradesList: ts };
  });

  return (
    <div className="page">
      <PageHead
        title={t('nav_playbook')}
        sub={t('playbook_sub')}
        actions={<>
          <button className="btn btn-primary" onClick={()=>setShowNewStrat(true)}><Icon name="plus" size={13}/> {t('new_strategy')}</button>
        </>}
      />

      <div className="card card-pad mb-16" style={{padding:'12px 16px',display:'flex',alignItems:'center',gap:10,flexWrap:'wrap'}}>
        <div style={{display:'flex',alignItems:'center',gap:8,flex:1,minWidth:220}}>
          <Icon name="search" size={14} style={{color:'var(--text-3)'}}/>
          <input className="input" placeholder={t('search_strategies')||'Search strategies...'} value={query} onChange={e=>setQuery(e.target.value)} style={{flex:1,background:'transparent',border:'none',padding:'4px 0'}}/>
        </div>
        <div style={{display:'flex',alignItems:'center',gap:6}}>
          <span className="tiny muted">{t('filter_by')||'Filter'}:</span>
          <div className="seg">
            {[['all',t('all')||'All'],['profitable',t('profitable')||'Profitable'],['losing',t('losing')||'Losing'],['unused',t('unused')||'Unused']].map(([id,label])=>(
              <button key={id} className={filterPerf===id?'on':''} onClick={()=>setFilterPerf(id)}>{label}</button>
            ))}
          </div>
        </div>
        <div style={{display:'flex',alignItems:'center',gap:6}}>
          <span className="tiny muted">{t('sort_by')||'Sort'}:</span>
          <select className="select" value={sortBy} onChange={e=>setSortBy(e.target.value)}>
            <option value="net">{t('sort_net')||'Net P&L'}</option>
            <option value="wr">{t('sort_wr')||'Win rate'}</option>
            <option value="r">{t('sort_r')||'Avg R'}</option>
            <option value="trades">{t('sort_trades')||'Trade count'}</option>
          </select>
        </div>
      </div>

      <div className="g-3">
        {filtered.map(p => renderCard(p))}
        <div className="card" style={{padding:0,border:'1px dashed var(--border)',background:'transparent',display:'grid',placeItems:'center',minHeight:200,cursor:'pointer'}} onClick={()=>setShowNewStrat(true)}>
          <div style={{textAlign:'center',color:'var(--text-3)'}}>
            <div style={{width:40,height:40,borderRadius:10,border:'1px dashed var(--border-strong)',display:'grid',placeItems:'center',margin:'0 auto 10px'}}><Icon name="plus" size={18}/></div>
            <div style={{fontWeight:500,color:'var(--text-2)'}}>{t('new_strategy')}</div>
            <div className="tiny" style={{marginTop:4}}>{t('new_strategy_sub')}</div>
          </div>
        </div>
      </div>

      {filtered.length === 0 && query && (
        <div className="card card-pad" style={{padding:'40px',textAlign:'center'}}>
          <div className="muted">{t('no_strategies_match')||'No strategies match'} "<span style={{color:'var(--text)'}}>{query}</span>"</div>
        </div>
      )}

      {archived.length > 0 && (
        <div style={{marginTop:24}}>
          <div style={{display:'flex',alignItems:'center',gap:8,cursor:'pointer',padding:'8px 0',userSelect:'none'}} onClick={()=>setShowArchived(!showArchived)}>
            <Icon name={showArchived?'chevron-down':'chevron-right'} size={14}/>
            <div style={{fontWeight:500,fontSize:13}}>{(t('archived_n')||'Archived ({n})').replace('{n}',archived.length)}</div>
          </div>
          {showArchived && <div className="g-3" style={{marginTop:8}}>{archivedData.map(p=>renderCard(p,true))}</div>}
        </div>
      )}

      {selectedStrat && <StrategyDrawer
        name={selectedStrat}
        data={[...playbook, ...archivedData].find(p=>p.name===selectedStrat)}
        onClose={()=>setSelectedStrat(null)}
        onEdit={(s)=>{setEditingStrat({...s.meta,name:s.name});setSelectedStrat(null);}}
        onDuplicate={(s)=>{setEditingStrat({...s.meta,name:s.name+' (copy)',_originalName:null});setSelectedStrat(null);}}
        onArchive={(s)=>archiveOne(s.name)}
        onDelete={(s)=>{setConfirmDelete(s.name);}}
        onSaveNotes={(s,notes)=>{
          const existing = extraStrats.find(x=>x.name===s.name);
          const updated = { ...(existing||s.meta), name: s.name, notes };
          if (existing) saveExtras(extraStrats.map(x=>x.name===s.name?updated:x));
          else saveExtras([...extraStrats, updated]);
        }}
      />}

      {(showNewStrat || editingStrat) && <StrategyModal
        initial={editingStrat}
        onClose={()=>{setShowNewStrat(false);setEditingStrat(null);}}
        onSave={(s)=>saveStrategy(s, editingStrat?.name && !editingStrat._originalName && editingStrat._originalName!==null ? editingStrat.name : (editingStrat?._originalName===null?null:editingStrat?.name))}
      />}

      {confirmDelete && (() => {
        const tc = filteredTrades.filter(t=>t.strategy===confirmDelete).length;
        return (
          <div className="modal-scrim" onClick={()=>setConfirmDelete(null)}>
            <div className="modal" onClick={e=>e.stopPropagation()} style={{width:'min(440px,100%)'}}>
              <div className="modal-head">
                <div style={{fontWeight:600,fontSize:15}}>{t('delete_strategy_q')||'Delete this strategy?'}</div>
                <button className="icon-btn" onClick={()=>setConfirmDelete(null)}><Icon name="x" size={16}/></button>
              </div>
              <div className="modal-body">
                <div style={{fontSize:14,marginBottom:6}}><strong>{confirmDelete}</strong></div>
                <div className="muted tiny">{tc} {t('th_trades').toLowerCase()} {t('will_remain')||'will remain in your log but no longer reference this strategy.'}</div>
              </div>
              <div className="modal-foot">
                <button className="btn" onClick={()=>setConfirmDelete(null)}>{t('cancel')}</button>
                <button className="btn" style={{background:'var(--red)',color:'#fff',borderColor:'transparent'}} onClick={()=>deleteOne(confirmDelete)}><Icon name="trash" size={13}/> {t('delete')||'Delete'}</button>
              </div>
            </div>
          </div>
        );
      })()}
    </div>
  );
};

// ---- Strategy drawer (full) ----
const StrategyDrawer = ({ name, data, onClose, onEdit, onDuplicate, onArchive, onDelete, onSaveNotes }) => {
  const { t, fmtCur, lang } = useI18n();
  const [notesDraft, setNotesDraft] = useState(data?.meta?.notes || '');
  const [notesDirty, setNotesDirty] = useState(false);
  if (!data) return null;
  const { tradesList = [], winRate, avgR, net, trades, profitFactor, expectancy, meta = {} } = data;
  const color = meta.color || STRAT_COLORS[0];

  // mini equity curve
  const sorted = tradesList.slice().sort((a,b)=>a.date-b.date);
  let cum = 0;
  const pts = sorted.map(tr => { cum += tr.pnl; return { date: tr.date, cum }; });
  const maxAbs = Math.max(1, ...pts.map(p=>Math.abs(p.cum)));

  return (
    <div className="td-scrim" onClick={onClose}>
      <div className="td-drawer" onClick={e=>e.stopPropagation()} style={{width:520}}>
        <div className="td-head">
          <div style={{display:'flex',alignItems:'center',gap:10,flex:1}}>
            <span style={{width:10,height:10,borderRadius:999,background:color,flexShrink:0}}/>
            <div style={{flex:1,minWidth:0}}>
              <div style={{fontSize:20,fontWeight:600,letterSpacing:'-0.015em'}}>{name}</div>
              {data.description && <div className="muted tiny" style={{marginTop:4,textWrap:'pretty',maxWidth:440}}>{data.description}</div>}
            </div>
          </div>
          <button className="icon-btn" onClick={()=>onEdit({name,meta})} title={t('edit')}><Icon name="edit" size={15}/></button>
          <button className="icon-btn" onClick={onClose}><Icon name="x" size={16}/></button>
        </div>
        <div className="td-body">
          <div className="td-sec-title">{t('performance')||'Performance'}</div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:8,marginBottom:18}}>
            <div className="kpi" style={{padding:'12px 10px'}}><div className="kpi-label" style={{fontSize:10}}>{t('net_pnl_label')}</div><div className={'kpi-value '+(net>=0?'up':'dn')} style={{fontSize:16}}>{fmtCur(net)}</div></div>
            <div className="kpi" style={{padding:'12px 10px'}}><div className="kpi-label" style={{fontSize:10}}>{t('winrate')}</div><div className="kpi-value" style={{fontSize:16}}>{fmtPct(winRate)}</div></div>
            <div className="kpi" style={{padding:'12px 10px'}}><div className="kpi-label" style={{fontSize:10}}>{t('kpi_avg_r')}</div><div className={'kpi-value '+(avgR>=0?'up':'dn')} style={{fontSize:16}}>{(avgR>=0?'+':'')+avgR.toFixed(2)}R</div></div>
            <div className="kpi" style={{padding:'12px 10px'}}><div className="kpi-label" style={{fontSize:10}}>{t('profit_factor')||'Profit factor'}</div><div className="kpi-value" style={{fontSize:16}}>{profitFactor===99?'∞':profitFactor.toFixed(2)}</div></div>
            <div className="kpi" style={{padding:'12px 10px'}}><div className="kpi-label" style={{fontSize:10}}>{t('kpi_expectancy')||'Expectancy'}</div><div className={'kpi-value '+(expectancy>=0?'up':'dn')} style={{fontSize:16}}>{fmtCur(expectancy)}</div></div>
          </div>

          <div className="td-sec-title">{t('equity_curve')||'Equity curve'}</div>
          <div className="card" style={{padding:12,marginBottom:18,height:200}}>
            {pts.length < 2 ? (
              <div className="muted tiny" style={{height:'100%',display:'grid',placeItems:'center'}}>{t('not_enough_data')||'Not enough data yet'}</div>
            ) : (
              <svg viewBox="0 0 400 170" preserveAspectRatio="none" style={{width:'100%',height:'100%'}}>
                <line x1="0" y1="85" x2="400" y2="85" stroke="var(--border)" strokeDasharray="3,4"/>
                <polyline fill="none" stroke={color} strokeWidth="2" points={pts.map((p,i)=>{const x=(i/(pts.length-1))*400;const y=85-(p.cum/maxAbs)*75;return `${x},${y}`;}).join(' ')}/>
              </svg>
            )}
          </div>

          {(meta.tags?.length || meta.tod?.length || meta.trendBias || meta.minRelVol!=null || meta.entryRules || meta.exitRules || meta.defaultStop || meta.defaultRR != null) && (
            <>
              <div className="td-sec-title">{t('setup_criteria')||'Setup criteria'} & {t('rules')||'rules'}</div>
              <div className="card" style={{padding:14,marginBottom:18,display:'flex',flexDirection:'column',gap:12}}>
                {meta.tags?.length > 0 && <div><div className="tiny muted" style={{textTransform:'uppercase',letterSpacing:'0.08em',marginBottom:6}}>{t('tags')||'Tags'}</div><div className="chips">{meta.tags.map(tag=><span key={tag} className="chip on">{tag}</span>)}</div></div>}
                {meta.tod?.length > 0 && <div><div className="tiny muted" style={{textTransform:'uppercase',letterSpacing:'0.08em',marginBottom:6}}>{t('time_of_day')||'Time of day'}</div><div className="chips">{meta.tod.map(x=><span key={x} className="chip on">{x}</span>)}</div></div>}
                {meta.trendBias && <div><div className="tiny muted" style={{textTransform:'uppercase',letterSpacing:'0.08em',marginBottom:4}}>{t('trend_bias')||'Trend bias'}</div><div style={{fontSize:13,fontWeight:500}}>{meta.trendBias}</div></div>}
                {meta.minRelVol != null && <div><div className="tiny muted" style={{textTransform:'uppercase',letterSpacing:'0.08em',marginBottom:4}}>{t('min_rel_vol')||'Min relative volume'}</div><div className="mono" style={{fontSize:13}}>{meta.minRelVol}×</div></div>}
                {meta.catalystRequired && <div className="tiny" style={{color:'var(--accent)'}}>✓ {t('catalyst_required')||'Catalyst required'}</div>}
                {meta.entryRules && <div><div className="tiny muted" style={{textTransform:'uppercase',letterSpacing:'0.08em',marginBottom:4}}>{t('entry_rules')||'Entry rules'}</div><div className="tiny" style={{lineHeight:1.55,whiteSpace:'pre-wrap'}}>{meta.entryRules}</div></div>}
                {meta.exitRules && <div><div className="tiny muted" style={{textTransform:'uppercase',letterSpacing:'0.08em',marginBottom:4}}>{t('exit_rules')||'Exit rules'}</div><div className="tiny" style={{lineHeight:1.55,whiteSpace:'pre-wrap'}}>{meta.exitRules}</div></div>}
                <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10,paddingTop:8,borderTop:'1px solid var(--border)'}}>
                  {meta.defaultStop && <div><div className="tiny muted">{t('default_stop_type')||'Stop'}</div><div className="mono tiny" style={{fontWeight:500}}>{meta.defaultStop}</div></div>}
                  {meta.defaultRR != null && <div><div className="tiny muted">{t('default_rr')||'R:R'}</div><div className="mono tiny" style={{fontWeight:500}}>{meta.defaultRR}</div></div>}
                  {meta.maxPosSize != null && <div><div className="tiny muted">{t('max_pos_size')||'Max size'}</div><div className="mono tiny" style={{fontWeight:500}}>{meta.maxPosSize}%</div></div>}
                </div>
              </div>
            </>
          )}

          <div className="td-sec-title">{t('recent_trades')||'Recent trades'}</div>
          {tradesList.length === 0 ? (
            <div style={{padding:30,textAlign:'center'}} className="muted tiny">{t('no_trades_yet')||'No trades logged for this strategy yet.'}</div>
          ) : (
            <div style={{display:'flex',flexDirection:'column',gap:6,marginBottom:18}}>
              {tradesList.slice(0,10).map(tr=>(
                <div key={tr.id} className="card" style={{padding:'8px 12px',display:'flex',alignItems:'center',justifyContent:'space-between',gap:8}}>
                  <div style={{display:'flex',alignItems:'center',gap:8,flex:1,minWidth:0}}>
                    <span className="ticker" style={{fontSize:12.5}}>{tr.ticker}</span>
                    <DirBadge dir={tr.dir}/>
                    <span className="muted tiny mono">{fmtDate(tr.date)}</span>
                  </div>
                  <div className={'mono tiny '+(tr.pnl>0?'up':tr.pnl<0?'dn':'neu')} style={{fontWeight:600}}>{fmtCur(tr.pnl)}</div>
                  <div className={'mono tiny '+(tr.r>=0?'up':'dn')} style={{fontWeight:500,width:60,textAlign:'right'}}>{(tr.r>=0?'+':'')+tr.r.toFixed(2)}R</div>
                </div>
              ))}
            </div>
          )}

          <div className="td-sec-title">{t('notes')||'Notes'}</div>
          <textarea className="input textarea" style={{width:'100%',minHeight:100,marginBottom:8}} placeholder={t('strat_notes_ph')||"What's working? What's broken? Lessons learned..."}
            value={notesDraft} onChange={e=>{setNotesDraft(e.target.value);setNotesDirty(true);}}/>
          {notesDirty && <button className="btn btn-primary" style={{marginBottom:8}} onClick={()=>{onSaveNotes({name,meta},notesDraft);setNotesDirty(false);}}><Icon name="check" size={13}/> {t('save_notes')||'Save notes'}</button>}
        </div>
        <div className="td-foot" style={{display:'flex',gap:6}}>
          <button className="btn btn-ghost" style={{flex:1}} onClick={()=>onEdit({name,meta})}><Icon name="edit" size={13}/> {t('edit')}</button>
          <button className="btn btn-ghost" style={{flex:1}} onClick={()=>onDuplicate({name,meta})}><Icon name="copy" size={13}/> {t('duplicate')}</button>
          <button className="btn btn-ghost" style={{flex:1}} onClick={()=>onArchive({name,meta})}><Icon name="archive" size={13}/> {t('archive')}</button>
          <button className="btn btn-ghost" style={{color:'var(--red)'}} onClick={()=>onDelete({name,meta})}><Icon name="trash" size={13}/> {t('delete')}</button>
        </div>
      </div>
    </div>
  );
};

// ---- Full strategy modal (5 sections) ----
const StrategyModal = ({ initial, onClose, onSave }) => {
  const { t } = useI18n();
  const [s, setS] = useState(() => ({
    name: initial?.name || '',
    description: initial?.description || '',
    color: initial?.color || STRAT_COLORS[0],
    tags: initial?.tags || [],
    tod: initial?.tod || [],
    trendBias: initial?.trendBias || 'Either',
    minRelVol: initial?.minRelVol ?? 1.0,
    catalystRequired: !!initial?.catalystRequired,
    entryRules: initial?.entryRules || '',
    exitRules: initial?.exitRules || '',
    defaultStop: initial?.defaultStop || 'Structure',
    defaultRR: initial?.defaultRR ?? 2.0,
    maxPosSize: initial?.maxPosSize ?? 1.0,
    notes: initial?.notes || '',
  }));
  const toggleArr = (k, v) => setS(p => ({ ...p, [k]: p[k].includes(v) ? p[k].filter(x=>x!==v) : [...p[k], v] }));
  const canSave = s.name.trim().length > 0;

  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()} style={{width:'min(620px,100%)'}}>
        <div className="modal-head">
          <div>
            <div style={{fontWeight:600,fontSize:15}}>{initial ? (t('edit_strategy')||'Edit strategy') : t('new_strategy')}</div>
            <div className="muted tiny">{t('strategy_modal_sub')||'Define a setup to track its edge separately.'}</div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x" size={16}/></button>
        </div>
        <div className="modal-body" style={{display:'flex',flexDirection:'column',gap:20}}>

          {/* Basic */}
          <div>
            <div className="td-sec-title" style={{marginBottom:10}}>{t('basic')||'Basic'}</div>
            <div style={{display:'flex',flexDirection:'column',gap:10}}>
              <div>
                <label className="label">{t('strategy_name')||'Strategy name'}</label>
                <input className="input" autoFocus placeholder="ORB Breakout" value={s.name} onChange={e=>setS({...s,name:e.target.value})} style={{width:'100%'}}/>
              </div>
              <div>
                <label className="label">{t('description')||'Description'}</label>
                <textarea className="input textarea" maxLength={200} placeholder={t('strategy_desc_ph')||'What defines this setup?'} value={s.description} onChange={e=>setS({...s,description:e.target.value})} style={{width:'100%',minHeight:60}}/>
              </div>
              <div>
                <label className="label">{t('color')||'Color'}</label>
                <div style={{display:'flex',gap:6}}>
                  {STRAT_COLORS.map(c => (
                    <div key={c} onClick={()=>setS({...s,color:c})} style={{width:26,height:26,borderRadius:8,background:c,cursor:'pointer',border: s.color===c?'2px solid var(--text)':'2px solid transparent'}}/>
                  ))}
                </div>
              </div>
              <div>
                <label className="label">{t('tags')||'Tags'}</label>
                <div className="chips">{STRAT_TAG_OPTIONS.map(x=><span key={x} className={'chip '+(s.tags.includes(x)?'on':'')} onClick={()=>toggleArr('tags',x)}>{x}</span>)}</div>
              </div>
            </div>
          </div>

          {/* Setup criteria */}
          <div>
            <div className="td-sec-title" style={{marginBottom:10}}>{t('setup_criteria')||'Setup criteria'}</div>
            <div style={{display:'flex',flexDirection:'column',gap:10}}>
              <div>
                <label className="label">{t('time_of_day')||'Time of day'}</label>
                <div className="chips">{TOD_OPTIONS.map(x=><span key={x} className={'chip '+(s.tod.includes(x)?'on':'')} onClick={()=>toggleArr('tod',x)}>{x}</span>)}</div>
              </div>
              <div>
                <label className="label">{t('trend_bias')||'Trend bias'}</label>
                <div className="seg">
                  {['Up','Down','Neutral','Either'].map(x=>(<button key={x} className={s.trendBias===x?'on':''} onClick={()=>setS({...s,trendBias:x})}>{x}</button>))}
                </div>
              </div>
              <div>
                <label className="label">{t('min_rel_vol')||'Min relative volume'} — <span className="mono">{s.minRelVol.toFixed(1)}×</span></label>
                <input className="slider" type="range" min="0" max="3" step="0.1" value={s.minRelVol} onChange={e=>setS({...s,minRelVol:+e.target.value})}/>
              </div>
              <div style={{display:'flex',alignItems:'center',gap:10}}>
                <div className={'disc-sw '+(s.catalystRequired?'on':'')} onClick={()=>setS({...s,catalystRequired:!s.catalystRequired})}/>
                <div style={{fontWeight:500,fontSize:13}}>{t('catalyst_required')||'Catalyst required'}</div>
              </div>
            </div>
          </div>

          {/* Entry rules */}
          <div>
            <div className="td-sec-title" style={{marginBottom:10}}>{t('entry_rules')||'Entry rules'}</div>
            <textarea className="input textarea" placeholder="Break of 15m ORB high with vol > 1.5× avg, trend aligned" value={s.entryRules} onChange={e=>setS({...s,entryRules:e.target.value})} style={{width:'100%',minHeight:80}}/>
          </div>

          {/* Exit rules */}
          <div>
            <div className="td-sec-title" style={{marginBottom:10}}>{t('exit_rules')||'Exit rules'}</div>
            <textarea className="input textarea" placeholder="Trail to VWAP, exit on close below 9EMA" value={s.exitRules} onChange={e=>setS({...s,exitRules:e.target.value})} style={{width:'100%',minHeight:80}}/>
          </div>

          {/* Risk parameters */}
          <div>
            <div className="td-sec-title" style={{marginBottom:10}}>{t('risk_parameters')||'Risk parameters'}</div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:10}}>
              <div>
                <label className="label">{t('default_stop_type')||'Stop type'}</label>
                <div className="seg" style={{display:'flex'}}>
                  {['ATR','Structure','Fixed %'].map(x=>(<button key={x} className={s.defaultStop===x?'on':''} onClick={()=>setS({...s,defaultStop:x})}>{x}</button>))}
                </div>
              </div>
              <div>
                <label className="label">{t('default_rr')||'R:R target'}</label>
                <input className="input mono" type="number" step="0.1" value={s.defaultRR} onChange={e=>setS({...s,defaultRR:+e.target.value})} style={{width:'100%'}}/>
              </div>
              <div>
                <label className="label">{t('max_pos_size')||'Max size (%)'}</label>
                <input className="input mono" type="number" step="0.1" value={s.maxPosSize} onChange={e=>setS({...s,maxPosSize:+e.target.value})} style={{width:'100%'}}/>
              </div>
            </div>
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn" onClick={onClose}>{t('cancel')}</button>
          <button className="btn btn-primary" disabled={!canSave} style={!canSave?{opacity:0.5,cursor:'not-allowed'}:{}} onClick={()=>canSave && onSave({...s,name:s.name.trim()})}>
            <Icon name="check" size={13}/> {t('save_strategy')||'Save strategy'}
          </button>
        </div>
      </div>
    </div>
  );
};

window.PlaybookPage = PlaybookPage;