// ============ Account create/edit modal ============
const BROKERS = ['IBKR','Binance','Bybit','MT4','MT5','BDSec','Golomt','Ard','TDBM','Capitron','Tradovate','Schwab','Other'];
const ACCT_TYPES = [
  {id:'personal', label:'Personal'},
  {id:'prop_challenge', label:'Prop challenge'},
  {id:'prop_funded', label:'Prop funded'},
  {id:'demo', label:'Demo'},
  {id:'paper', label:'Paper'},
];
const ASSET_CLASSES = ['Equities','Crypto','Forex','Futures','Options','Mixed'];
const COLORS = ['#10b981','#3b82f6','#f59e0b','#8b5cf6','#ef4444','#ec4899','#06b6d4','#a3a3a3'];

const defaultRisk = () => ({
  maxRiskTrade: 1.0, maxDailyLoss: 3.0, maxWeeklyLoss: 6.0, maxConcurrent: 3,
  defaultStop: 'hard', minRR: 1.5, blockAfterLoss: true,
});
const defaultGoals = () => ({
  monthlyTarget: 4000, annualTargetPct: 40, targetWinRate: 55, targetAvgR: 0.45,
  habits: ['Pre-market plan','Post-session review','Screenshot every trade'],
});

const AccountModal = ({ onClose, initial, onDelete }) => {
  const { t } = useI18n();
  const { addAccount, updateAccount } = useAccounts();
  const [tab, setTab] = useState('general');
  const [f, setF] = useState(() => ({
    name:'', broker:'IBKR', type:'personal', assetClass:'Equities',
    startingCapital:10000, color:COLORS[0], notes:'', rules:null,
    risk: defaultRisk(), goals: defaultGoals(),
    ...(initial || {}),
  }));
  const set = (k,v) => setF(prev => ({ ...prev, [k]:v }));
  const setRule = (k,v) => setF(prev => ({ ...prev, rules: { ...(prev.rules||{}), [k]:v } }));
  const setRisk = (k,v) => setF(prev => ({ ...prev, risk: { ...(prev.risk||defaultRisk()), [k]:v } }));
  const setGoal = (k,v) => setF(prev => ({ ...prev, goals: { ...(prev.goals||defaultGoals()), [k]:v } }));

  // auto-init rules when prop_challenge
  useEffect(()=>{
    if (f.type==='prop_challenge' && !f.rules) {
      setF(prev => ({ ...prev, rules:{ maxDailyLoss:5, maxTotalLoss:10, profitTarget:10, deadline:'' } }));
    }
    if (f.type!=='prop_challenge' && f.type!=='prop_funded' && f.rules) {
      setF(prev => ({ ...prev, rules: null }));
    }
  }, [f.type]);

  const save = () => {
    if (!f.name.trim()) return;
    const data = { ...f, startingCapital: +f.startingCapital || 0 };
    if (initial) updateAccount(initial.id, data); else addAccount(data);
    onClose();
  };

  const habitList = ['Pre-market plan','Post-session review','Screenshot every trade','Journal emotion','Read playbook','Max 5 trades/day'];
  const toggleHabit = (h) => {
    const cur = f.goals?.habits || [];
    setGoal('habits', cur.includes(h) ? cur.filter(x=>x!==h) : [...cur, h]);
  };

  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()} style={{width:'min(640px,100%)'}}>
        <div className="modal-head">
          <div>
            <div style={{fontWeight:600,fontSize:15}}>{initial ? t('edit_account') : t('new_account')}</div>
            <div className="muted tiny">{initial ? t('edit_account_sub') : t('new_account_sub')}</div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x" size={16}/></button>
        </div>

        {/* Tabs */}
        <div className="subtabs" style={{padding:'0 20px',borderBottom:'1px solid var(--border)'}}>
          {[
            ['general', t('acct_tab_general')||'General'],
            ['risk',    t('acct_tab_risk')||'Risk rules'],
            ['goals',   t('acct_tab_goals')||'Goals'],
          ].map(([id,label])=>(
            <button key={id} className={'subtab '+(tab===id?'active':'')} onClick={()=>setTab(id)}>{label}</button>
          ))}
        </div>

        <div className="modal-body">
          {tab === 'general' && (
            <>
              <div className="g-2">
                <div style={{gridColumn:'1 / -1'}}>
                  <label className="label">{t('account_name')}</label>
                  <input className="input" value={f.name} onChange={e=>set('name', e.target.value)} placeholder="e.g. Main IBKR" style={{width:'100%'}}/>
                </div>
                <div style={{gridColumn:'1 / -1'}}>
                  <label className="label">{t('color')}</label>
                  <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
                    {COLORS.map(c => (
                      <div key={c} onClick={()=>set('color',c)} style={{width:28,height:28,borderRadius:999,background:c,cursor:'pointer',border: f.color===c?'2px solid var(--text)':'2px solid transparent',boxSizing:'border-box'}}/>
                    ))}
                  </div>
                </div>
                <div>
                  <label className="label">{t('broker')}</label>
                  <select className="select" value={f.broker} onChange={e=>set('broker',e.target.value)} style={{width:'100%'}}>
                    {BROKERS.map(b => <option key={b}>{b}</option>)}
                  </select>
                </div>
                <div>
                  <label className="label">{t('account_type')}</label>
                  <select className="select" value={f.type} onChange={e=>set('type',e.target.value)} style={{width:'100%'}}>
                    {ACCT_TYPES.map(a => <option key={a.id} value={a.id}>{a.label}</option>)}
                  </select>
                </div>
                <div>
                  <label className="label">{t('asset_class_label')}</label>
                  <select className="select" value={f.assetClass} onChange={e=>set('assetClass',e.target.value)} style={{width:'100%'}}>
                    {ASSET_CLASSES.map(c => <option key={c}>{c}</option>)}
                  </select>
                </div>
                <div style={{gridColumn:'1 / -1'}}>
                  <label className="label">{t('starting_capital')}</label>
                  <input className="input mono" type="number" value={f.startingCapital} onChange={e=>set('startingCapital',e.target.value)} style={{width:'100%'}}/>
                </div>
              </div>

              {f.type==='prop_challenge' && (
                <>
                  <div className="hsep"/>
                  <div style={{fontWeight:500,marginBottom:12,display:'flex',alignItems:'center',gap:8}}>
                    <div style={{width:6,height:6,borderRadius:999,background:'#f59e0b'}}/>
                    {t('challenge_rules')}
                  </div>
                  <div className="g-2">
                    <div>
                      <label className="label">{t('max_daily_loss_pct')}</label>
                      <input className="input mono" type="number" step="0.5" value={f.rules?.maxDailyLoss ?? 5} onChange={e=>setRule('maxDailyLoss', +e.target.value)} style={{width:'100%'}}/>
                    </div>
                    <div>
                      <label className="label">{t('max_total_loss_pct')}</label>
                      <input className="input mono" type="number" step="0.5" value={f.rules?.maxTotalLoss ?? 10} onChange={e=>setRule('maxTotalLoss', +e.target.value)} style={{width:'100%'}}/>
                    </div>
                    <div>
                      <label className="label">{t('profit_target_pct')}</label>
                      <input className="input mono" type="number" step="0.5" value={f.rules?.profitTarget ?? 10} onChange={e=>setRule('profitTarget', +e.target.value)} style={{width:'100%'}}/>
                    </div>
                    <div>
                      <label className="label">{t('challenge_deadline')}</label>
                      <input className="input mono" type="date" value={f.rules?.deadline || ''} onChange={e=>setRule('deadline', e.target.value)} style={{width:'100%'}}/>
                    </div>
                  </div>
                </>
              )}

              <div className="hsep"/>
              <label className="label">{t('notes')}</label>
              <textarea className="input textarea" value={f.notes} onChange={e=>set('notes',e.target.value)} style={{width:'100%'}} placeholder={t('notes_optional')}/>
            </>
          )}

          {tab === 'risk' && (
            <>
              <div className="muted tiny" style={{marginBottom:14,textWrap:'pretty'}}>{t('risk_tab_sub')||'Risk rules apply only to this account. Violating them shows a warning when logging new trades.'}</div>
              <div className="g-2">
                <div><label className="label">{t('max_risk_trade')}</label><div style={{display:'flex',alignItems:'center',gap:6}}><input className="input mono" type="number" step="0.1" value={f.risk?.maxRiskTrade ?? 1} onChange={e=>setRisk('maxRiskTrade', +e.target.value)} style={{width:'100%'}}/><span className="muted">%</span></div></div>
                <div><label className="label">{t('max_daily_loss')}</label><div style={{display:'flex',alignItems:'center',gap:6}}><input className="input mono" type="number" step="0.5" value={f.risk?.maxDailyLoss ?? 3} onChange={e=>setRisk('maxDailyLoss', +e.target.value)} style={{width:'100%'}}/><span className="muted">%</span></div></div>
                <div><label className="label">{t('max_weekly_loss')}</label><div style={{display:'flex',alignItems:'center',gap:6}}><input className="input mono" type="number" step="0.5" value={f.risk?.maxWeeklyLoss ?? 6} onChange={e=>setRisk('maxWeeklyLoss', +e.target.value)} style={{width:'100%'}}/><span className="muted">%</span></div></div>
                <div><label className="label">{t('max_concurrent')}</label><input className="input mono" type="number" value={f.risk?.maxConcurrent ?? 3} onChange={e=>setRisk('maxConcurrent', +e.target.value)} style={{width:'100%'}}/></div>
                <div><label className="label">{t('default_stop')}</label>
                  <select className="select" value={f.risk?.defaultStop || 'hard'} onChange={e=>setRisk('defaultStop', e.target.value)} style={{width:'100%'}}>
                    <option value="hard">{t('hard_stop')}</option>
                    <option value="mental">{t('mental_stop')}</option>
                    <option value="time">{t('time_stop')}</option>
                  </select>
                </div>
                <div><label className="label">{t('min_rr')}</label><input className="input mono" type="number" step="0.1" value={f.risk?.minRR ?? 1.5} onChange={e=>setRisk('minRR', +e.target.value)} style={{width:'100%'}}/></div>
              </div>
              <div className="hsep"/>
              <div style={{display:'flex',alignItems:'center',gap:12,flexWrap:'wrap'}}>
                <div className={'disc-sw '+(f.risk?.blockAfterLoss?'on':'')} onClick={()=>setRisk('blockAfterLoss', !f.risk?.blockAfterLoss)}/>
                <div>
                  <div style={{fontWeight:500}}>{t('block_after_loss')}</div>
                  <div className="muted tiny">{t('block_after_loss_sub')}</div>
                </div>
              </div>
            </>
          )}

          {tab === 'goals' && (
            <>
              <div className="muted tiny" style={{marginBottom:14,textWrap:'pretty'}}>{t('goals_tab_sub')||'Track performance goals specific to this account.'}</div>
              <div className="g-2">
                <div><label className="label">{t('monthly_target')}</label><div style={{display:'flex',alignItems:'center',gap:6}}><span className="muted">$</span><input className="input mono" type="number" value={f.goals?.monthlyTarget ?? 4000} onChange={e=>setGoal('monthlyTarget', +e.target.value)} style={{width:'100%'}}/></div></div>
                <div><label className="label">{t('annual_target')}</label><div style={{display:'flex',alignItems:'center',gap:6}}><input className="input mono" type="number" value={f.goals?.annualTargetPct ?? 40} onChange={e=>setGoal('annualTargetPct', +e.target.value)} style={{width:'100%'}}/><span className="muted">%</span></div></div>
                <div><label className="label">{t('target_wr')}</label><div style={{display:'flex',alignItems:'center',gap:6}}><input className="input mono" type="number" value={f.goals?.targetWinRate ?? 55} onChange={e=>setGoal('targetWinRate', +e.target.value)} style={{width:'100%'}}/><span className="muted">%</span></div></div>
                <div><label className="label">{t('target_r')}</label><div style={{display:'flex',alignItems:'center',gap:6}}><span className="muted">+</span><input className="input mono" type="number" step="0.05" value={f.goals?.targetAvgR ?? 0.45} onChange={e=>setGoal('targetAvgR', +e.target.value)} style={{width:'100%'}}/><span className="muted">R</span></div></div>
              </div>
              <div className="hsep"/>
              <div style={{fontWeight:500,marginBottom:10}}>{t('habits')}</div>
              <div className="chips">
                {habitList.map(h => (
                  <span key={h} className={'chip '+((f.goals?.habits||[]).includes(h)?'on':'')} onClick={()=>toggleHabit(h)}>{h}</span>
                ))}
              </div>
            </>
          )}
        </div>
        <div className="modal-foot">
          {initial && onDelete && <button className="btn" style={{color:'#ef4444',marginRight:'auto'}} onClick={()=>{ onDelete(initial.id); onClose(); }}><Icon name="trash" size={13}/> {t('delete')}</button>}
          <button className="btn" onClick={onClose}>{t('cancel')}</button>
          <button className="btn btn-primary" onClick={save}><Icon name="check" size={13}/> {initial ? t('save_changes') : t('create_account')}</button>
        </div>
      </div>
    </div>
  );
};

window.AccountModal = AccountModal;