/* ============================================================
   Charts — hand-rolled SVG (no recharts dep)
   ============================================================ */
/* global React */
const { useMemo: useMemoChart } = React;

function LineChart20({ years, withSolar, withoutSolar, breakEvenYear, height = 160 }) {
  // withSolar: array of cumulative net savings per year (capex offset)
  // withoutSolar: cumulative cost paid to discom
  const allVals = [...withSolar, ...withoutSolar];
  const minY = Math.min(...allVals);
  const maxY = Math.max(...allVals);
  const W = 380, H = height;
  const PAD = { l: 44, r: 12, t: 14, b: 22 };
  const innerW = W - PAD.l - PAD.r, innerH = H - PAD.t - PAD.b;

  const x = i => PAD.l + (i / (years - 1)) * innerW;
  const y = v => PAD.t + innerH - ((v - minY) / (maxY - minY || 1)) * innerH;

  const pathSolar = withSolar.map((v, i) => `${i === 0 ? "M" : "L"}${x(i)} ${y(v)}`).join(" ");
  const pathNo = withoutSolar.map((v, i) => `${i === 0 ? "M" : "L"}${x(i)} ${y(v)}`).join(" ");

  const yTicks = [minY, 0, maxY * 0.5, maxY];
  const xTicks = [0, 5, 10, 15, 19];

  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block" }}>
      {yTicks.map((t, i) => (
        <g key={i}>
          <line x1={PAD.l} x2={W - PAD.r} y1={y(t)} y2={y(t)} stroke="#ececea" strokeDasharray={t === 0 ? "" : "2 3"} strokeWidth="1" />
          <text x={PAD.l - 6} y={y(t) + 3} textAnchor="end" fontFamily="Geist Mono" fontSize="9" fill="#8a8a82">
            {t === 0 ? "₹0" : Math.abs(t) >= 100000 ? `₹${(t/100000).toFixed(1)}L` : `₹${Math.round(t/1000)}k`}
          </text>
        </g>
      ))}
      {xTicks.map(i => (
        <text key={i} x={x(i)} y={H - 6} textAnchor="middle" fontFamily="Geist Mono" fontSize="9" fill="#8a8a82">y{i+1}</text>
      ))}
      {/* zero line emphasized */}
      <line x1={PAD.l} x2={W - PAD.r} y1={y(0)} y2={y(0)} stroke="#57574f" strokeWidth="1" />

      {/* withoutSolar (negative grows) */}
      <path d={pathNo} stroke="#e76f51" strokeWidth="1.5" fill="none" strokeDasharray="3 3" />

      {/* withSolar */}
      <path d={pathSolar} stroke="#0d0d0c" strokeWidth="2" fill="none" />

      {/* break-even marker */}
      {breakEvenYear != null && breakEvenYear > 0 && breakEvenYear < years && (
        <g>
          <line x1={x(breakEvenYear-1)} x2={x(breakEvenYear-1)} y1={PAD.t} y2={H - PAD.b} stroke="#c2410c" strokeWidth="1" strokeDasharray="2 2" />
          <circle cx={x(breakEvenYear-1)} cy={y(0)} r="3" fill="#c2410c" />
          <text x={x(breakEvenYear-1) + 5} y={PAD.t + 12} fontFamily="Geist Mono" fontSize="10" fill="#c2410c">
            break-even · y{breakEvenYear}
          </text>
        </g>
      )}

      {/* legend */}
      <g transform={`translate(${PAD.l + 2}, ${PAD.t + 2})`}>
        <line x1="0" y1="0" x2="14" y2="0" stroke="#0d0d0c" strokeWidth="2" />
        <text x="18" y="3" fontFamily="Geist" fontSize="10" fill="#0d0d0c">cumulative net with solar</text>
        <line x1="0" y1="13" x2="14" y2="13" stroke="#e76f51" strokeWidth="1.5" strokeDasharray="3 3" />
        <text x="18" y="16" fontFamily="Geist" fontSize="10" fill="#57574f">grid-only spend</text>
      </g>
    </svg>
  );
}

function BarChart({ data, height = 96, color = "#0d0d0c", highlightIdx = null }) {
  // data: [{label, value}]
  const W = 380, H = height;
  const PAD = { l: 6, r: 6, t: 6, b: 18 };
  const innerW = W - PAD.l - PAD.r, innerH = H - PAD.t - PAD.b;
  const max = Math.max(...data.map(d => d.value));
  const bw = innerW / data.length * 0.72;
  const gap = innerW / data.length * 0.28;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block" }}>
      {data.map((d, i) => {
        const h = (d.value / max) * innerH;
        const x = PAD.l + i * (bw + gap) + gap/2;
        const yPos = PAD.t + innerH - h;
        const fill = highlightIdx === i ? "#c2410c" : color;
        return (
          <g key={i}>
            <rect x={x} y={yPos} width={bw} height={h} fill={fill} rx="1" />
            <text x={x + bw/2} y={H - 5} textAnchor="middle" fontFamily="Geist Mono" fontSize="9" fill="#8a8a82">{d.label}</text>
          </g>
        );
      })}
    </svg>
  );
}

