// All UI components for the dashboard
// Loaded as global components.

const { useState, useMemo, useEffect, useRef } = React;

// ---------- TOP NAV (header único: etapas + progresso + fechamento) ----------
function TopNav({ active, setActive, onRelatorio, appState, onOpenFechamento }) {
  const etapas = [
    { id: "familia", label: "Família", icon: "👨‍👩‍👧‍👦" },
    { id: "orcamento", label: "Orçamento", icon: "💳" },
    { id: "patrimonio", label: "Patrimônio", icon: "📊" },
    { id: "reserva", label: "Reserva", icon: "💸" },
    { id: "imoveis", label: "Imóveis", icon: "🏘️" },
    { id: "automoveis", label: "Automóveis", icon: "🚗" },
    { id: "protecao", label: "Proteção", icon: "🛡️" },
    { id: "irpf", label: "IRPF", icon: "🧾" },
    { id: "aposentadoria", label: "Aposentadoria", icon: "🌴" },
  ];
  const extras = [];
  const done = etapas.map(e => window.etapaAutoDone ? window.etapaAutoDone(e.id, appState) : false);
  const concluidas = done.filter(Boolean).length;
  const pct = Math.round((concluidas / etapas.length) * 100);
  const fech = window.calcFechamento ? window.calcFechamento(appState.fechamento) : null;

  const Tab = ({ t, num, isDone }) => (
    <button
      className={`tn-tab ${active === t.id ? "active" : ""} ${num && !isDone ? "pend" : ""}`}
      onClick={() => setActive(t.id)}
      title={(num ? `${num}. ` : "") + t.label + (num ? (isDone ? " — preenchida" : " — pendente") : "")}>
      <span className="tn-tab-icon">{t.icon}</span><span className="tn-tab-label">{t.label}</span>
    </button>
  );

  return (
    <div className="topnav tn-dark" data-screen-label="Header">
      <div className="tn-row">
        <div className="brand">
          <div className="brand-mark">⚜️</div>
          <div className="brand-name">LRfin</div>
        </div>
        <nav className="topnav-tabs">
          <Tab t={{ id: "overview", label: "Visão Geral", icon: "🧭" }}/>
          {etapas.map((t, i) => <Tab key={t.id} t={t} num={i + 1} isDone={done[i]}/>)}
          {extras.map(t => <Tab key={t.id} t={t}/>)}
        </nav>
        <div className="topnav-actions">
          <button className={`btn-relatorio ${active === "relatorio" ? "active" : ""}`} onClick={onRelatorio} title="Gerar relatório">
            📄 Relatório
          </button>
          <button className={`circle-btn ${active === "config" ? "active" : ""}`} title="Configurações" onClick={() => setActive("config")}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 01-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 01-4 0v-.1A1.7 1.7 0 009 19.4a1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 01-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 010-4h.1A1.7 1.7 0 004.6 9 1.7 1.7 0 004.3 7.2l-.1-.1a2 2 0 012.8-2.8l.1.1a1.7 1.7 0 001.8.3H9a1.7 1.7 0 001-1.5V3a2 2 0 014 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 012.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8V9a1.7 1.7 0 001.5 1H21a2 2 0 010 4h-.1a1.7 1.7 0 00-1.5 1z"/></svg>
          </button>
          <button className={`circle-btn ${active === "help" ? "active" : ""}`} title="Ajuda" onClick={() => setActive("help")}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 015.8 1c0 2-3 3-3 3M12 17h.01"/></svg>
          </button>
        </div>
      </div>
      <div className="tn-progrow">
        <div className="tn-track"><div className="tn-fill" style={{ width: pct + "%" }}></div></div>
        <span className="tn-progmeta"><strong>{concluidas}/{etapas.length}</strong> etapas preenchidas</span>
        {fech && (
          <button className={`sb-pend ${fech.entregue ? "ok" : fech.atrasado ? "late" : ""}`} onClick={onRelatorio} title="Prestação de contas mensal — abrir relatório">
            <span className="sb-pend-dot"></span>
            <span className="sb-pend-txt">
              {fech.entregue ? `${fech.refLabel} entregue` : `Prestar contas de ${fech.refLabel}`}
              <em>{fech.entregue ? "ver histórico" : fech.atrasado ? `venceu ${fech.vencLabel}` : `vence ${fech.vencLabel}`}</em>
            </span>
          </button>
        )}
      </div>
    </div>
  );
}

