/* Hunian Kita — chart components (pure SVG). Exports to window. */

/* ---- Icon: Lucide wrapper sized by box ---- */
function Icon({ name, size = 20, color, style, className }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = "";
      const i = document.createElement("i");
      i.setAttribute("data-lucide", name);
      ref.current.appendChild(i);
      window.lucide.createIcons();
    }
  });
  return <span ref={ref} className={"hk-icon " + (className || "")} style={{ width: size, height: size, color, ...style }} />;
}

/* ---- Sparkline ---- */
function Sparkline({ data, w = 120, h = 40, color = "var(--accent)", fill = true }) {
  const max = Math.max(...data), min = Math.min(...data);
  const rng = max - min || 1;
  const pts = data.map((d, i) => [(i / (data.length - 1)) * w, h - 4 - ((d - min) / rng) * (h - 8)]);
  const line = pts.map((p, i) => (i ? "L" : "M") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
  const area = line + ` L${w} ${h} L0 ${h} Z`;
  const gid = "sg" + Math.random().toString(36).slice(2, 7);
  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ display: "block" }}>
      <defs><linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor={color} stopOpacity="0.28" /><stop offset="1" stopColor={color} stopOpacity="0" />
      </linearGradient></defs>
      {fill && <path d={area} fill={`url(#${gid})`} />}
      <path d={line} fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

/* ---- Dual line chart (billed vs collected, new vs resolved) ---- */
function LineChart({ series, labels, height = 230, money = false, unit = "" }) {
  const W = 720, H = height, padL = 46, padR = 14, padT = 16, padB = 30;
  const all = series.flatMap((s) => s.data);
  const max = Math.max(...all) * 1.08, min = Math.min(0, ...all);
  const rng = max - min || 1;
  const n = labels.length;
  const x = (i) => padL + (i / (n - 1)) * (W - padL - padR);
  const y = (v) => padT + (1 - (v - min) / rng) * (H - padT - padB);
  const ticks = 4;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block" }}>
      {Array.from({ length: ticks + 1 }).map((_, i) => {
        const v = min + (rng * i) / ticks; const yy = y(v);
        return (<g key={i}>
          <line x1={padL} y1={yy} x2={W - padR} y2={yy} stroke="var(--border)" strokeWidth="1" />
          <text x={padL - 8} y={yy + 4} textAnchor="end" fontSize="10.5" fontWeight="700" fill="var(--t3)">
            {money ? Math.round(v) : Math.round(v)}{i === ticks && unit ? unit : ""}
          </text>
        </g>);
      })}
      {labels.map((l, i) => (
        <text key={i} x={x(i)} y={H - 8} textAnchor="middle" fontSize="11" fontWeight="700" fill="var(--t3)">{l}</text>
      ))}
      {series.map((s, si) => {
        const line = s.data.map((d, i) => (i ? "L" : "M") + x(i) + " " + y(d)).join(" ");
        const area = line + ` L${x(n - 1)} ${y(min)} L${x(0)} ${y(min)} Z`;
        const gid = "lg" + si + Math.random().toString(36).slice(2, 6);
        return (<g key={si}>
          <defs><linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor={s.color} stopOpacity={s.fill ? 0.22 : 0} /><stop offset="1" stopColor={s.color} stopOpacity="0" />
          </linearGradient></defs>
          {s.fill && <path d={area} fill={`url(#${gid})`} />}
          <path d={line} fill="none" stroke={s.color} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
          {s.data.map((d, i) => <circle key={i} cx={x(i)} cy={y(d)} r="3.4" fill="var(--surface)" stroke={s.color} strokeWidth="2.4" />)}
        </g>);
      })}
    </svg>
  );
}

