// screen-fire.jsx — FIRE Calculator (Financial Independence, Retire Early)
// Standalone screen, no Supabase dependency. All math is client-side.

function ScreenFire({ theme, accent, auth }) {
  const T = theme;

  // ── Auto-load from real data ──────────────────────────────────
  const [loaded, setLoaded] = React.useState(false);
  const [simMode, setSimMode] = React.useState(false);
  const [simForm, setSimForm] = React.useState(null);  // override values for simulation
  React.useEffect(function() {
    if (!auth || !auth.family || !window.SB || loaded) return;
    var familyId = auth.family.id;

    Promise.all([
      // 1. Last 3 months transactions (expense + investasi)
      window.SB.from('transactions').select('type,amount,date,account_id,category:categories(name)')
        .eq('family_id', familyId)
        .gte('date', new Date(Date.now() - 90*24*3600*1000).toISOString().split('T')[0]),
      // 2. Accounts (net worth + investment history for return calc)
      window.SB.from('accounts').select('id,name,balance,type,cost_basis,last_updated,created_at').eq('family_id', familyId).eq('is_active', true),
      // 3. Profile for birth_date
      window.SB.from('profiles').select('birth_date').eq('id', auth.user.id).single(),
    ]).then(function(results) {
      var txRes = results[0], accRes = results[1], profRes = results[2];
      var updates = {};

      // Usia dari birth_date
      if (profRes && !profRes.error && profRes.data && profRes.data.birth_date) {
        var bd = new Date(profRes.data.birth_date);
        var today = new Date();
        var age = today.getFullYear() - bd.getFullYear() -
          (today.getMonth() < bd.getMonth() || (today.getMonth() === bd.getMonth() && today.getDate() < bd.getDate()) ? 1 : 0);
        if (age > 0 && age < 100) updates.usia = age;
      }

      // Avg monthly expense + investasi contributions dari transaksi
      if (!txRes.error && txRes.data && txRes.data.length > 0) {
        var invAccountIds = (accRes.data||[])
          .filter(function(a){return a.type==='investment';})
          .map(function(a){return a.id;});

        var expenses   = txRes.data.filter(function(t){ return t.type==='expense' && !invAccountIds.includes(t.account_id); });
        var invTopups  = txRes.data.filter(function(t){ return invAccountIds.includes(t.account_id) || (t.category&&t.category.name&&t.category.name.toLowerCase().includes('invest')); });

        var totalExp = expenses.reduce(function(s,t){return s+t.amount;},0);
        var avgExp   = Math.round(totalExp / 3);
        if (avgExp > 0) updates.pengeluaranBulanan = avgExp;

        if (invTopups.length > 0) {
          var totalInvTopup = invTopups.reduce(function(s,t){return s+t.amount;},0);
          var avgInvMonthly = Math.round(totalInvTopup / 3);
          if (avgInvMonthly > 0) {
            updates.investasiBulanan  = avgInvMonthly;
            updates._invLocked = true;
          }
        }
      }

      // Net worth + calculate investment return from cost_basis vs current value
      if (!accRes.error && accRes.data && accRes.data.length > 0) {
        var netWorth = accRes.data
          .filter(function(a){return a.type !== 'credit';})
          .reduce(function(s,a){return s+a.balance;},0);
        if (netWorth > 0) updates.tabunganSaatIni = netWorth;

        // Hitung estimated annual return dari akun investasi
        // P&L / cost_basis / years_held → annualized return
        var invAccounts = accRes.data.filter(function(a){
          return a.type === 'investment' && a.cost_basis > 0 && a.balance > 0;
        });
        if (invAccounts.length > 0) {
          var totalPnlPct = 0, count = 0;
          invAccounts.forEach(function(a) {
            var created = new Date(a.created_at);
            var now = new Date();
            var yearsHeld = Math.max(0.5, (now - created) / (365.25 * 24 * 3600 * 1000));
            var totalReturn = (a.balance - a.cost_basis) / a.cost_basis;
            // Annualized: (1 + totalReturn)^(1/years) - 1
            var annualized = (Math.pow(1 + totalReturn, 1 / yearsHeld) - 1) * 100;
            if (annualized > -50 && annualized < 200) {
              totalPnlPct += annualized;
              count++;
            }
          });
          if (count > 0) {
            var avgReturn = Math.round(totalPnlPct / count * 10) / 10;
            avgReturn = Math.max(2, Math.min(30, avgReturn));
            updates.returnTahunan = avgReturn;
            updates._returnLocked = true;
          }
        }
      }
      // Lock usia kalau ada birth_date
      if (updates.usia) updates._ageLocked = true;

      if (Object.keys(updates).length > 0) {
        setForm(function(f){
          var merged = Object.assign({}, f, updates);
          setSimForm(merged);  // snapshot real values
          return merged;
        });
      }
      setLoaded(true);
    });
  }, [auth]);

  // ── Inputs state ──────────────────────────────────────────────
  const [form, setForm] = React.useState({
    usia:          30,
    targetPensiun: 55,
    pengeluaranBulanan: 15_000_000,
    tabunganSaatIni:    200_000_000,
    investasiBulanan:    5_000_000,
    returnTahunan:      10,   // %
    inflasi:             4,   // %
    safeWithdrawal:      4,   // %
  });

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const num = (v) => typeof v === 'string' ? parseInt(v.replace(/\D/g, '')) || 0 : v;

  // ── FIRE Math ─────────────────────────────────────────────────
  const results = React.useMemo(() => {
    const {
      usia, targetPensiun, pengeluaranBulanan,
      tabunganSaatIni, investasiBulanan,
      returnTahunan, inflasi, safeWithdrawal,
    } = form;

    const tahunHingga = Math.max(targetPensiun - usia, 1);

    // ── FIRE Best Practice ────────────────────────────────────
    // 1. Inflate pengeluaran ke nilai uang saat pensiun
    const inf = inflasi / 100;
    const ret = returnTahunan / 100;
    const pengeluaranFuture = num(pengeluaranBulanan) * 12 * Math.pow(1 + inf, tahunHingga);

    // 2. Real return (Fisher equation) — lebih akurat dari sekedar ret - inf
    const realReturn = (1 + ret) / (1 + inf) - 1;

    // 3. FIRE Number = pengeluaran tahunan future / SWR
    //    Rule of 25 = 4% SWR, Rule of 33 = 3% SWR (Fat FIRE)
    const swr = safeWithdrawal / 100;
    const fireNumber = pengeluaranFuture / swr;  // = pengeluaranFuture × 25 pada 4%

    // 4. Lean FIRE (25x) / Regular FIRE (30x) / Fat FIRE (33x) targets
    const leanFire = pengeluaranFuture * 25;
    const fatFire  = pengeluaranFuture * 33;

    // 5. Portfolio projection menggunakan real return
    //    FV = PV × (1+r)^n + PMT × [(1+r)^n - 1] / r
    const r = realReturn / 12;  // monthly real return
    const n = tahunHingga * 12;
    const fvExisting = num(tabunganSaatIni) * Math.pow(1 + r, n);
    const fvContrib  = r > 0
      ? num(investasiBulanan) * ((Math.pow(1 + r, n) - 1) / r)
      : num(investasiBulanan) * n;
    const portfolioProjected = fvExisting + fvContrib;

    // Gap or surplus
    const gap = fireNumber - portfolioProjected;
    const achieved = portfolioProjected >= fireNumber;

    // How many years to FIRE at current savings rate (binary search)
    let fireYear = null;
    for (let y = 1; y <= 50; y++) {
      const nn = y * 12;
      const fve = num(tabunganSaatIni) * Math.pow(1 + r, nn);
      const fvc = num(investasiBulanan) * ((Math.pow(1 + r, nn) - 1) / r);
      const proj = fve + fvc;
      const fn   = num(pengeluaranBulanan) * 12 * Math.pow(1 + inflasi/100, y) / (safeWithdrawal / 100);
      if (proj >= fn) { fireYear = y; break; }
    }

    // Monthly income needed if FIRE at target
    const monthlyFromPortfolio = portfolioProjected * (safeWithdrawal / 100) / 12;

    // Savings rate
    // (assume income = tabungan bulanan + pengeluaran, simplified)
    const income = num(investasiBulanan) + num(pengeluaranBulanan);
    const savingsRate = income > 0 ? (num(investasiBulanan) / income * 100) : 0;

    // Chart: portfolio growth year by year
    const chartData = [];
    for (let y = 0; y <= tahunHingga; y++) {
      const nn = y * 12;
      const fve = num(tabunganSaatIni) * Math.pow(1 + r, nn);
      const fvc = num(investasiBulanan) * ((Math.pow(1 + r, nn) - 1) / r);
      const fn  = num(pengeluaranBulanan) * 12 * Math.pow(1 + inflasi/100, y) / (safeWithdrawal / 100);
      chartData.push({
        year: usia + y,
        portfolio: Math.round(fve + fvc),
        fireTarget: Math.round(fn),
      });
    }

    return {
      fireNumber, portfolioProjected, gap, achieved,
      fireYear, fireAge: fireYear ? usia + fireYear : null,
      monthlyFromPortfolio, savingsRate, chartData,
      tahunHingga, pengeluaranFuture,
    };
  }, [form]);

  const fmtRp  = (v) => {
    if (v >= 1e12) return `Rp ${(v/1e12).toFixed(1)}T`;
    if (v >= 1e9)  return `Rp ${(v/1e9).toFixed(1)}M`;
    if (v >= 1e6)  return `Rp ${(v/1e6).toFixed(1)}jt`;
    if (v >= 1e3)  return `Rp ${(v/1e3).toFixed(0)}rb`;
    return `Rp ${Math.round(v)}`;
  };

  const fmtInput = (v) => num(v) > 0 ? num(v).toLocaleString('id-ID') : '';

  // Mini bar chart
  const maxVal = Math.max(...results.chartData.map(d => Math.max(d.portfolio, d.fireTarget)));
  const pct = (v) => maxVal > 0 ? Math.min(v / maxVal * 100, 100) : 0;

  // Color logic
  const statusColor = results.achieved ? accent[500] : '#f59e0b';
  const statusBg    = results.achieved ? accent.tint  : 'rgba(245,158,11,0.08)';

  return (
    <div style={{ background: T.bg, minHeight: '100%', paddingBottom: 100 }}>

      {/* Header */}
      <div style={{
        padding: '56px 20px 20px',
        background: `linear-gradient(160deg, ${accent[50]}, ${T.bg} 70%)`,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
          <div style={{
            width: 36, height: 36, borderRadius: 10,
            background: `linear-gradient(135deg, ${accent.grad[0]}, ${accent.grad[1]})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name="flame" size={18} color="#fff" stroke={2} />
          </div>
          <div>
            <div style={{ fontSize: 20, fontWeight: 800, color: T.fg1, letterSpacing: '-0.03em' }}>
              FIRE Calculator
            </div>
            <div style={{ fontSize: 11, color: T.fg3, fontWeight: 500 }}>
              Financial Independence · Retire Early
            </div>
          </div>
        </div>
      </div>

      <div style={{ padding: '0 16px' }}>

        {/* ── Result Card ── */}
        <div style={{
          borderRadius: 20, padding: 20, marginBottom: 16,
          background: statusBg,
          border: `1.5px solid ${results.achieved ? accent[200] : 'rgba(245,158,11,0.25)'}`,
        }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: T.fg3, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>
            {results.achieved ? '🎉 Target tercapai!' : '📊 Proyeksi FIRE'}
          </div>
          {/* FIRE number utama */}
          <div style={{ marginBottom: 14 }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end' }}>
              <div>
                <div style={{ fontSize: 11, color: T.fg3, marginBottom: 3 }}>Target FIRE (Regular · 4% SWR · 25×)</div>
                <div style={{ fontSize: 24, fontWeight: 800, color: T.fg1, letterSpacing: '-0.03em' }}>
                  {fmtRp(results.fireNumber)}
                </div>
              </div>
              <div style={{ textAlign:'right' }}>
                <div style={{ fontSize: 11, color: T.fg3, marginBottom: 3 }}>Proyeksi portfolio</div>
                <div style={{ fontSize: 20, fontWeight: 800, color: statusColor }}>
                  {fmtRp(results.portfolioProjected)}
                </div>
              </div>
            </div>
          </div>

          {/* Lean / Regular / Fat FIRE bars */}
          <div style={{ marginBottom: 14, display:'flex', flexDirection:'column', gap:6 }}>
            {[
              { label:'Lean FIRE', target: results.leanFire,    mul:'25×', swr:'4%',   color: accent[400] || accent[500] },
              { label:'FIRE',      target: results.fireNumber,  mul:'25×', swr:'4%',   color: accent[500], main: true },
              { label:'Fat FIRE',  target: results.fatFire,     mul:'33×', swr:'3%',   color: accent[700] },
            ].map(function(tier) {
              var pct = Math.min(100, results.portfolioProjected / tier.target * 100);
              var reached = pct >= 100;
              return (
                <div key={tier.label} style={{
                  background: tier.main ? accent.tint : T.surfaceAlt,
                  borderRadius: 10, padding:'8px 12px',
                  border: tier.main ? '1px solid ' + accent[200] : '1px solid transparent',
                }}>
                  <div style={{ display:'flex', justifyContent:'space-between', marginBottom:4 }}>
                    <div style={{ display:'flex', alignItems:'center', gap:6 }}>
                      <span style={{ fontSize:12, fontWeight:700, color: reached ? '#10b981' : T.fg1 }}>
                        {reached ? '✅' : '○'} {tier.label}
                      </span>
                      <span style={{ fontSize:10, color:T.fg4 }}>{tier.mul} pengeluaran · SWR {tier.swr}</span>
                    </div>
                    <span style={{ fontSize:11, fontWeight:700, color: reached ? '#10b981' : T.fg2 }}>
                      {pct.toFixed(0)}% · {fmtRp(tier.target,{short:true})}
                    </span>
                  </div>
                  <div style={{ height:5, borderRadius:3, background: T.border, overflow:'hidden' }}>
                    <div style={{ height:'100%', width: pct+'%', borderRadius:3,
                      background: reached ? '#10b981' : tier.color, transition:'width 0.4s ease' }}/>
                  </div>
                </div>
              );
            })}
          </div>



          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
            {[
              { label: 'FIRE di usia', value: results.fireAge ? `${results.fireAge} thn` : '>50 thn', sub: results.fireYear ? `${results.fireYear} thn lagi` : '' },
              { label: 'Pendapatan/bln', value: fmtRp(results.monthlyFromPortfolio), sub: 'saat pensiun' },
              { label: 'Savings rate', value: `${results.savingsRate.toFixed(0)}%`, sub: results.savingsRate >= 50 ? '🔥 Sangat baik' : results.savingsRate >= 30 ? '✅ Baik' : '⚠️ Tingkatkan' },
            ].map(({ label, value, sub }) => (
              <div key={label} style={{
                background: T.surface, borderRadius: 12, padding: '10px 8px', textAlign: 'center',
                border: `1px solid ${T.border}`,
              }}>
                <div style={{ fontSize: 10, color: T.fg3, marginBottom: 3 }}>{label}</div>
                <div style={{ fontSize: 14, fontWeight: 800, color: T.fg1, letterSpacing: '-0.02em' }}>{value}</div>
                {sub && <div style={{ fontSize: 10, color: T.fg3, marginTop: 2 }}>{sub}</div>}
              </div>
            ))}
          </div>
        </div>

        {/* ── Mini Chart ── */}
        <div style={{
          background: T.surface, borderRadius: 20, padding: 16, marginBottom: 16,
          border: `1px solid ${T.border}`,
        }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: T.fg1, marginBottom: 12 }}>
            Pertumbuhan Portfolio
          </div>
          {(() => {
            const pts = results.chartData.filter((_, i) => i % Math.max(1, Math.floor(results.chartData.length / 20)) === 0);
            const W = 300, H = 80, GAP = 2;
            const bw = pts.length > 0 ? Math.max(2, (W - GAP * (pts.length - 1)) / pts.length) : 4;
            return (
              <svg width="100%" viewBox={`0 0 ${W} ${H}`} style={{ display: 'block', overflow: 'hidden' }}>
                {pts.map((d, i) => {
                  const x = i * (bw + GAP);
                  const hF = maxVal > 0 ? Math.round((d.fireTarget / maxVal) * H) : 0;
                  const hP = maxVal > 0 ? Math.round((d.portfolio / maxVal) * H) : 0;
                  return (
                    <g key={i}>
                      <rect x={x} y={H - hF} width={bw} height={hF} rx={1} fill={accent[200]} />
                      <rect x={x} y={H - hP} width={bw} height={hP} rx={1}
                        fill={d.portfolio >= d.fireTarget ? accent[500] : accent[600]} />
                    </g>
                  );
                })}
              </svg>
            );
          })()}
          <div style={{ display: 'flex', gap: 12, marginTop: 8 }}>
            {[
              { color: accent[500], label: 'Portfolio' },
              { color: accent[200], label: 'FIRE target' },
            ].map(({ color, label }) => (
              <div key={label} style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                <div style={{ width: 10, height: 10, borderRadius: 3, background: color }} />
                <span style={{ fontSize: 10, color: T.fg3 }}>{label}</span>
              </div>
            ))}
          </div>
        </div>

        {/* ── Inputs ── */}
        <div style={{
          background: T.surface, borderRadius: 20, padding: 16, marginBottom: 16,
          border: `1px solid ${T.border}`,
        }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 14 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: T.fg1 }}>Data Kamu</div>
            <div style={{ display:'flex', alignItems:'center', gap:8 }}>
              {loaded && !simMode && (
                <div style={{ fontSize:10, color:accent[600], fontWeight:600, background:accent.tint, padding:'3px 8px', borderRadius:99 }}>
                  ✓ data real
                </div>
              )}
              {loaded && (
                <label style={{ display:'flex', alignItems:'center', gap:5, cursor:'pointer', userSelect:'none' }}>
                  <div style={{
                    width:34, height:18, borderRadius:9, position:'relative',
                    background: simMode ? '#f59e0b' : T.surfaceAlt,
                    border: '1.5px solid ' + (simMode ? '#f59e0b' : T.border),
                    transition:'background 0.2s',
                  }}>
                    <div style={{
                      position:'absolute', top:1, left: simMode ? 15 : 1,
                      width:12, height:12, borderRadius:'50%', background:'#fff',
                      transition:'left 0.2s', boxShadow:'0 1px 3px rgba(0,0,0,0.2)',
                    }}/>
                  </div>
                  <span style={{ fontSize:10, fontWeight:700, color: simMode ? '#f59e0b' : T.fg4 }}>
                    Simulasi
                  </span>
                  <input type="checkbox" checked={simMode}
                    onChange={function(e){
                      var on = e.target.checked;
                      setSimMode(on);
                      if (!on && simForm) setForm(function(f){ return Object.assign({}, f, {
                        pengeluaranBulanan: simForm.pengeluaranBulanan,
                        tabunganSaatIni: simForm.tabunganSaatIni,
                      }); });
                    }}
                    style={{ position:'absolute', opacity:0, width:0, height:0 }} />
                </label>
              )}
            </div>
          </div>
          {simMode && (
            <div style={{ background:'rgba(245,158,11,0.08)', border:'1px solid rgba(245,158,11,0.3)',
              borderRadius:10, padding:'8px 12px', marginBottom:12, fontSize:11, color:'#92400e', lineHeight:1.5 }}>
              ⚠️ Mode Simulasi aktif — angka telah diubah dari data real. Matikan simulasi untuk kembali ke data asli.
            </div>
          )}

          {/* Usia row */}
          <div style={{ marginBottom: 14 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
              <div style={{ display:'flex', alignItems:'center', gap:6 }}>
                <span style={{ fontSize: 12, color: T.fg2, fontWeight: 500 }}>Usia saat ini</span>
                {form._ageLocked && (
                  <span style={{ fontSize:10, color:accent[600], fontWeight:600, background:accent.tint, padding:'1px 6px', borderRadius:99 }}>🔒 dari profil</span>
                )}
              </div>
              <span style={{ fontSize: 13, fontWeight: 700, color: T.fg1 }}>{form.usia} thn</span>
            </div>
            <input type="range" min={18} max={80} value={form.usia}
              onChange={e => !form._ageLocked && set('usia', +e.target.value)}
              disabled={!!form._ageLocked}
              style={{ width: '100%', accentColor: form._ageLocked ? accent[200] : accent[500], opacity: form._ageLocked ? 0.6 : 1 }} />
            {form._ageLocked && (
              <div style={{ fontSize:10, color:T.fg4, marginTop:3 }}>
                Ubah tanggal lahir di Profil untuk mengubah usia
              </div>
            )}
          </div>

          <div style={{ marginBottom: 14 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
              <span style={{ fontSize: 12, color: T.fg2, fontWeight: 500 }}>Target usia pensiun</span>
              <span style={{ fontSize: 13, fontWeight: 700, color: T.fg1 }}>{form.targetPensiun} thn</span>
            </div>
            <input type="range" min={form.usia + 1} max={75} value={form.targetPensiun}
              onChange={e => set('targetPensiun', +e.target.value)}
              style={{ width: '100%', accentColor: accent[500] }} />
          </div>

          {/* Currency inputs */}
          {[
            { key: 'pengeluaranBulanan', label: 'Pengeluaran per bulan', icon: 'wallet', isAuto: loaded },
            { key: 'tabunganSaatIni',    label: 'Kekayaan bersih saat ini', icon: 'landmark', isAuto: loaded },
            { key: 'investasiBulanan',   label: 'Investasi rutin / bulan', icon: 'trending-up', isAuto: !!form._invLocked, optional: true },
          ].map(({ key, label, icon, isAuto, optional }) => {
            var locked = isAuto && !simMode;
            return (
              <div key={key} style={{ marginBottom: 12 }}>
                <div style={{ display:'flex', justifyContent:'space-between', marginBottom: 5 }}>
                  <span style={{ fontSize: 12, color: T.fg2, fontWeight: 500 }}>{label}</span>
                  {isAuto && !simMode && (
                    <span style={{ fontSize:10, color:accent[600], fontWeight:600, background:accent.tint, padding:'2px 6px', borderRadius:99 }}>
                      🔒 dari app
                    </span>
                  )}
                  {isAuto && simMode && (
                    <span style={{ fontSize:10, color:'#f59e0b', fontWeight:600, background:'rgba(245,158,11,0.1)', padding:'2px 6px', borderRadius:99 }}>
                      ✏️ simulasi
                    </span>
                  )}
                </div>
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 8,
                  background: locked ? accent.tint : T.bg,
                  border: '1px solid ' + (locked ? accent[200] : simMode && isAuto ? 'rgba(245,158,11,0.4)' : T.border),
                  borderRadius: 12, padding: '10px 14px',
                  opacity: locked ? 0.85 : 1,
                }}>
                  <Icon name={icon} size={15} color={locked ? accent[500] : T.fg4} stroke={1.8} />
                  <span style={{ fontSize: 13, color: T.fg3 }}>Rp</span>
                  <input
                    type="text" inputMode="numeric"
                    readOnly={locked}
                    value={fmtInput(form[key])}
                    onChange={e => !locked && set(key, parseInt(e.target.value.replace(/\D/g,'')) || 0)}
                    style={{
                      flex: 1, border: 0, outline: 0, background: 'transparent',
                      fontSize: 15, fontWeight: 700, color: T.fg1,
                      fontFamily: 'inherit',
                      cursor: locked ? 'default' : 'text',
                    }}
                  />
                </div>
              </div>
            );
          })}
        </div>

        {/* ── Asumsi ── */}
        {simMode && (
        <div style={{
          background: T.surface, borderRadius: 20, padding: 16, marginBottom: 16,
          border: '1.5px solid rgba(245,158,11,0.4)',
        }}>
          <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom: 14 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: T.fg1 }}>Asumsi</div>
            <span style={{ fontSize:10, color:'#f59e0b', fontWeight:600, background:'rgba(245,158,11,0.1)', padding:'2px 6px', borderRadius:99 }}>✏️ mode simulasi</span>
          </div>
          {[
            { key: 'returnTahunan', label: 'Return investasi / tahun', min: 1, max: 25, step: 0.5, unit: '%', note: 'IHSG historis ~12-15%' },
            { key: 'inflasi',       label: 'Inflasi / tahun',          min: 1, max: 12, step: 0.5, unit: '%', note: 'Indonesia ~3-5%' },
            { key: 'safeWithdrawal',label: 'Safe withdrawal rate',     min: 2, max: 6,  step: 0.5, unit: '%', note: 'Rule of 4%' },
          ].map(({ key, label, min, max, step, unit, note }) => {
            var isReturnLocked = key === 'returnTahunan' && form._returnLocked && !simMode;
            return (
              <div key={key} style={{ marginBottom: 14 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                  <div style={{ display:'flex', alignItems:'center', gap:5 }}>
                    <span style={{ fontSize: 12, color: T.fg2, fontWeight: 500 }}>{label}</span>
                    {isReturnLocked
                      ? <span style={{ fontSize:10, color:accent[600], fontWeight:600, background:accent.tint, padding:'1px 6px', borderRadius:99 }}>🔒 dari data</span>
                      : <span style={{ fontSize: 10, color: T.fg4 }}>{note}</span>
                    }
                  </div>
                  <span style={{ fontSize: 13, fontWeight: 700, color: isReturnLocked ? accent[500] : accent[500] }}>{form[key]}%</span>
                </div>
                <input type="range" min={min} max={max} step={step} value={form[key]}
                  onChange={e => !isReturnLocked && set(key, +e.target.value)}
                  disabled={isReturnLocked}
                  style={{ width: '100%', accentColor: isReturnLocked ? accent[200] : accent[500], opacity: isReturnLocked ? 0.6 : 1 }} />
                {isReturnLocked && (
                  <div style={{ fontSize:10, color:T.fg4, marginTop:2 }}>
                    Dihitung dari P&L portofolio investasi kamu. Aktifkan Simulasi untuk mengubah.
                  </div>
                )}
              </div>
            );
          })}
        </div>
        )}

        {/* ── Tips ── */}
        {!results.achieved && (
          <div style={{
            borderRadius: 16, padding: 14, background: accent.tint,
            border: `1px solid ${accent[100]}`,
          }}>
            <div style={{ fontSize: 12, fontWeight: 700, color: accent[700], marginBottom: 6 }}>
              💡 Tips untuk capai FIRE lebih cepat
            </div>
            {[
              results.savingsRate < 30 && `Tingkatkan savings rate ke minimal 30% (sekarang ${results.savingsRate.toFixed(0)}%)`,
              results.fireYear > 20 && `Investasi di instrumen dengan return lebih tinggi (reksa dana saham, ETF)`,
              num(form.pengeluaranBulanan) > 20_000_000 && `Kurangi pengeluaran bulanan — setiap Rp 1jt/bln = Rp 300jt lebih kecil FIRE number`,
              true && `Gunakan fitur Tabungan di INDIECASH untuk track goals investasi`,
            ].filter(Boolean).slice(0, 3).map((tip, i) => (
              <div key={i} style={{ display: 'flex', gap: 8, marginBottom: 4 }}>
                <span style={{ color: accent[500], fontSize: 12 }}>→</span>
                <span style={{ fontSize: 12, color: accent[700], lineHeight: 1.4 }}>{tip}</span>
              </div>
            ))}
          </div>
        )}

      </div>
    </div>
  );
}

Object.assign(window, { ScreenFire });