// ---------- RIGHT PANEL (guia de saúde financeira por etapa) ----------
function guiaEtapa(view, plano, appState) {
  const money = v => window.fmtBRLString(Math.max(0, v)).replace(",00", "");
  const g = plano.gastos;
  const inc = plano.income;
  const aporte10 = inc * 0.10;
  const seguros = (appState?.seguros || []).length;
  switch (view) {
    case "familia":
      return { icon: "👨‍👩‍👧‍👦", titulo: "Família e objetivos", texto: "Estrutura familiar e objetivos definem o tamanho dos 3 baldes de 10% (caridade, capital ativo e passivo). Comece por aqui." };
    case "orcamento":
      return inc <= 0
        ? { icon: "💳", titulo: "Orçamento", texto: "Lance a receita do mês para ativar a regra 70·10·10·10: 70% é o teto de gastos, 30% viram caridade e capital." }
        : g.over
          ? { icon: "🚨", titulo: "Gastos acima dos 70%", texto: `Corte ${money(g.redutivelPendente)} nos ✂️ redutíveis ainda não validados para voltar ao teto de ${money(g.target)}. Depois valide tudo e feche o mês.` }
          : { icon: "✅", titulo: "Dentro dos 70%", texto: `Folga de ${money(g.target - g.used)} no teto. Valide os lançamentos e feche o balanço do mês para consolidar.` };
    case "patrimonio":
      return { icon: "📊", titulo: "Patrimônio", texto: inc > 0 ? `Os 10% de Capital Passivo (${money(aporte10)}/mês) são o motor deste patrimônio. Constância vale mais que valor.` : "O patrimônio cresce com os 10% de Capital Passivo aportados todo mês." };
    case "protecao":
      return seguros > 0
        ? { icon: "🛡️", titulo: "Proteção", texto: "Prêmios de seguro entram como classe Proteção dentro dos 70% de gastos — fixos e não redutíveis. Revise coberturas 1x ao ano." }
        : { icon: "🛡️", titulo: "Sem proteção cadastrada", texto: "Antes de acelerar os 10% de investimento, proteja a renda: seguros cabem nos 70% como gasto fixo essencial." };
  case "reserva": return { icon: "💸", titulo: "Reserva de emergência", texto: inc > 0 ? `Direcione os 10% de Capital Passivo (${money(aporte10)}/mês) para a reserva até completar o alvo — só depois migre para investimentos de longo prazo.` : "A reserva vem antes dos investimentos: é o primeiro destino dos 10% de Capital Passivo." };
    case "aposentadoria":
      return { icon: "🌴", titulo: "Independência", texto: inc > 0 ? `Mantidos os 10% (${money(aporte10)}/mês) aportados sem falha, a projeção de capital se sustenta. O teto de 70% é o que garante o aporte.` : "A aposentadoria é financiada pelos 10% de Capital Passivo — que só existem se os gastos respeitarem os 70%." };
    case "imoveis":
    case "automoveis":
      return { icon: "🏘️", titulo: "Bens de uso", texto: "Custos de imóveis e veículos (financiamento, IPVA, manutenção) são gastos fixos — precisam caber dentro dos 70%." };
    case "irpf":
      return { icon: "🧾", titulo: "IRPF", texto: "Previdência dedutível e doações incentivadas fazem os baldes de 10% renderem também no imposto." };
    default:
      return inc > 0 && g.over
        ? { icon: "🧭", titulo: "Próximo passo", texto: `Seus gastos passaram do teto de 70% em ${money(g.overBy)}. Vá ao Orçamento e corte nos redutíveis.` }
        : { icon: "🧭", titulo: "Regra 70·10·10·10", texto: "Viva com 70% da receita; doe 10%; invista 10% em você (capital ativo) e 10% em ativos (capital passivo)." };
  }
}