/* ---- Grouped/stacked bars ---- */
function BarChart({ data, height = 230, keys, colors }) {
  const W = 720, H = height, padL = 40, padR = 12, padT = 14, padB = 30;
  const max = Math.max(...data.flatMap((d) => keys.map((k) => d[k]))) * 1.1;
  const n = data.length;
  const slot = (W - padL - padR) / n;
  const bw = Math.min(20, (slot * 0.6) / keys.length);
  const gap = 4;
  const y = (v) => padT + (1 - v / max) * (H - padT - padB);
  const ticks = 4;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block" }}>
      {Array.from({ length: ticks + 1 }).map((_, i) => {
        const v = (max * i) / ticks; const yy = y(v);
        return (<g key={i}>
          <line x1={padL} y1={yy} x2={W - padR} y2={yy} stroke="var(--border)" strokeWidth="1" />
          <text x={padL - 8} y={yy + 4} textAnchor="end" fontSize="10.5" fontWeight="700" fill="var(--t3)">{Math.round(v)}</text>
        </g>);
      })}
      {data.map((d, i) => {
        const cx = padL + slot * i + slot / 2;
        const groupW = keys.length * bw + (keys.length - 1) * gap;
        return (<g key={i}>
          {keys.map((k, ki) => {
            const bx = cx - groupW / 2 + ki * (bw + gap);
            const by = y(d[k]); const bh = H - padB - by;
            return <rect key={k} x={bx} y={by} width={bw} height={Math.max(bh, 0)} rx="4" fill={colors[ki]} />;
          })}
          <text x={cx} y={H - 8} textAnchor="middle" fontSize="11" fontWeight="700" fill="var(--t3)">{d.m}</text>
        </g>);
      })}
    </svg>
  );
}

/* ---- Donut ---- */
function Donut({ data, size = 150, thickness = 22, center }) {
  const total = data.reduce((s, d) => s + d.val, 0);
  const r = (size - thickness) / 2, cx = size / 2, cy = size / 2, C = 2 * Math.PI * r;
  let off = 0;
  return (
    <div style={{ position: "relative", width: size, height: size, flex: "none" }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ transform: "rotate(-90deg)" }}>
        <circle cx={cx} cy={cy} r={r} fill="none" stroke="var(--surface-3)" strokeWidth={thickness} />
        {data.map((d, i) => {
          const len = (d.val / total) * C;
          const el = <circle key={i} cx={cx} cy={cy} r={r} fill="none" stroke={d.color} strokeWidth={thickness}
            strokeDasharray={`${len} ${C - len}`} strokeDashoffset={-off} strokeLinecap="butt" />;
          off += len; return el;
        })}
      </svg>
      {center && <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", textAlign: "center" }}>
        <div><div style={{ fontSize: 26, fontWeight: 800, letterSpacing: "-0.03em", lineHeight: 1 }}>{center.big}</div>
          <div style={{ fontSize: 11, fontWeight: 700, color: "var(--t3)", marginTop: 3 }}>{center.small}</div></div>
      </div>}
    </div>
  );
}

/* ---- Horizontal bars (category breakdown) ---- */
function HBars({ data }) {
  const max = Math.max(...data.map((d) => d.val));
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      {data.map((d, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "92px 1fr 32px", alignItems: "center", gap: 10 }}>
          <span style={{ fontSize: 12.5, fontWeight: 700, color: "var(--t2)" }}>{d.name}</span>
          <div className="bar" style={{ height: 10 }}>
            <span style={{ width: (d.val / max) * 100 + "%", background: d.color }} />
          </div>
          <span style={{ fontSize: 12.5, fontWeight: 800, color: "var(--t1)", textAlign: "right" }}>{d.val}</span>
        </div>
      ))}
    </div>
  );
}

/* ---- Radial gauge (collection rate) ---- */
function Gauge({ pct, size = 160, color = "var(--accent)" }) {
  const r = size / 2 - 16, cx = size / 2, cy = size / 2, C = Math.PI * r; // half circle
  const len = (pct / 100) * C;
  return (
    <svg width={size} height={size / 1.7} viewBox={`0 0 ${size} ${size / 1.7}`}>
      <path d={`M16 ${cy} A ${r} ${r} 0 0 1 ${size - 16} ${cy}`} fill="none" stroke="var(--surface-3)" strokeWidth="14" strokeLinecap="round" />
      <path d={`M16 ${cy} A ${r} ${r} 0 0 1 ${size - 16} ${cy}`} fill="none" stroke={color} strokeWidth="14" strokeLinecap="round"
        strokeDasharray={`${len} ${C}`} />
      <text x={cx} y={cy - 6} textAnchor="middle" fontSize="30" fontWeight="800" fill="var(--t1)">{pct}%</text>
    </svg>
  );
}

Object.assign(window, { Icon, Sparkline, LineChart, BarChart, Donut, HBars, Gauge });