// desktop2.jsx — MovDesktop, PagosDesktop, AnalisisDesktop
const { useState: d2S, useMemo: d2M, useRef: d2R, useEffect: d2E } = React;
const d2seed  = window.SisyphusSeed;
const d2S_    = window.S;
const D2Icon  = window.Icon;
const D2Panel = window.DPanel;

function useStore2() { return window.useSisyStore(); }

// ── BarDropdown — custom styled select for the inline add bar ────────────────
function BarDropdown({ value, options, onChange, icon, minWidth = 140 }) {
  const [open, setOpen] = d2S(false);
  const ref = d2R(null);
  const selected = options.find(o => o.id === value) || options[0];

  d2E(() => {
    if (!open) return;
    function handler(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [open]);

  return (
    <div ref={ref} style={{ position:'relative', flexShrink:0 }}>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          display:'flex', alignItems:'center', gap:7, padding:'6px 12px',
          borderRadius:9, cursor:'pointer', fontFamily:'inherit',
          fontSize:12.5, fontWeight:600, whiteSpace:'nowrap', minWidth,
          background: open ? 'var(--accent-dim)' : 'rgba(255,255,255,0.05)',
          border: `1px solid ${open ? 'var(--border-strong)' : 'var(--border)'}`,
          color: open ? 'var(--accent-bright)' : 'var(--text-2)',
          transition:'all 0.13s',
        }}
      >
        {icon && <D2Icon name={icon} size={12} strokeWidth={2} />}
        <span style={{ flex:1, textAlign:'left' }}>{selected?.label}</span>
        <D2Icon name={open ? 'chevDown' : 'chevDown'} size={11}
          style={{ transform: open ? 'rotate(180deg)' : 'none', transition:'transform 0.18s', opacity:0.6 }} />
      </button>

      {open && (
        <div style={{
          position:'absolute', top:'calc(100% + 5px)', left:0, zIndex:200,
          minWidth: Math.max(minWidth, 180),
          background:'rgba(12,7,26,0.98)', backdropFilter:'blur(24px)',
          border:'1px solid var(--border-strong)', borderRadius:12,
          boxShadow:'0 16px 48px rgba(0,0,0,0.6)',
          animation:'fadeSlide 0.12s ease',
          overflow:'hidden',
        }}>
          {options.map(o => (
            <button key={o.id} onClick={() => { onChange(o.id); setOpen(false); }}
              style={{
                display:'flex', alignItems:'center', gap:10, width:'100%',
                padding:'9px 14px', background:'transparent', border:'none',
                cursor:'pointer', fontFamily:'inherit', fontSize:13, fontWeight: o.id === value ? 600 : 400,
                color: o.id === value ? 'var(--accent-bright)' : 'var(--text-2)',
                textAlign:'left', transition:'background 0.1s',
              }}
              onMouseEnter={e => e.currentTarget.style.background = 'rgba(167,139,250,0.1)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <span style={{ width:16, flexShrink:0 }}>
                {o.id === value && <D2Icon name="check" size={12} strokeWidth={2.5} style={{ color:'var(--accent-bright)' }} />}
              </span>
              {o.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

// ── BarDateBtn — styled date button with MiniCalendar popover ────────────────
function BarDateBtn({ value, onChange, placeholder = 'Fecha', accent = false }) {
  const [open, setOpen] = d2S(false);
  const ref = d2R(null);

  d2E(() => {
    if (!open) return;
    function handler(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [open]);

  const display = value
    ? new Date(value + 'T12:00:00').toLocaleDateString('es-AR', { day:'2-digit', month:'2-digit' })
    : placeholder;

  const MiniCal = window.MiniCalendar;

  return (
    <div ref={ref} style={{ position:'relative', flexShrink:0 }}>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          display:'flex', alignItems:'center', gap:6, padding:'6px 12px',
          borderRadius:9, cursor:'pointer', fontFamily:'inherit', fontSize:12.5, fontWeight:600,
          background: open ? 'var(--accent-dim)' : value ? 'rgba(255,255,255,0.07)' : 'rgba(255,255,255,0.04)',
          border: `1px solid ${open ? 'var(--border-strong)' : value ? 'var(--border-strong)' : 'var(--border)'}`,
          color: open ? 'var(--accent-bright)' : value ? (accent ? 'var(--accent-bright)' : 'var(--text)') : 'var(--text-3)',
          transition:'all 0.13s', whiteSpace:'nowrap',
        }}
      >
        <D2Icon name="calendar" size={12} strokeWidth={2} />
        {display}
        {value && (
          <span onClick={e => { e.stopPropagation(); onChange(''); setOpen(false); }}
            style={{ marginLeft:2, opacity:0.5, display:'flex', alignItems:'center' }}
            onMouseEnter={e => e.currentTarget.style.opacity='1'}
            onMouseLeave={e => e.currentTarget.style.opacity='0.5'}>
            <D2Icon name="x" size={10} strokeWidth={2.5} />
          </span>
        )}
      </button>

      {open && (
        <div style={{
          position:'absolute', top:'calc(100% + 6px)', left:0, zIndex:300,
          background:'rgba(12,7,26,0.98)', backdropFilter:'blur(24px)',
          border:'1px solid var(--border-strong)', borderRadius:14,
          boxShadow:'0 20px 60px rgba(0,0,0,0.7)',
          padding:12, animation:'fadeSlide 0.14s ease',
        }}>
          {MiniCal
            ? React.createElement(MiniCal, {
                value,
                onChange: v => { onChange(v); setOpen(false); },
              })
            : (
              /* Fallback: styled native date input */
              <input type="date" value={value} autoFocus
                onChange={e => { onChange(e.target.value); setOpen(false); }}
                style={{ padding:'8px 12px', borderRadius:9, background:'rgba(255,255,255,0.06)', border:'1px solid var(--border-strong)', color:'var(--text)', fontFamily:'inherit', fontSize:13, outline:'none', colorScheme:'dark' }}
              />
            )
          }
        </div>
      )}
    </div>
  );
}

// ── MovDesktop ───────────────────────────────────────────────────────────────
function MovDesktop({ ccy, movimientos, spentState, budgets, onSendAnalisis, tarjetasState, extraIngresos, onDeleteMov, onAddMov, onEditMov }) {
  if (!d2seed || !d2S_) return React.createElement('div', { style:{padding:32,color:'var(--text-3)'} }, 'Cargando...');
  const { movs = [] } = useStore2();
  const [q, setQ]             = d2S('');
  const [filter, setFilter]   = d2S('todos');
  const [pmFilter, setPmFilter] = d2S('');
  const [pmOpen, setPmOpen] = d2S(false);
  const [deleteEntry, setDeleteEntry] = d2S(null);
  const [editEntry,   setEditEntry]   = d2S(null);
  const conv = n => ccy === 'USD' ? n / d2seed.fxBlue : n;
  const fmt  = n => d2S_.fmtMoney(conv(n), ccy);

  // ── Inline add bar state ──
  const today = new Date();
  const todayStr = `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2,'0')}-${String(today.getDate()).padStart(2,'0')}`;
  const [barDate,    setBarDate]    = d2S(todayStr);
  const [barDesc,    setBarDesc]    = d2S('');
  const [barAmount,  setBarAmount]  = d2S('');
  const [barKind,    setBarKind]    = d2S('variable');
  const [barCat,     setBarCat]     = d2S('super');
  const [barCcy,     setBarCcy]     = d2S('ARS');
  const [barDueDate, setBarDueDate] = d2S(''); // Fecha límite / pago programado

  const barCats = (d2seed.categories || []).filter(c => c.group !== 'ahorro');
  const barKinds = [
    { id:'variable',  label:'Gasto variable' },
    { id:'fijo',      label:'Gasto fijo' },
    { id:'ingreso',   label:'Ingreso' },
    { id:'ahorro',    label:'Aporte a ahorros' },
    { id:'retiro',    label:'Retiro de ahorros' },
    { id:'prestamo',  label:'Préstamo' },
    { id:'inversion', label:'Inversión' },
  ];
  const showDueDate = ['fijo','variable','prestamo'].includes(barKind);

  const barAmountNum = parseFloat((barAmount || '0').replace(/\./g,'').replace(/,/g,'.')) || 0;
  const barAmountARS = barCcy === 'USD' ? Math.round(barAmountNum * (d2seed.fxBlue || 1480)) : barAmountNum;
  const barReady = barAmountNum > 0 && barDesc.trim().length > 0;

  function submitBar() {
    if (!barReady) return;
    // Ensure date is valid — fall back to today if barDate is missing or invalid
    const safeDate = (() => {
      if (!barDate) return new Date();
      const d = new Date(barDate + 'T12:00:00');
      return isNaN(d.getTime()) ? new Date() : d;
    })();
    try {
      if (onAddMov) onAddMov({
        desc:    barDesc.trim(),
        amount:  barAmountARS,
        kind:    barKind,
        cat:     barCat,
        date:    safeDate,
        dueDate: barDueDate || null,
      });
    } catch(e) {
      console.error('[Sisyphus] submitBar error:', e);
    }
    setBarDesc(''); setBarAmount(''); setBarDueDate('');
  }

  const _seen = new Set((movimientos||[]).map(m=>m.id));
  const allMovs = [...(movimientos || []), ...movs.filter(m => !_seen.has(m.id))];

  const filters = [
    { id:'todos', label:'Todos' }, { id:'ingreso', label:'Ingresos' },
    { id:'fijo',  label:'Fijos' }, { id:'variable', label:'Variables' },
    { id:'ahorro', label:'Ahorro' },
  ];

  const filtered = d2M(() => allMovs.filter(m => {
    if (filter !== 'todos') {
      if (filter === 'ingreso' && m.kind !== 'ingreso') return false;
      if (filter !== 'ingreso' && m.kind !== filter) return false;
    }
    if (pmFilter && m.tarjetaId !== pmFilter) return false;
    if (q) {
      const cat = d2seed.catPorId[m.cat];
      if (!(m.desc||'').toLowerCase().includes(q.toLowerCase()) &&
          !(cat?.name||'').toLowerCase().includes(q.toLowerCase())) return false;
    }
    return true;
  }).sort((a,b) => new Date(b.date) - new Date(a.date)), [allMovs, filter, pmFilter, q]);

  // Summary stats — use actual movements; fallback to configured salary if no income movements
  const ingMovs   = allMovs.filter(m=>m.kind==='ingreso').reduce((a,m)=>a+Math.abs(m.amount),0);
  const ingresos  = ingMovs > 0 ? ingMovs : (extraIngresos || 0);
  const egresos   = allMovs.filter(m=>m.kind!=='ingreso').reduce((a,m)=>a+Math.abs(m.amount),0);

  // Per-account breakdown
  const byAccount = d2M(() => {
    const map = {};
    allMovs.filter(m=>m.tarjetaId || m.account).forEach(m => {
      const k = m.tarjetaId || m.account || '?';
      if (!map[k]) map[k] = { label: k, total: 0 };
      map[k].total += Math.abs(m.amount);
    });
    return Object.values(map).sort((a,b) => b.total - a.total).slice(0,6);
  }, [allMovs]);

  const kindColor = { fijo:'#818cf8', variable:'var(--accent-bright)', ingreso:'#4ade80', ahorro:'#34d399', cuota:'#f59e0b' };

  function kindLabel(m) {
    if (m.kind === 'ingreso') return 'INGRESO';
    if (m.cuotaGrupoId) return 'CUOTA';
    return (m.kind||'variable').toUpperCase();
  }

  const pmOptions = [
    { id:'', label:'Todos' },
    { id:'efectivo', label:'Efectivo' },
    { id:'debito', label:'Débito' },
    ...((tarjetasState||window._tarjetasForFilter||[]).filter(t=>t.active).map(t=>({ id:t.id, label:t.name }))),
  ];

  return (
    <>
    <div style={{ display:'grid', gridTemplateColumns:'1fr 300px', gap:24, padding:'28px 28px 44px', maxWidth:1280, margin:'0 auto', alignItems:'start' }}>
      {/* LEFT: list */}
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
        {/* ── Inline add bar ── */}
        {onAddMov && (
          <div style={{ background:'var(--card)', border:'1px solid var(--border-strong)', borderRadius:16, overflow:'visible' }}>
            {/* Row 1: date · description · amount · ccy */}
            <div style={{ padding:'12px 16px 10px', display:'flex', alignItems:'center', gap:10, borderBottom:'1px solid var(--border)' }}>
              {/* Label */}
              <span style={{ fontSize:10, fontWeight:700, color:'var(--text-3)', textTransform:'uppercase', letterSpacing:'0.12em', flexShrink:0 }}>Registro</span>

              {/* Date btn */}
              <BarDateBtn value={barDate} onChange={setBarDate} placeholder="Fecha" />

              {/* Description */}
              <input
                type="text" placeholder="Descripción del movimiento"
                value={barDesc} onChange={e => setBarDesc(e.target.value)}
                onKeyDown={e => e.key === 'Enter' && submitBar()}
                style={{ flex:1, minWidth:0, padding:'6px 12px', borderRadius:9, background:'rgba(255,255,255,0.04)', border:'1px solid var(--border)', color:'var(--text)', fontFamily:'inherit', fontSize:13, outline:'none', transition:'border-color 0.14s' }}
                onFocus={e => e.target.style.borderColor='var(--accent)'}
                onBlur={e => e.target.style.borderColor='var(--border)'}
              />

              {/* Amount */}
              <div style={{ display:'flex', alignItems:'center', gap:4, background:'rgba(255,255,255,0.04)', border:`1px solid ${barAmountNum>0?'var(--border-strong)':'var(--border)'}`, borderRadius:9, padding:'5px 12px', flexShrink:0, transition:'border-color 0.14s' }}
                onFocusCapture={e => e.currentTarget.style.borderColor='var(--accent)'}
                onBlurCapture={e => e.currentTarget.style.borderColor=barAmountNum>0?'var(--border-strong)':'var(--border)'}
              >
                <span style={{ fontSize:12, color:'var(--text-3)', fontWeight:600 }}>{barCcy==='USD'?'US$':'$'}</span>
                <input type="text" inputMode="numeric" placeholder="0"
                  value={barAmount} onChange={e => setBarAmount(e.target.value)}
                  onKeyDown={e => e.key==='Enter' && submitBar()}
                  style={{ width:88, background:'transparent', border:'none', outline:'none', color:barAmountNum>0?'var(--text)':'var(--text-3)', fontFamily:'Space Grotesk, sans-serif', fontSize:14, fontWeight:600, fontVariantNumeric:'tabular-nums' }} />
              </div>

              {/* ARS / USD toggle */}
              <div style={{ display:'flex', borderRadius:8, overflow:'hidden', border:'1px solid var(--border)', flexShrink:0 }}>
                {['ARS','USD'].map(c => (
                  <button key={c} onClick={() => setBarCcy(c)} style={{
                    padding:'5px 10px', background: barCcy===c ? 'var(--accent-dim)' : 'transparent',
                    color: barCcy===c ? 'var(--accent-bright)' : 'var(--text-3)',
                    border:'none', cursor:'pointer', fontFamily:'inherit', fontSize:11.5, fontWeight:700,
                    transition:'all 0.12s',
                  }}>{c}</button>
                ))}
              </div>
            </div>

            {/* Row 2: kind · category · due date · preview · add btn */}
            <div style={{ padding:'10px 16px 12px', display:'flex', alignItems:'center', gap:8, flexWrap:'wrap' }}>
              <BarDropdown value={barKind} options={barKinds} onChange={setBarKind} icon="bolt" minWidth={152} />
              {barKind !== 'ingreso' && (
                <BarDropdown
                  value={barCat}
                  options={barCats.map(c => ({ id:c.id, label:c.name }))}
                  onChange={setBarCat}
                  minWidth={160}
                />
              )}

              {/* Fecha límite — aparece para gastos/pagos programados */}
              {showDueDate && (
                <BarDateBtn value={barDueDate} onChange={setBarDueDate} placeholder="Fecha límite" accent />
              )}

              <div style={{ flex:1 }} />

              {/* Amount preview */}
              {barAmountNum > 0 && (
                <span style={{ fontSize:13, color:'var(--text-3)', fontFamily:'Space Grotesk, sans-serif', fontVariantNumeric:'tabular-nums' }}>
                  {barCcy==='USD'
                    ? `US$ ${new Intl.NumberFormat('en-US').format(barAmountNum)} ≈ ${fmt(barAmountARS)}`
                    : fmt(barAmountARS)}
                </span>
              )}

              <button onClick={submitBar} disabled={!barReady} style={{
                padding:'8px 22px', borderRadius:10, flexShrink:0,
                background: barReady ? 'var(--accent)' : 'rgba(255,255,255,0.05)',
                color:      barReady ? 'var(--on-accent)' : 'var(--text-3)',
                border:     barReady ? 'none' : '1px solid var(--border)',
                fontFamily:'inherit', fontSize:13, fontWeight:600,
                cursor: barReady ? 'pointer' : 'default',
                display:'flex', alignItems:'center', gap:7, transition:'all 0.14s',
              }}>
                <D2Icon name="plus" size={13} strokeWidth={2.5} /> Agregar
              </button>
            </div>
          </div>
        )}

        {/* Search + filters */}
        <div style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 14px', background:'var(--card)', border:'1px solid var(--border)', borderRadius:12 }}>
          <D2Icon name="search" size={15} style={{ color:'var(--text-3)', flexShrink:0 }} />
          <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Buscar comercio o categoría" style={{ flex:1, background:'transparent', border:'none', outline:'none', color:'var(--text)', fontFamily:'inherit', fontSize:14 }} />
          {q && <button onClick={()=>setQ('')} style={{ background:'none', border:'none', color:'var(--text-3)', cursor:'pointer' }}><D2Icon name="x" size={13}/></button>}
        </div>
        <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
          {filters.map(f => (
            <button key={f.id} onClick={()=>setFilter(f.id)} style={{
              padding:'6px 14px', borderRadius:999,
              background: filter===f.id ? 'var(--accent)' : 'rgba(255,255,255,0.04)',
              color: filter===f.id ? 'var(--on-accent)' : 'var(--text-2)',
              border:`1px solid ${filter===f.id ? 'var(--accent)' : 'var(--border)'}`,
              fontSize:12.5, fontWeight:600, cursor:'pointer', fontFamily:'inherit', transition:'all 0.13s',
            }}>{f.label}</button>
          ))}
        </div>
        {/* Payment method dropdown */}
        {window.MovPmDropdown
          ? React.createElement(window.MovPmDropdown, { tarjetaFilter: pmFilter, onSelect: setPmFilter })
          : null}

        {/* Table */}
        <div style={{ background:'var(--card)', border:'1px solid var(--border)', borderRadius:14, overflow:'hidden' }}>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'14px 18px', borderBottom:'1px solid var(--border)' }}>
            <div style={{ fontSize:13, fontWeight:600, color:'var(--text-2)' }}>{filtered.length} movimientos</div>
            <button onClick={onSendAnalisis} style={{ display:'flex', alignItems:'center', gap:6, padding:'6px 12px', borderRadius:999, background:'var(--accent-dim)', border:'1px solid var(--border-strong)', color:'var(--accent-bright)', cursor:'pointer', fontFamily:'inherit', fontSize:12, fontWeight:600 }}>
              <D2Icon name="spark" size={12} /> Análisis rápido
            </button>
          </div>
          {filtered.slice(0,50).map((m, i) => {
            const cat   = m.kind === 'ingreso' ? null : d2seed.catPorId[m.cat];
            const isIng = m.kind === 'ingreso';
            const dateD = new Date(m.date);
            const dateStr = dateD.toLocaleDateString('es-AR', { day:'2-digit', month:'short' });
            const tid = m.tarjetaId;
            return (
              <div key={m.id} style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 18px', borderTop: i===0?'none':'1px solid var(--border)', transition:'background 0.1s' }}
                onMouseEnter={e=>e.currentTarget.style.background='rgba(255,255,255,0.02)'}
                onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                {/* Icon — identical to phone */}
                {isIng
                  ? <div style={{ width:36, height:36, borderRadius:10, background:'rgba(139,92,246,0.16)', color:'var(--accent-bright)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}><D2Icon name="arrowDown" size={16} strokeWidth={2.2}/></div>
                  : window.CatChip ? React.createElement(window.CatChip, { cat, size:36 })
                    : <div style={{ width:36, height:36, borderRadius:10, background:'var(--accent-dim)', color:'var(--accent-bright)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}><D2Icon name="dollar" size={14}/></div>
                }
                {/* Desc + meta */}
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:13.5, fontWeight:500, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', color:'var(--text)' }}>{m.desc || '—'}</div>
                  <div style={{ display:'flex', alignItems:'center', gap:6, marginTop:2, fontSize:11.5, color:'var(--text-3)' }}>
                    <span>{dateStr}</span>
                    {cat && <><span>·</span><span>{cat.name}</span></>}
                    {tid && (() => { const tc = (tarjetasState||[]).find(t=>t.id===tid); return tc ? <><span>·</span><span style={{ color:'var(--text-2)' }}>{tc.name}</span></> : null; })()}
                    {m.cuotaNum && <><span>·</span><span>cuota {m.cuotaNum}/{m.cuotaTotal}</span></>}
                    <span style={{ padding:'1px 6px', borderRadius:999, fontSize:10, fontWeight:700, background:`${kindColor[m.kind]||'rgba(255,255,255,0.08)'}18`, color:kindColor[m.kind]||'var(--text-3)' }}>{kindLabel(m)}</span>
                  </div>
                </div>
                {/* Amount + delete */}
                <div style={{ display:'flex', alignItems:'center', gap:8, flexShrink:0 }}>
                  <span style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:14, fontWeight:600, fontVariantNumeric:'tabular-nums', color: isIng ? '#4ade80' : 'var(--text)' }}>
                    {isIng ? '+' : '−'} {fmt(Math.abs(m.amount||0))}
                  </span>
                  {onDeleteMov && (
                    <button onClick={() => setDeleteEntry(m)} title="Eliminar"
                      style={{ width:28, height:28, borderRadius:8, background:'transparent', border:'1px solid transparent', color:'var(--text-3)', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', transition:'all 0.1s' }}
                      onMouseEnter={e=>{ e.currentTarget.style.background='rgba(248,113,113,0.1)'; e.currentTarget.style.borderColor='rgba(248,113,113,0.3)'; e.currentTarget.style.color='#f87171'; }}
                      onMouseLeave={e=>{ e.currentTarget.style.background='transparent'; e.currentTarget.style.borderColor='transparent'; e.currentTarget.style.color='var(--text-3)'; }}>
                      <D2Icon name="trash" size={13} />
                    </button>
                  )}
                </div>
              </div>
            );
          })}
          {filtered.length === 0 && (
            <div style={{ padding:'32px 18px', textAlign:'center', color:'var(--text-3)', fontSize:13 }}>Sin movimientos para este filtro</div>
          )}
        </div>
      </div>

      {/* RIGHT: summary */}
      <div style={{ display:'flex', flexDirection:'column', gap:14, position:'sticky', top:88 }}>
        <div style={{ background:'var(--card)', border:'1px solid var(--border)', borderRadius:14, padding:'18px 16px', display:'flex', flexDirection:'column', gap:12 }}>
          <div style={{ fontSize:10, fontWeight:700, color:'var(--text-3)', textTransform:'uppercase', letterSpacing:'0.1em' }}>Resumen del mes</div>
          {[
            { label:'Ingresos', value: ingresos, color:'#4ade80' },
            { label:'Egresos',  value: egresos,  color:'#f87171' },
            { label:'Neto',     value: ingresos - egresos, color: ingresos >= egresos ? '#4ade80' : '#f87171' },
          ].map(({ label, value, color }) => (
            <div key={label} style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
              <span style={{ fontSize:13, color:'var(--text-2)' }}>{label}</span>
              <span style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:14, fontWeight:700, fontVariantNumeric:'tabular-nums', color }}>{fmt(value)}</span>
            </div>
          ))}
        </div>
        {byAccount.length > 0 && (
          <div style={{ background:'var(--card)', border:'1px solid var(--border)', borderRadius:14, padding:'18px 16px', display:'flex', flexDirection:'column', gap:10 }}>
            <div style={{ fontSize:10, fontWeight:700, color:'var(--text-3)', textTransform:'uppercase', letterSpacing:'0.1em' }}>Por medio de pago</div>
            {byAccount.map(a => (
              <div key={a.label} style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <span style={{ fontSize:12.5, color:'var(--text-2)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', maxWidth:140 }}>{a.label}</span>
                <span style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:13, fontWeight:600, fontVariantNumeric:'tabular-nums', color:'var(--text)', flexShrink:0 }}>{fmt(a.total)}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>

    {deleteEntry && window.DeleteConfirmModal && React.createElement(window.DeleteConfirmModal, {
      entry: deleteEntry,
      onConfirm: () => { onDeleteMov?.(deleteEntry.id); setDeleteEntry(null); },
      onCancel:  () => setDeleteEntry(null),
    })}
  </>
  );
}


// ── PagosDesktop ─────────────────────────────────────────────────────────────
function PagosDesktop({ ccy, paidPagos, onTogglePaid, collectedDeudores, onMarkCollected, extraPagos, extraDeudores, tarjetasState }) {
  if (!d2seed || !d2S_) return <div style={{padding:32,color:'var(--text-3)'}}>Cargando...</div>;
  const { debts = [] } = useStore2();
  const conv = n => ccy === 'USD' ? n / d2seed.fxBlue : n;
  const fmt  = n => d2S_.fmtMoney(conv(n), ccy);

  const paid      = paidPagos || new Set();
  const collected = collectedDeudores || new Set();
  const allPagos  = [...(d2seed.pagos || []), ...(extraPagos || [])];
  const allDeudores = [
    ...(d2seed.deudores || []),
    ...(extraDeudores || []),
    ...debts.map(d => ({ id:d.id, name:d.name, amount:d.amount, due:d.due, note:d.note, isSplit:d.isSplit, splitOf:d.splitOf }))
  ];

  const pending  = allPagos.filter(p => !paid.has(p.id)).sort((a,b) => new Date(a.due||'9999') - new Date(b.due||'9999'));
  const done     = allPagos.filter(p => paid.has(p.id));
  const pendDeu  = allDeudores.filter(d => !collected.has(d.id));
  const doneDeu  = allDeudores.filter(d => collected.has(d.id));
  const totalPagar  = pending.reduce((a,p) => a + p.amount, 0);
  const totalCobrar = pendDeu.reduce((a,d) => a + d.amount, 0);

  function PagoRow({ p }) {
    const ds = d2S_.dueState(p.due || '');
    const dl = d2S_.dueLabel(p.due || '');
    const isUrgent = ds === 'urgent' || ds === 'late';
    const cat = d2seed.catPorId[p.cat];
    return (
      <div style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 16px', borderRadius:12, background:'rgba(255,255,255,0.025)', border:`1px solid ${isUrgent ? 'rgba(248,113,113,0.25)' : 'var(--border)'}` }}>
        {window.CatChip && <window.CatChip cat={cat} size={36} />}
        <div style={{ flex:1 }}>
          <div style={{ fontSize:13.5, fontWeight:500 }}>{p.name}</div>
          <div style={{ fontSize:11, marginTop:2, color: isUrgent ? '#f87171' : ds==='warn' ? '#fbbf24' : 'var(--text-3)', fontWeight: isUrgent ? 700 : 400, textTransform:'uppercase', letterSpacing:'0.06em' }}>{dl}</div>
        </div>
        <div style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:15, fontWeight:600, fontVariantNumeric:'tabular-nums' }}>{fmt(p.amount)}</div>
        <button onClick={() => onTogglePaid(p.id)} style={{ padding:'7px 16px', borderRadius:9, background:'var(--accent-dim)', border:'1px solid var(--border-strong)', color:'var(--accent-bright)', cursor:'pointer', fontFamily:'inherit', fontSize:12.5, fontWeight:600 }}>Pagar</button>
      </div>
    );
  }

  function DeuRow({ d }) {
    const ds = d2S_.dueState(d.due || '');
    const dl = d2S_.dueLabel(d.due || '');
    return (
      <div style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 16px', borderRadius:12, background:'rgba(255,255,255,0.025)', border:'1px solid var(--border)' }}>
        <div style={{ width:36, height:36, borderRadius:'50%', background: d.isSplit ? 'rgba(74,222,128,0.15)' : 'linear-gradient(145deg, var(--accent-bright), var(--accent-deep))', color: d.isSplit ? '#4ade80' : 'var(--on-accent)', fontWeight:700, fontSize:15, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
          {d.isSplit ? <D2Icon name="swap" size={16} /> : (d.name||'?').charAt(0).toUpperCase()}
        </div>
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ display:'flex', alignItems:'center', gap:7 }}>
            <span style={{ fontSize:13.5, fontWeight:600 }}>{d.name}</span>
            {d.isSplit && <span style={{ fontSize:9, fontWeight:800, padding:'1px 6px', borderRadius:999, background:'rgba(74,222,128,0.15)', color:'#4ade80' }}>SPLIT</span>}
          </div>
          {d.splitOf && <div style={{ fontSize:11, color:'rgba(74,222,128,0.7)', marginTop:1, fontStyle:'italic' }}>↳ {d.splitOf}</div>}
          <div style={{ fontSize:11, color:'var(--text-3)', marginTop: d.splitOf ? 1 : 2 }}>{dl}</div>
        </div>
        <div style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:15, fontWeight:600, fontVariantNumeric:'tabular-nums', color:'var(--text)' }}>
          <span style={{ color:'#4ade80', marginRight:2 }}>$</span>{new Intl.NumberFormat('es-AR').format(Math.round(Math.abs(d.amount)))}
        </div>
        <button onClick={() => onMarkCollected(d.id)} style={{ padding:'7px 16px', borderRadius:9, background:'rgba(74,222,128,0.12)', border:'1px solid rgba(74,222,128,0.25)', color:'#4ade80', cursor:'pointer', fontFamily:'inherit', fontSize:12.5, fontWeight:700 }}>Cobrar</button>
      </div>
    );
  }

  const kards = [
    { label:'TOTAL A PAGAR', value:totalPagar, count:pending.length, sub:'vencimientos pendientes', icon:'calendar', color:'#f87171' },
    { label:'TOTAL A COBRAR', value:totalCobrar, count:pendDeu.length, sub:'personas te deben', icon:'users', color:'#4ade80' },
  ];

  return (
    <div style={{ padding:'28px 28px 44px', maxWidth:1280, margin:'0 auto' }}>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, marginBottom:24 }}>
        {kards.map(k => (
          <div key={k.label} style={{ padding:'20px 24px', borderRadius:16, background:'var(--card)', border:'1px solid var(--border)' }}>
            <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:10 }}>
              <div style={{ width:32, height:32, borderRadius:9, background: k.color==='#f87171' ? 'rgba(248,113,113,0.12)' : 'rgba(74,222,128,0.12)', display:'flex', alignItems:'center', justifyContent:'center', color:k.color }}>
                <D2Icon name={k.icon} size={15} />
              </div>
              <span style={{ fontSize:10, textTransform:'uppercase', letterSpacing:'0.12em', fontWeight:700, color:'var(--text-3)' }}>{k.label}</span>
            </div>
            <div style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:36, fontWeight:700, fontVariantNumeric:'tabular-nums', letterSpacing:'-0.03em', color:'var(--text)' }}>
              <span style={{ color:k.color, marginRight:2 }}>$</span>{new Intl.NumberFormat('es-AR').format(Math.round(Math.abs(k.value)))}
            </div>
            <div style={{ fontSize:12.5, color:'var(--text-3)', marginTop:6 }}>{k.count} {k.sub}</div>
          </div>
        ))}
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:20 }}>
        <D2Panel title="Por pagar" sub="Próximos 30 días">
          <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
            {pending.length === 0
              ? <div style={{ textAlign:'center', padding:'32px 0', color:'var(--text-3)', fontSize:13 }}>Sin pagos pendientes ✓</div>
              : pending.map(p => <PagoRow key={p.id} p={p} />)
            }
            {done.map(p => (
              <div key={p.id} style={{ display:'flex', alignItems:'center', gap:12, padding:'10px 14px', borderRadius:10, opacity:0.55 }}>
                <D2Icon name="check" size={14} style={{ color:'#4ade80', flexShrink:0 }} />
                <span style={{ flex:1, fontSize:13, textDecoration:'line-through', color:'var(--text-3)' }}>{p.name}</span>
                <span style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:13, color:'var(--text-3)', fontVariantNumeric:'tabular-nums' }}>{fmt(p.amount)}</span>
              </div>
            ))}
          </div>
        </D2Panel>
        <D2Panel title="Te deben" sub="Deudores y fechas límite">
          <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
            {pendDeu.length === 0
              ? <div style={{ textAlign:'center', padding:'32px 0', color:'var(--text-3)', fontSize:13 }}>Nadie te debe nada 🎉</div>
              : pendDeu.map(d => <DeuRow key={d.id} d={d} />)
            }
            {doneDeu.map(d => (
              <div key={d.id} style={{ display:'flex', alignItems:'center', gap:12, padding:'10px 14px', borderRadius:10, opacity:0.55 }}>
                <D2Icon name="check" size={14} style={{ color:'#4ade80', flexShrink:0 }} />
                <span style={{ flex:1, fontSize:13, textDecoration:'line-through', color:'var(--text-3)' }}>{d.name}</span>
                <span style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:13, color:'var(--text-3)', fontVariantNumeric:'tabular-nums' }}>{fmt(d.amount)}</span>
              </div>
            ))}
          </div>
        </D2Panel>
      </div>
    </div>
  );
}

