// ============ Account switcher (top-nav pill + dropdown) ============
const MiniSpark = ({ data, color='#10b981', w=56, h=18 }) => {
  if (!data || data.length<2) return <div style={{width:w,height:h}}/>;
  const vals = data.map(d=>d.equity);
  const min = Math.min(...vals), max = Math.max(...vals);
  const span = max-min || 1;
  const pts = data.map((d,i)=>`${(i/(data.length-1))*w},${h-((d.equity-min)/span)*h}`).join(' ');
  return (
    <svg width={w} height={h} style={{display:'block'}}>
      <polyline points={pts} fill="none" stroke={color} strokeWidth="1.25" />
    </svg>
  );
};

const AccountSwitcher = () => {
  const { t, fmtCurShort, fmtCur } = useI18n();
  const { accounts, active, setActive, statsFor, todayPnlFor } = useAccounts();
  const [open, setOpen] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);
  const ref = useRef(null);
  useEffect(()=>{
    const onDoc = (e)=>{ if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc); return ()=>document.removeEventListener('mousedown', onDoc);
  },[]);

  const activeAcc = active==='all' ? null : accounts.find(a=>a.id===active);
  const allStats = statsFor('all');

  return (
    <div style={{position:'relative'}} ref={ref}>
      <div className="acct-pill" onClick={()=>setOpen(v=>!v)}>
        {activeAcc ? (
          <>
            <div className="acct-avatar" style={{background:activeAcc.color}}>{activeAcc.name.slice(0,1).toUpperCase()}</div>
            <span className="acct-pill-name">{activeAcc.name}</span>
          </>
        ) : (
          <>
            <div style={{width:22,height:22,borderRadius:999,background:'linear-gradient(135deg,#10b981,#3b82f6,#f59e0b)',flexShrink:0}}/>
            <span className="acct-pill-name">{t('all_accounts')}</span>
          </>
        )}
        <Icon name="chevron-down" size={12} style={{color:'#6b6b6b'}}/>
      </div>

      {open && (
        <div className="acct-menu">
          <div className={'acct-menu-item ' + (active==='all'?'active':'')} onClick={()=>{ setActive('all'); setOpen(false); }}>
            <div style={{width:28,height:28,borderRadius:999,background:'linear-gradient(135deg,#10b981,#3b82f6,#f59e0b)',flexShrink:0}}/>
            <div style={{flex:1,minWidth:0}}>
              <div style={{fontWeight:500,fontSize:13}}>{t('all_accounts')}</div>
              <div className="tiny muted">{accounts.length} {t('accounts_lower')} · {allStats.trades} {t('trades_lower')}</div>
            </div>
            <div style={{textAlign:'right'}}>
              <div className={'mono tiny ' + (allStats.netPnl>=0?'up':'dn')} style={{fontWeight:600}}>{fmtCurShort(allStats.netPnl)}</div>
              <div className="tiny muted">{t('net')}</div>
            </div>
          </div>

          <div className="acct-menu-divider"/>

          {accounts.map(a=>{
            const s = statsFor(a.id);
            const curve = equityCurveFor(a.id);
            const color = s.netPnl>=0 ? '#10b981' : '#ef4444';
            return (
              <div key={a.id} className={'acct-menu-item ' + (active===a.id?'active':'')} onClick={()=>{ setActive(a.id); setOpen(false); }}>
                <div className="acct-avatar" style={{width:28,height:28,fontSize:12,background:a.color}}>{a.name.slice(0,1).toUpperCase()}</div>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{display:'flex',alignItems:'center',gap:6}}>
                    <div style={{fontWeight:500,fontSize:13,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{a.name}</div>
                    {a.type==='prop_challenge' && <span className="acct-type-badge" style={{background:'rgba(245,158,11,.15)',color:'#f59e0b'}}>Challenge</span>}
                    {a.type==='prop_funded' && <span className="acct-type-badge" style={{background:'rgba(59,130,246,.15)',color:'#3b82f6'}}>Funded</span>}
                    {a.type==='paper' && <span className="acct-type-badge" style={{background:'#1f1f1f',color:'#a3a3a3'}}>Paper</span>}
                  </div>
                  <div className="tiny muted">{a.broker} · {fmtCurShort(a.startingCapital + s.netPnl)}</div>
                </div>
                <MiniSpark data={curve} color={color}/>
              </div>
            );
          })}

          <div className="acct-menu-divider"/>
          <div className="acct-menu-item" onClick={()=>{ setModalOpen(true); setOpen(false); }}>
            <div style={{width:28,height:28,borderRadius:999,border:'1px dashed #3a3a3a',display:'grid',placeItems:'center',color:'#6b6b6b'}}><Icon name="plus" size={14}/></div>
            <div style={{flex:1}}>
              <div style={{fontWeight:500,fontSize:13}}>{t('new_account')}</div>
              <div className="tiny muted">{t('new_account_sub')}</div>
            </div>
          </div>
        </div>
      )}

      {modalOpen && <AccountModal onClose={()=>setModalOpen(false)}/>}
    </div>
  );
};

window.AccountSwitcher = AccountSwitcher;
window.MiniSpark = MiniSpark;