// ========== Helpers compartilhados ==========
const fmtBRL = (cents, opts = {}) => {
  const v = cents / 100;
  const s = v.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  if (opts.noPrefix) return s;
  if (opts.split) {
    const [int, dec] = s.split(',');
    return { int, dec };
  }
  return 'R$ ' + s;
};
const fmtBRLShort = (cents) => {
  const v = cents / 100;
  if (Math.abs(v) >= 1000) return 'R$ ' + (v / 1000).toFixed(1).replace('.', ',') + 'k';
  return 'R$ ' + v.toFixed(0);
};
const pct      = (n) => (n * 100).toFixed(0) + '%';
const pctFine  = (n) => (n * 100).toFixed(1).replace('.', ',') + '%';

const MONTH_NAMES_PT = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];
const WEEKDAY_PT = ['domingo','segunda','terça','quarta','quinta','sexta','sábado'];

const fmtDate = (iso) => {
  const [y, m, d] = iso.split('-').map(Number);
  return `${String(d).padStart(2,'0')}/${String(m).padStart(2,'0')}`;
};
const fmtDateLong = (iso) => {
  const [y, m, d] = iso.split('-').map(Number);
  const date = new Date(y, m-1, d);
  return `${WEEKDAY_PT[date.getDay()]}, ${d} de ${MONTH_NAMES_PT[m-1].toLowerCase()}`;
};
const isoToday = () => new Date().toISOString().slice(0, 10);

function Avatar({ user, size = '', className = '' }) {
  if (!user) return null;
  const cls = user.name === 'Bruno' ? 'bruno' : 'hellen';
  return <div className={`avatar ${cls} ${size} ${className}`}>{user.initial}</div>;
}

function Icon({ name, size = 18 }) {
  const paths = {
    home:      'M3 11.5L12 4l9 7.5V20a1 1 0 01-1 1h-5v-6h-6v6H4a1 1 0 01-1-1v-8.5z',
    list:      'M4 6h16M4 12h16M4 18h10',
    chart:     'M4 20V10M10 20V4M16 20v-7M22 20H2',
    target:    'M12 2v4M12 18v4M2 12h4M18 12h4 M12 8a4 4 0 100 8 4 4 0 000-8z',
    repeat:    'M17 1l4 4-4 4 M3 11V9a4 4 0 014-4h14 M7 23l-4-4 4-4 M21 13v2a4 4 0 01-4 4H3',
    plus:      'M12 5v14M5 12h14',
    settings:  'M12 15a3 3 0 100-6 3 3 0 000 6z M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09a1.65 1.65 0 00-1.08-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 8.91a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z',
    wallet:    'M20 12V8H6a2 2 0 010-4h14v4 M20 12v4H6a2 2 0 00-2 2V6a2 2 0 012-2 M16 12h4',
    arrowUp:   'M12 19V5M5 12l7-7 7 7',
    arrowDown: 'M12 5v14M5 12l7 7 7-7',
    trend:     'M23 6l-9.5 9.5-5-5L1 18',
    check:     'M20 6L9 17l-5-5',
    link:      'M10 14a5 5 0 007.07 0l4-4a5 5 0 00-7.07-7.07l-1 1 M14 10a5 5 0 00-7.07 0l-4 4a5 5 0 007.07 7.07l1-1',
    x:         'M18 6L6 18M6 6l12 12',
    calendar:  'M3 9h18M3 5h18v16H3z M8 3v4M16 3v4',
    eye:       'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z M12 15a3 3 0 100-6 3 3 0 000 6z',
    sparkles:  'M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8',
    edit:      'M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7 M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z',
    trash:     'M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6',
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d={paths[name] || paths.home} />
    </svg>
  );
}

function Sparkline({ data, color = 'currentColor', width = 120, height = 44, fill = true }) {
  if (!data || data.length < 2) return null;
  const min = Math.min(...data);
  const max = Math.max(...data);
  const range = max - min || 1;
  const points = data.map((v, i) => {
    const x = (i / (data.length - 1)) * width;
    const y = height - ((v - min) / range) * (height - 4) - 2;
    return [x, y];
  });
  const path = points.map(([x,y], i) => (i === 0 ? `M ${x} ${y}` : `L ${x} ${y}`)).join(' ');
  const area = `${path} L ${width} ${height} L 0 ${height} Z`;
  return (
    <svg className="kpi-spark" width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
      {fill && <path d={area} fill={color} opacity="0.12" />}
      <path d={path} fill="none" stroke={color} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function TagPill({ tag }) {
  if (!tag) return null;
  const bg = `color-mix(in oklch, ${tag.color} 14%, white)`;
  const fg = `color-mix(in oklch, ${tag.color} 70%, black)`;
  return (
    <span className="tag-pill" style={{ background: bg, color: fg }}>
      <span className="dot" style={{ background: tag.color }} />
      {tag.name}
    </span>
  );
}

function Currency({ cents }) {
  const { int, dec } = fmtBRL(cents, { split: true });
  return (
    <span className="display num" style={{ whiteSpace: 'nowrap' }}>
      <span style={{ fontFamily: 'var(--f-ui)', fontWeight: 500, fontSize: '0.45em', color: 'var(--text-mute)', marginRight: 4 }}>R$</span>
      {int}
      <span style={{ color: 'var(--text-dim)', fontSize: '0.6em' }}>,{dec}</span>
    </span>
  );
}

window.FinUtils = {
  fmtBRL, fmtBRLShort, pct, pctFine, fmtDate, fmtDateLong, isoToday,
  MONTH_NAMES_PT, WEEKDAY_PT,
  Avatar, Icon, Sparkline, TagPill, Currency,
};