function RightPanel({ user, plano, monthLabel, onGoTo, monthKey, planoCheck, onSavePlanoCheck, view, appState }) {
  const { income, buckets, gastos } = plano;
  const onTrack = income > 0 && !gastos.over;
  const guia = guiaEtapa(view, plano, appState);
  const money = v => window.fmtBRLString(Math.max(0, v)).replace(",00", "");
  const checks = (planoCheck && planoCheck[monthKey]) || {};
  const [editing, setEditing] = useState(null); // bucket key aberto para edição
  const [note, setNote] = useState("");

  function openEditor(key) {
    const cur = checks[key] || {};
    setNote(cur.nota || "");
    setEditing(e => (e === key ? null : key));
  }
  function saveNote(key) {
    onSavePlanoCheck(monthKey, key, { nota: note });
    setEditing(null);
  }

  return (
    <aside className="right-panel" data-screen-label="Painel do plano">
      <div className="rp-user">
        <div className="rp-avatar">{(user.name || "L")[0]}</div>
        <div>
          <div className="rp-name">{user.name}</div>
          <div className="rp-role">Plano 70·10·10·10 · {monthLabel}</div>
        </div>
      </div>

      <div className="rp-guia" data-screen-label="Guia da etapa">
        <div className="rp-guia-head"><span>{guia.icon}</span> {guia.titulo}</div>
        <p className="rp-guia-texto">{guia.texto}</p>
      </div>

      {income > 0 ? (
        <>
          <button className={`rp-status ${onTrack ? "ok" : "bad"}`} onClick={() => onGoTo("orcamento")}>
            <span className="rp-status-icon">{onTrack ? "✅" : "🚨"}</span>
            <span>
              <span className="rp-status-label">{onTrack ? "No caminho certo" : "Fora do caminho"}</span>
              <span className="rp-status-sub">
                {onTrack
                  ? `Gastos com folga de ${money(gastos.target - gastos.used)} no teto de 70%`
                  : `${money(gastos.overBy)} acima do teto de 70% — corte ${money(gastos.redutivelPendente)} em redutíveis`}
              </span>
            </span>
          </button>

          <div className="rp-stats">
            <div className="rp-stat"><span>Validado</span><strong>{money(gastos.gastosPago)}</strong></div>
            <div className="rp-stat"><span>A validar</span><strong>{money(gastos.gastosPendente)}</strong></div>
            <div className="rp-stat"><span>Redutível</span><strong>{money(gastos.gastosRedutivel)}</strong></div>
          </div>

          <div className="rp-title">Baldes do mês <span className="rp-title-hint">· cumprido pelos valores lançados</span></div>
          {buckets.filter(b => b.key !== "gastos").map(b => {
            const pctNum = b.target > 0 ? Math.round((b.used / b.target) * 100) : 0;
            const chk = checks[b.key] || {};
            const isOpen = editing === b.key;
            const cumprido = b.target > 0 && b.used >= b.target - 0.5;
            const falta = Math.max(0, b.target - b.used);
            return (
              <div className={`rp-bucket-wrap ${cumprido ? "is-done" : ""}`} key={b.key}>
                <div className="rp-bucket">
                  <button className="rp-bucket-info" onClick={() => openEditor(b.key)}>
                    <span className="rp-bucket-label">{b.icon} {b.label} · {Math.round(b.pct * 100)}%</span>
                    <span className="rp-bucket-nums">{money(b.used)} de {money(b.target)}</span>
                    <span className="rp-bucket-bar"><div className={b.over ? "over" : ""} style={{width: Math.min(pctNum, 100) + "%"}}/></span>
                    <span className={`rp-bucket-state ${cumprido ? "done" : "pend"}`}>{cumprido ? "✓ Cumprido" : `Faltam ${money(falta)}`}{chk.nota ? ` · ${chk.nota}` : ""}</span>
                  </button>
                </div>
                {isOpen && (
                  <div className="rp-bucket-editor">
                    <label>Observação do mês (opcional)</label>
                    <textarea value={note} onChange={e => setNote(e.target.value)} placeholder={`Ex.: ${b.label === "Caridade" ? "Dízimo à igreja, doação X" : b.label === "Capital Ativo" ? "Curso, projeto pessoal" : "Aporte no fundo Y"}`} rows={2}/>
                    <div className="rp-editor-actions">
                      <button className="rp-editor-btn ghost" onClick={() => setEditing(null)}>Cancelar</button>
                      <button className="rp-editor-btn" onClick={() => saveNote(b.key)}>Salvar</button>
                    </div>
                  </div>
                )}
              </div>
            );
          })}
        </>
      ) : (
        <div className="rp-status ok" style={{cursor:"default"}}>
          <span className="rp-status-icon">💤</span>
          <span>
            <span className="rp-status-label">Sem receita neste mês</span>
            <span className="rp-status-sub">Lance uma receita para ativar o plano</span>
          </span>
        </div>
      )}

      <AIAssistant/>
    </aside>
  );
}

