// Rumbo — Budget · v3 · Design System variables

const { useRef: useRfB, useEffect: useEffB, useState: useStB } = React;

const BudgetOverallDonut = ({ pct, totalBudgeted, totalSpent }) => {
  const ref = useRfB(null); const ch = useRfB(null);
  useEffB(() => {
    let t=0;
    const init = () => {
      if (!ref.current||!window.Chart) { if (t++<20) { setTimeout(init,150); return; } return; }
      if (ch.current) { ch.current.destroy(); ch.current=null; }
      const dark = document.documentElement.getAttribute('data-theme')==='dark';
      const accent = pct>90?'#DC2626':pct>70?'#D97706':'#2563EB';
      ch.current = new window.Chart(ref.current, {
        type: 'doughnut',
        data: {
          datasets: [{
            data: [Math.min(totalSpent,totalBudgeted), Math.max(0,totalBudgeted-totalSpent)],
            backgroundColor: [accent, dark?'rgba(255,255,255,0.07)':'rgba(0,0,0,0.06)'],
            borderWidth: 0, hoverOffset: 0,
          }]
        },
        options: { responsive:true, maintainAspectRatio:false, cutout:'78%', plugins:{ legend:{display:false}, tooltip:{enabled:false} } }
      });
    };
    init();
    return () => { if (ch.current) { ch.current.destroy(); ch.current=null; } };
  }, [pct, totalBudgeted, totalSpent]);
  return <canvas ref={ref} style={{ width:'100%', height:'100%' }} />;
};