function Histogram({ buckets, height = 120, color = "#0d0d0c" }) {
  // buckets: [{label, value}]
  const W = 380, H = height;
  const PAD = { l: 22, r: 6, t: 8, b: 22 };
  const innerW = W - PAD.l - PAD.r, innerH = H - PAD.t - PAD.b;
  const max = Math.max(...buckets.map(b => b.value));
  const bw = innerW / buckets.length;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block" }}>
      {[0, 0.5, 1].map(t => {
        const v = max * t;
        const y = PAD.t + innerH - t * innerH;
        return (<g key={t}>
          <line x1={PAD.l} x2={W - PAD.r} y1={y} y2={y} stroke="#ececea" strokeDasharray="2 3"/>
          <text x={PAD.l - 4} y={y + 3} textAnchor="end" fontFamily="Geist Mono" fontSize="9" fill="#8a8a82">{Math.round(v)}</text>
        </g>);
      })}
      {buckets.map((b, i) => {
        const h = (b.value / max) * innerH;
        const x = PAD.l + i * bw + 1;
        const y = PAD.t + innerH - h;
        return (
          <g key={i}>
            <rect x={x} y={y} width={bw - 2} height={h} fill={color} rx="1" />
            <text x={x + bw/2 - 1} y={H - 6} textAnchor="middle" fontFamily="Geist Mono" fontSize="9" fill="#8a8a82">{b.label}</text>
          </g>
        );
      })}
    </svg>
  );
}

function AzimuthRose({ buildings, height = 140 }) {
  // 16 wedges representing azimuth bins
  const W = 380, H = height;
  const cx = W / 2, cy = H / 2 + 6;
  const r = Math.min(W, H) / 2 - 18;

  const bins = new Array(16).fill(0);
  buildings.forEach(b => {
    if (b.tilt === 0) return; // skip flat
    const idx = Math.round(b.azimuth / 22.5) % 16;
    bins[idx] += b.kWp;
  });
  const max = Math.max(...bins, 1);
  const wedges = bins.map((v, i) => {
    const a1 = (i - 0.5) * 22.5 * Math.PI / 180 - Math.PI / 2;
    const a2 = (i + 0.5) * 22.5 * Math.PI / 180 - Math.PI / 2;
    const len = (v / max) * r;
    const x1 = cx + Math.cos(a1) * len, y1 = cy + Math.sin(a1) * len;
    const x2 = cx + Math.cos(a2) * len, y2 = cy + Math.sin(a2) * len;
    const fillT = v / max;
    const fluxStops = [[26,17,71],[238,109,61],[247,167,34],[253,231,37]];
    const c = (() => {
      const n = fluxStops.length - 1;
      const t = fillT * n;
      const i0 = Math.floor(t);
      const f = t - i0;
      const a = fluxStops[i0], bb = fluxStops[Math.min(n, i0 + 1)];
      return `rgb(${Math.round(a[0]+(bb[0]-a[0])*f)}, ${Math.round(a[1]+(bb[1]-a[1])*f)}, ${Math.round(a[2]+(bb[2]-a[2])*f)})`;
    })();
    return <path key={i} d={`M${cx} ${cy} L${x1} ${y1} A${len} ${len} 0 0 1 ${x2} ${y2} Z`} fill={c} opacity="0.85" />;
  });

  const labels = [
    { l: "N", a: 0 }, { l: "E", a: 90 }, { l: "S", a: 180 }, { l: "W", a: 270 },
  ];

  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block" }}>
      {/* compass rings */}
      {[0.33, 0.66, 1].map(t => (
        <circle key={t} cx={cx} cy={cy} r={r * t} fill="none" stroke="#ececea" strokeDasharray="2 3" />
      ))}
      {wedges}
      {labels.map(({ l, a }) => {
        const rad = a * Math.PI / 180 - Math.PI / 2;
        const x = cx + Math.cos(rad) * (r + 10), y = cy + Math.sin(rad) * (r + 10);
        return <text key={l} x={x} y={y + 3} textAnchor="middle" fontFamily="Geist Mono" fontSize="10" fill="#57574f">{l}</text>;
      })}
      <text x={cx} y={cy + 3} textAnchor="middle" fontFamily="Geist Mono" fontSize="9" fill="#8a8a82">flat-roof</text>
    </svg>
  );
}

function Sparkline({ data, height = 22, color = "#57574f" }) {
  if (!data || data.length === 0) return null;
  const W = 100, H = height;
  const min = Math.min(...data), max = Math.max(...data);
  const x = i => (i / (data.length - 1)) * W;
  const y = v => H - ((v - min) / (max - min || 1)) * H;
  const path = data.map((v, i) => `${i === 0 ? "M" : "L"}${x(i)} ${y(v)}`).join(" ");
  return (
    <svg viewBox={`0 0 ${W} ${H}`} width={W} height={H} style={{ display: "block" }} preserveAspectRatio="none">
      <path d={path} stroke={color} strokeWidth="1.2" fill="none" />
    </svg>
  );
}

Object.assign(window, { LineChart20, BarChart, Histogram, AzimuthRose, Sparkline });