// ---------- AI ASSISTANT ----------
function AIAssistant() {
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState("");
  const [busy, setBusy] = useState(false);
  const [answer, setAnswer] = useState("");

  async function ask(question) {
    if (!question.trim()) return;
    setBusy(true); setAnswer(""); setOpen(true);
    try {
      const ctx = window.__appContext?.();
      const prompt = `Você é um assistente financeiro pessoal. Responda em português, de forma direta e prática, em no máximo 3 frases.\n\nDados do usuário (resumo):\n${JSON.stringify(ctx, null, 2)}\n\nPergunta: ${question}`;
      const res = await window.claude.complete(prompt);
      setAnswer(res);
    } catch (e) {
      setAnswer("Não consegui responder agora. Tente novamente.");
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className={`ai-assistant ${open ? "open" : ""}`}>
      <div className="ai-head">
        <span className="ai-dot"/>
        <span>Assistente IA</span>
      </div>
      {open && answer && (
        <div className="ai-answer">{busy ? "Pensando…" : answer}</div>
      )}
      <form className="ai-form" onSubmit={e => { e.preventDefault(); ask(q); setQ(""); }}>
        <input
          value={q}
          onChange={e => setQ(e.target.value)}
          placeholder="Pergunte sobre suas finanças…"
          disabled={busy}
        />
        <button type="submit" disabled={busy || !q.trim()}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M5 12l14-7-7 14-2-5z"/>
          </svg>
        </button>
      </form>
      <div className="ai-chips">
        <button onClick={() => ask("Onde posso cortar gastos esse mês?")}>Cortar gastos</button>
        <button onClick={() => ask("Como quitar minhas dívidas mais rápido?")}>Quitar dívidas</button>
      </div>
    </div>
  );
}

// ---------- CLIENT SWITCHER (múltiplos planejamentos) ----------
function ClientSwitcher({ clients, activeClient, onSwitch, onCreate, onRename, onDelete }) {
  const [open, setOpen] = useState(false);
  const [creating, setCreating] = useState(false);
  const [newName, setNewName] = useState("");
  const [copyChecked, setCopyChecked] = useState(false);
  const [renamingId, setRenamingId] = useState(null);
  const [renameVal, setRenameVal] = useState("");
  const ref = useRef(null);

  useEffect(() => {
    function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) { setOpen(false); setCreating(false); setRenamingId(null); } }
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);

  const active = clients.find(c => c.id === activeClient) || clients[0];
  const initial = (active?.name || "?").trim().charAt(0).toUpperCase();

  function submitCreate(e) {
    e.preventDefault();
    onCreate(newName, copyChecked ? activeClient : null);
    setNewName(""); setCopyChecked(false); setCreating(false); setOpen(false);
  }
  function submitRename(e, id) {
    e.preventDefault();
    onRename(id, renameVal);
    setRenamingId(null);
  }

  return (
    <div className="client-switcher" ref={ref}>
      <button className="cs-trigger" onClick={() => setOpen(o => !o)} title="Trocar planejamento">
        <span className="cs-avatar">{initial}</span>
        <span className="cs-name">{active?.name}</span>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
      </button>
      {open && (
        <div className="cs-menu">
          <div className="cs-menu-head">Planejamentos</div>
          <div className="cs-list">
            {clients.map(c => (
              <div key={c.id} className={`cs-item ${c.id === activeClient ? "active" : ""}`}>
                {renamingId === c.id ? (
                  <form className="cs-rename" onSubmit={e => submitRename(e, c.id)}>
                    <input autoFocus value={renameVal} onChange={e => setRenameVal(e.target.value)}/>
                    <button type="submit" className="cs-mini">OK</button>
                  </form>
                ) : (<>
                  <button className="cs-item-main" onClick={() => { onSwitch(c.id); setOpen(false); }}>
                    <span className="cs-avatar sm">{(c.name||"?").charAt(0).toUpperCase()}</span>
                    <span className="cs-item-name">{c.name}</span>
                    {c.id === activeClient && <span className="cs-check">✓</span>}
                  </button>
                  <button className="cs-icon" title="Renomear" onClick={() => { setRenamingId(c.id); setRenameVal(c.name); }}>✎</button>
                  {clients.length > 1 && (
                    <button className="cs-icon danger" title="Excluir" onClick={() => { if (confirm(`Excluir o planejamento de ${c.name}?`)) onDelete(c.id); }}>✕</button>
                  )}
                </>)}
              </div>
            ))}
          </div>
          {creating ? (
            <form className="cs-create" onSubmit={submitCreate}>
              <input autoFocus placeholder="Nome do cliente" value={newName} onChange={e => setNewName(e.target.value)}/>
              <label className="cs-copy"><input type="checkbox" checked={copyChecked} onChange={e => setCopyChecked(e.target.checked)}/><span>Copiar dados do atual</span></label>
              <div className="cs-create-actions">
                <button type="button" className="cs-mini ghost" onClick={() => setCreating(false)}>Cancelar</button>
                <button type="submit" className="cs-mini">Criar</button>
              </div>
            </form>
          ) : (
            <button className="cs-new" onClick={() => setCreating(true)}>＋ Novo planejamento</button>
          )}
        </div>
      )}
    </div>
  );
}

