/* JRN — Mini-gráficos para o visualizador de dashboard (faux Power BI) */

function KpiCard({ label, value, delta, up, accent }) {
  return (
    <div className="card" style={{ padding: '16px 18px' }}>
      <div style={{ fontSize: 12, color: 'var(--muted)', fontWeight: 600 }}>{label}</div>
      <div style={{ fontFamily: 'var(--font-head)', fontSize: 26, fontWeight: 700, margin: '7px 0 6px', color: 'var(--ink)' }}>{value}</div>
      {delta != null && (
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 12, fontWeight: 600,
          color: up ? 'var(--ok)' : 'var(--danger)' }}>
          <span style={{ fontSize: 13 }}>{up ? '▲' : '▼'}</span>{delta}
          <span style={{ color: 'var(--muted-2)', fontWeight: 500 }}>vs. mês ant.</span>
        </div>
      )}
      <div style={{ height: 3, borderRadius: 2, marginTop: 12, background: (accent || 'var(--navy-800)') }}></div>
    </div>
  );
}

function BarChart({ data, accent = '#15233f', height = 150 }) {
  const max = Math.max(...data.map(d => d.v));
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 10, height, padding: '0 2px' }}>
      {data.map((d, i) => (
        <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 7, height: '100%', justifyContent: 'flex-end' }}>
          <div style={{ width: '100%', maxWidth: 38, borderRadius: '4px 4px 0 0', background: accent, opacity: i === data.length - 1 ? 1 : .42,
            height: (d.v / max * (height - 24)) + 'px', transition: 'height .5s ease' }}></div>
          <span style={{ fontSize: 10.5, color: 'var(--muted)', fontWeight: 500 }}>{d.l}</span>
        </div>
      ))}
    </div>
  );
}

function LineChart({ data, accent = '#15233f', height = 150 }) {
  const w = 320, h = height;
  const max = Math.max(...data) * 1.12, min = Math.min(...data) * 0.9;
  const pts = data.map((v, i) => [
    (i / (data.length - 1)) * w,
    h - ((v - min) / (max - min)) * (h - 16) - 8,
  ]);
  const path = pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' ');
  const area = path + ` L${w} ${h} L0 ${h} Z`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={height} preserveAspectRatio="none">
      <defs>
        <linearGradient id={'g' + accent.replace('#', '')} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={accent} stopOpacity=".18" />
          <stop offset="1" stopColor={accent} stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={area} fill={`url(#g${accent.replace('#', '')})`} />
      <path d={path} fill="none" stroke={accent} strokeWidth="2.4" strokeLinejoin="round" strokeLinecap="round" />
      {pts.map((p, i) => i === pts.length - 1 && <circle key={i} cx={p[0]} cy={p[1]} r="4" fill="#fff" stroke={accent} strokeWidth="2.4" />)}
    </svg>
  );
}

function Donut({ value, accent = '#15233f', label }) {
  const r = 52, c = 2 * Math.PI * r;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
      <div style={{ position: 'relative', width: 130, height: 130 }}>
        <svg width="130" height="130" viewBox="0 0 130 130">
          <circle cx="65" cy="65" r={r} fill="none" stroke="var(--line)" strokeWidth="13" />
          <circle cx="65" cy="65" r={r} fill="none" stroke={accent} strokeWidth="13" strokeLinecap="round"
            strokeDasharray={c} strokeDashoffset={c * (1 - value / 100)} transform="rotate(-90 65 65)"
            style={{ transition: 'stroke-dashoffset .7s ease' }} />
        </svg>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
          <span style={{ fontFamily: 'var(--font-head)', fontSize: 26, fontWeight: 700 }}>{value}%</span>
        </div>
      </div>
      {label && <span style={{ fontSize: 12.5, color: 'var(--muted)', fontWeight: 600 }}>{label}</span>}
    </div>
  );
}

function ChartCard({ title, sub, children, span }) {
  return (
    <div className="card" style={{ padding: '18px 20px', gridColumn: span ? `span ${span}` : 'auto' }}>
      <div style={{ marginBottom: 16 }}>
        <div style={{ fontFamily: 'var(--font-head)', fontWeight: 600, fontSize: 15.5 }}>{title}</div>
        {sub && <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 3 }}>{sub}</div>}
      </div>
      {children}
    </div>
  );
}

Object.assign(window, { KpiCard, BarChart, LineChart, Donut, ChartCard });