const Budget = ({ data, setData, theme, toggleTheme, selectedMonth, setSelectedMonth, setScreen, openNewTx }) => {
  const { budgets, transactions } = data;
  const [tab, setTab] = useStB('summary');
  const curMonth = selectedMonth || CURRENT_MONTH;

  const spentByCat = {};
  transactions.filter(t=>t.type==='expense'&&t.date.startsWith(curMonth))
    .forEach(t=>{ spentByCat[t.category]=(spentByCat[t.category]||0)+t.amount; });

  const totalBudgeted = budgets.reduce((s,b)=>s+b.limit,0);
  const totalSpent    = budgets.reduce((s,b)=>s+(spentByCat[b.category]||0),0);
  const totalAvail    = Math.max(0, totalBudgeted-totalSpent);
  const overallPct    = totalBudgeted>0 ? Math.round((totalSpent/totalBudgeted)*100) : 0;
  const overCount     = budgets.filter(b=>(spentByCat[b.category]||0)>b.limit).length;
  const accentColor   = overallPct>90?'var(--danger)':overallPct>70?'var(--warning)':'var(--accent)';

  const statusMsg = overallPct>90
    ? { type:'bad',  icon:'alertCircle',    title:'Presupuesto casi agotado', msg:`Solo quedan ${fmtFull(totalAvail)}.` }
    : overallPct>70
    ? { type:'warn', icon:'alertTriangle',  title:`Cuidado — ${overallPct}% usado`, msg:`Te quedan ${fmtFull(totalAvail)} disponibles.` }
    : { type:'good', icon:'sparkles',       title:'Vas por buen camino',    msg:`Tenés ${fmtFull(totalAvail)} disponibles este mes.` };

  return (
    <div style={{ background:'var(--bg)', minHeight:'100%', paddingBottom:32 }}>

      {/* Header */}
      <div className="screen-header">
        <div>
          <h1 className="screen-title">Presupuesto</h1>
          <p className="screen-sub">Planifica y controla tus gastos</p>
        </div>
        <div style={{ display:'flex', gap:8, flexWrap:'wrap', justifyContent:'flex-end' }}>
          {setSelectedMonth ? (
            <MonthSwitcher value={curMonth} onChange={setSelectedMonth} transactions={transactions} compact />
          ) : (
            <div style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-md)', padding:'6px 11px', fontSize:12, fontWeight:600, color:'var(--t3)', boxShadow:'var(--sh-xs)', display:'flex', alignItems:'center', gap:5 }}>
              <Icon name="calendar" size={13} color="var(--t4)" />
              <span style={{ textTransform:'capitalize' }}>{getMonthLabel(curMonth)}</span>
            </div>
          )}
          <button className="theme-toggle" onClick={toggleTheme}>
            <Icon name={theme==='dark'?'sun':'moon'} size={15} color="var(--t3)" />
          </button>
        </div>
      </div>

      <div style={{ padding:'14px 20px 0' }}>
        {/* Tabs */}
        <div className="pill-tabs" style={{ marginBottom:14 }}>
          {[['summary','Resumen'],['categories','Por categorías']].map(([v,l]) => (
            <button key={v} className={`pill-tab${tab===v?' active':''}`} onClick={()=>setTab(v)}>{l}</button>
          ))}
        </div>

        {tab === 'summary' && (
          <>
            {/* Donut overview */}
            <div style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-xl)', padding:'22px 20px', marginBottom:14, boxShadow:'var(--sh-sm)' }}>
              <div style={{ display:'flex', alignItems:'center', gap:22 }}>
                <div style={{ position:'relative', width:120, height:120, flexShrink:0 }}>
                  <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', zIndex:1, pointerEvents:'none' }}>
                    <div style={{ fontSize:24, fontWeight:900, color:accentColor }}>{overallPct}%</div>
                    <div style={{ fontSize:10, color:'var(--t5)', fontWeight:600, textAlign:'center', lineHeight:1.3 }}>del presupuesto<br/>utilizado</div>
                  </div>
                  <BudgetOverallDonut pct={overallPct} totalBudgeted={totalBudgeted} totalSpent={totalSpent} />
                </div>
                <div style={{ flex:1 }}>
                  {[
                    { l:'Presupuesto', v:fmtFull(totalBudgeted), c:'var(--success)' },
                    { l:'Gastado',     v:fmtFull(totalSpent),    c:accentColor      },
                    { l:'Disponible',  v:fmtFull(totalAvail),    c:'var(--t4)'      },
                  ].map(({l,v,c}) => (
                    <div key={l} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10 }}>
                      <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                        <div style={{ width:9, height:9, borderRadius:'50%', background:c }} />
                        <span style={{ fontSize:13, color:'var(--t4)' }}>{l}</span>
                      </div>
                      <span style={{ fontSize:13, fontWeight:800, color:'var(--t2)', fontVariantNumeric:'tabular-nums' }}>{v}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Status message */}
            <div className={`insight ${statusMsg.type}`} style={{ marginBottom:14 }}>
              <div className="insight-icon" style={{
                background:statusMsg.type==='good'?'var(--success-bg)':statusMsg.type==='warn'?'var(--warning-bg)':'var(--danger-bg)'
              }}>
                <Icon name={statusMsg.icon} size={18}
                  color={statusMsg.type==='good'?'var(--success)':statusMsg.type==='warn'?'var(--warning)':'var(--danger)'} />
              </div>
              <div>
                <div style={{ fontSize:13, fontWeight:700, color:statusMsg.type==='good'?'var(--success-text)':statusMsg.type==='warn'?'var(--warning-text)':'var(--danger-text)' }}>
                  {statusMsg.title}
                </div>
                <div style={{ fontSize:12, color:'var(--t3)', marginTop:3 }}>{statusMsg.msg}</div>
                {overCount>0 && <div style={{ fontSize:12, color:'var(--danger-text)', marginTop:3 }}>{overCount} {overCount===1?'categoría':'categorías'} excedida{overCount>1?'s':''}</div>}
              </div>
            </div>

            {/* Lista compacta */}
            <div style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-xl)', overflow:'hidden', boxShadow:'var(--sh-sm)' }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'14px 18px', borderBottom:'1px solid var(--border)' }}>
                <div style={{ fontSize:14, fontWeight:700, color:'var(--t1)' }}>Por categoría</div>
                <button onClick={()=>setTab('categories')} style={{ background:'none', border:'none', color:'var(--accent)', fontSize:12, fontWeight:700, cursor:'pointer' }}>Editar</button>
              </div>
              {budgets.map((b,i) => {
                const spent = spentByCat[b.category]||0;
                const pct   = Math.min((spent/b.limit)*100,100);
                const over  = spent>b.limit;
                const meta  = getCategoryMeta(b.category);
                return (
                  <div key={b.id} style={{ padding:'12px 18px', borderBottom:i<budgets.length-1?'1px solid var(--border)':'none' }}>
                    <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:8 }}>
                      <CategoryIcon category={b.category} size="sm" />
                      <div style={{ flex:1 }}>
                        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                          <span style={{ fontSize:13, fontWeight:600, color:'var(--t1)' }}>{b.category}</span>
                          <div>
                            <span style={{ fontSize:13, fontWeight:800, color:over?'var(--danger)':'var(--t2)', fontVariantNumeric:'tabular-nums' }}>{fmtFull(spent)}</span>
                            <span style={{ fontSize:12, color:'var(--t5)' }}> / {fmtFull(b.limit)}</span>
                          </div>
                        </div>
                      </div>
                      {over && <span className="badge badge-red">Excedido</span>}
                    </div>
                    <div className="progress-track">
                      <div className="progress-fill" style={{ width:`${pct}%`, background: over?'var(--danger)':`linear-gradient(90deg,${b.color}88,${b.color})` }} />
                    </div>
                    <div style={{ display:'flex', justifyContent:'space-between', marginTop:5 }}>
                      <span style={{ fontSize:11, color:over?'var(--danger-text)':'var(--t4)', fontWeight:700 }}>{Math.round(pct)}%</span>
                      <span style={{ fontSize:11, color:over?'var(--danger-text)':'var(--t5)' }}>
                        {over?`Excedido ${fmtFull(spent-b.limit)}`:`Disponible ${fmtFull(b.limit-spent)}`}
                      </span>
                    </div>
                  </div>
                );
              })}
            </div>

            {/* CTA */}
            <div style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-xl)', padding:'16px 18px', marginTop:14, display:'flex', alignItems:'center', gap:14, boxShadow:'var(--sh-sm)' }}>
              <div style={{ width:42, height:42, borderRadius:'var(--r-md)', background:'var(--accent-muted)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                <Icon name="target" size={20} color="var(--accent)" />
              </div>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:13, fontWeight:700, color:'var(--t1)', marginBottom:3 }}>¿Quieres mejorar tu presupuesto?</div>
                <div style={{ fontSize:12, color:'var(--t4)' }}>Revisá tus categorías y ajustá los límites.</div>
              </div>
              <button onClick={()=>setTab('categories')} className="btn btn-primary" style={{ borderRadius:'var(--r-md)', padding:'8px 14px', fontSize:12, flexShrink:0 }}>
                Editar
              </button>
            </div>
          </>
        )}

        {tab === 'categories' && (
          <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
            {budgets.map(b => {
              const spent = spentByCat[b.category]||0;
              const pct   = Math.min((spent/b.limit)*100,100);
              const over  = spent>b.limit;
              const meta  = getCategoryMeta(b.category);
              return (
                <div key={b.id} style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-xl)', padding:'18px 20px', boxShadow:'var(--sh-sm)' }}>
                  <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:14 }}>
                    <CategoryIcon category={b.category} size="md" />
                    <div style={{ flex:1 }}>
                      <div style={{ fontSize:15, fontWeight:700, color:'var(--t1)' }}>{b.category}</div>
                      <div style={{ fontSize:12, color:'var(--t4)', marginTop:2 }}>{fmtFull(b.limit)} presupuestado</div>
                    </div>
                    {over && <span className="badge badge-red">Excedido</span>}
                  </div>
                  <div className="progress-track" style={{ height:10, marginBottom:10 }}>
                    <div className="progress-fill" style={{ width:`${pct}%`, background:over?'var(--danger)':`linear-gradient(90deg,${b.color}88,${b.color})` }} />
                  </div>
                  <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10 }}>
                    {[
                      { l:'Gastado',    v:fmtFull(spent),               c:over?'var(--danger)':'var(--t2)' },
                      { l:'Uso',        v:`${Math.round(pct)}%`,         c:over?'var(--danger)':'var(--accent)' },
                      { l:over?'Excedido':'Disponible', v:fmtFull(Math.abs(b.limit-spent)), c:over?'var(--danger)':'var(--success)' },
                    ].map(({l,v,c}) => (
                      <div key={l} style={{ textAlign:'center' }}>
                        <div style={{ fontSize:10, color:'var(--t5)', fontWeight:700, textTransform:'uppercase', letterSpacing:'0.4px', marginBottom:4 }}>{l}</div>
                        <div style={{ fontSize:16, fontWeight:900, color:c, fontVariantNumeric:'tabular-nums' }}>{v}</div>
                      </div>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>

      {/* ── FAB — abre TxDrawer global sin cambiar de pantalla ── */}
      <button className="fab fab-fixed" onClick={openNewTx || (() => setScreen && setScreen('transactions'))} aria-label="Nueva transacción">
        <Icon name="plus" size={24} color="#fff" strokeWidth={2.5} />
      </button>
    </div>
  );
};

Object.assign(window, { Budget });