// ---------- TOP HEADER ----------
function TopHeader({ user, month, year, onChangeMonth, account, onLogout, clients, activeClient, onSwitchClient, onCreateClient, onRenameClient, onDeleteClient }) {
  const hour = new Date().getHours();
  const saudacao = hour < 12 ? "Bom dia" : hour < 18 ? "Boa tarde" : "Boa noite";
  return (
    <div className="top-header">
      <div className="welcome">
        <div>
          <div className="welcome-title">{saudacao}, {user.name} <span className="wave">👋</span></div>
          <div className="welcome-sub">Visão financeira de {window.MESES_FULL[month]} de {year}</div>
        </div>
      </div>
      <div className="top-actions">
        {clients && (
          <ClientSwitcher
            clients={clients} activeClient={activeClient}
            onSwitch={onSwitchClient} onCreate={onCreateClient}
            onRename={onRenameClient} onDelete={onDeleteClient}
          />
        )}
        {account && (
          <div className="account-chip" title={account.email}>
            <span className="cs-avatar">{(account.name || "?").charAt(0).toUpperCase()}</span>
            <span className="account-info"><strong>{account.name}</strong><small>{account.email}</small></span>
            <button className="btn-logout" onClick={onLogout} title="Sair da conta">Sair</button>
          </div>
        )}
        <MonthPicker month={month} year={year} onChange={onChangeMonth}/>
      </div>
    </div>
  );
}

function MonthPicker({ month, year, onChange }) {
  return (
    <div className="month-picker">
      <button onClick={() => onChange(month - 1, year)} className="mp-btn">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6"/></svg>
      </button>
      <span className="mp-label">{window.MESES_FULL[month]} {year}</span>
      <button onClick={() => onChange(month + 1, year)} className="mp-btn">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 18l6-6-6-6"/></svg>
      </button>
    </div>
  );
}