// ── AnalisisDesktop ───────────────────────────────────────────────────────────
function AnalisisDesktop({ ccy, spentState, budgets, onBudgetsChange }) {
  if (!d2seed || !d2S_) return <div style={{padding:32,color:'var(--text-3)'}}>Cargando...</div>;
  const { movs: sisMovs = [] } = useStore2();
  const conv = n => ccy === 'USD' ? n / d2seed.fxBlue : n;
  const fmt  = n => d2S_.fmtMoney(conv(n), ccy);

  const computedSpent = d2M(() => {
    const NS = 'sisyphus.v1.';
    let stored = [];
    try { stored = JSON.parse(localStorage.getItem(NS + 'movimientos') || '[]'); } catch(e) {}
    const seenIds = new Set(stored.map(m => m.id));
    const all = [...stored, ...sisMovs.filter(m => !seenIds.has(m.id))];
    const acc = {};
    all.forEach(m => {
      if (m.kind === 'ingreso' || !m.cat) return;
      acc[m.cat] = (acc[m.cat] || 0) + Math.abs(m.amount || 0);
    });
    return acc;
  }, [sisMovs]);

  const propTotal     = Object.values(spentState || {}).reduce((a,b) => a+(b||0), 0);
  const computedTotal = Object.values(computedSpent).reduce((a,b) => a+(b||0), 0);
  const effectiveSpent = computedTotal >= propTotal ? computedSpent : spentState || {};
  const dist     = d2S_.distribucion(effectiveSpent, budgets);
  const totalEgr = dist.filter(d => !['ahorroUSD','inversion','emergencia'].includes(d.id))
                       .reduce((a,b) => a + b.spent, 0);

  const DonutPane   = window.DonutPane;
  const TrendPane   = window.TrendPane;
  const FXPane      = window.FXPane;
  const SlidersPane = window.SlidersPane;

  return (
    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, padding:'28px 28px 44px', maxWidth:1280, margin:'0 auto', alignItems:'start' }}>
      <div style={{ display:'flex', flexDirection:'column', gap:20 }}>
        <D2Panel title="Distribución del gasto" sub="Por grupo · mes corriente">
          {DonutPane && <DonutPane dist={dist} totalEgr={totalEgr} ccy={ccy} isDesktop={false} />}
        </D2Panel>
        <D2Panel title="Cambio ARS · USD" sub={`Blue $${d2seed.fxBlue}`}>
          {FXPane && <FXPane />}
        </D2Panel>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:20 }}>
        <D2Panel title="Histórico" sub="Últimos 6 meses · ingresos vs egresos">
          {TrendPane && <TrendPane ccy={ccy} />}
        </D2Panel>
        <D2Panel title="Presupuesto" sub="Arrastrá para reasignar por categoría">
          {SlidersPane && <SlidersPane ccy={ccy} spentState={spentState} budgets={budgets} onBudgetsChange={onBudgetsChange || (() => {})} />}
        </D2Panel>
      </div>
    </div>
  );
}

window.MovDesktop     = MovDesktop;
window.PagosDesktop   = PagosDesktop;
window.AnalisisDesktop = AnalisisDesktop;