// ---------- METRIC CARDS ----------
function MetricCards({ saldoTotal, deltaSaldo, monthIncome, deltaIncome, monthExpense, deltaExpense, monthSavings, deltaSavings, onGoTo }) {
  const nav = dest => onGoTo ? window.cardNav(() => onGoTo(dest)) : undefined;
  const small = (label, sub, value, delta, dir, icon, bg, dest, destLabel) => {
    const isPositive = dir === "up";
    return (
      <div className="metric-card clickable" onClick={nav(dest)} title={destLabel}>
        <div className="mc-head">
          <span className={`mc-icon ${bg}`}>{icon}</span>
          <span className="mc-label">{label}<small className="mc-sub">{sub}</small></span>
        </div>
        <Amount value={value}/>
        <div className="mc-foot">
          <span className={`pill ${isPositive ? "pill-up" : "pill-down"}`}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
              {isPositive ? <path d="M7 17L17 7M17 7H8M17 7v9"/> : <path d="M7 7l10 10M17 17H8M17 17V8"/>}
            </svg>
            {delta > 0 ? "+" : ""}{delta.toFixed(1)}%
          </span>
          <span className="mc-foot-text">vs mês anterior</span>
        </div>
      </div>
    );
  };

  return (
    <div className="metrics-row">
      <div className="metric-card big clickable" onClick={nav("patrimonio")} title="Ver Patrimônio Líquido">
        <div className="mc-head">
          <span className="mc-label-light">Saldo Total</span>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" opacity="0.6">
            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z"/><circle cx="12" cy="12" r="3"/>
          </svg>
        </div>
        <Amount value={saldoTotal} big light/>
        <div className="mc-foot">
          <span className={`pill ${deltaSaldo >= 0 ? "pill-up" : "pill-down"}`}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
              {deltaSaldo >= 0 ? <path d="M7 17L17 7M17 7H8M17 7v9"/> : <path d="M7 7l10 10M17 17H8M17 17V8"/>}
            </svg>
            {deltaSaldo > 0 ? "+" : ""}{deltaSaldo.toFixed(1)}%
          </span>
          <span className="mc-foot-text light">vs mês anterior</span>
        </div>
      </div>
      {small("Receita", "do mês", monthIncome, deltaIncome, deltaIncome >= 0 ? "up" : "down", <IconArrowDown/>, "bg-green", "receitas", "Ver Receitas")}
      {small("Despesa", "do mês", monthExpense, deltaExpense, deltaExpense <= 0 ? "up" : "down", <IconArrowUp/>, "bg-pink", "despesas", "Ver Despesas")}
      {small("Economia", "do mês", monthSavings, deltaSavings, deltaSavings >= 0 ? "up" : "down", <IconWallet/>, "bg-green-soft", "reserva", "Ver Reserva de Emergência")}
    </div>
  );
}

function Amount({ value, big, light }) {
  const { sign, int, dec } = window.fmtBRL(value);
  return (
    <div className={`amount ${big ? "big" : ""} ${light ? "light" : ""}`}>
      <span className="a-sign">{sign}R$</span>
      <span className="a-int">{int}</span>
      <span className="a-dec">,{dec}</span>
    </div>
  );
}

// ---------- ICONS ----------
function IconHome() { return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 12l9-9 9 9"/><path d="M5 10v10h14V10"/></svg>; }
function IconList() { return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>; }
function IconIncome() { return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 19V5M5 12l7-7 7 7"/></svg>; }
function IconExpense() { return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>; }
function IconChart() { return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-7"/></svg>; }
function IconBulb() { return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 18h6M10 22h4M12 2a7 7 0 00-4 12.7c1.3 1 2 2.6 2 4.3h4c0-1.7.7-3.3 2-4.3A7 7 0 0012 2z"/></svg>; }
function IconDebt() { return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M2 9l10-6 10 6M4 9v11h16V9"/><path d="M8 14h8"/></svg>; }
function IconCard() { return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg>; }
function IconTarget() { return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>; }
function IconGear() { return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 01-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 01-4 0v-.1A1.7 1.7 0 009 19.4a1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 01-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 010-4h.1A1.7 1.7 0 004.6 9 1.7 1.7 0 004.3 7.2l-.1-.1a2 2 0 012.8-2.8l.1.1a1.7 1.7 0 001.8.3H9a1.7 1.7 0 001-1.5V3a2 2 0 014 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 012.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8V9a1.7 1.7 0 001.5 1H21a2 2 0 010 4h-.1a1.7 1.7 0 00-1.5 1z"/></svg>; }
function IconHelp() { return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 015.8 1c0 2-3 3-3 3M12 17h.01"/></svg>; }
function IconArrowDown() { return <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>; }
function IconArrowUp() { return <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M12 19V5M5 12l7-7 7 7"/></svg>; }
function IconWallet() { return <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 12V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2h14a2 2 0 002-2v-2"/><path d="M16 12h4M16 16h4"/></svg>; }

Object.assign(window, { TopNav, RightPanel, AIAssistant, TopHeader, MetricCards, Amount, MonthPicker });
