/* OrchEcomm — revenue line chart with range selector, dual platform lines, hover tooltip. */
function RevenuePanel() {
  const I = window.OcIcons;
  const { CardHeader } = window.OrchEcommDesignSystem_091be6;
  const series = window.OcData.revenueSeries;
  const [range, setRange] = React.useState("30d");
  const [hover, setHover] = React.useState(null);
  const data = series[range];
  const ranges = ["7d", "30d", "90d"];

  const W = 660, H = 220, pad = { l: 6, r: 6, t: 14, b: 26 };
  const innerW = W - pad.l - pad.r, innerH = H - pad.t - pad.b;
  const n = data.woo.length;
  const x = (i) => pad.l + (n === 1 ? innerW / 2 : (i / (n - 1)) * innerW);
  const y = (v) => pad.t + innerH - (v / data.max) * innerH;
  const linePath = (arr) => arr.map((v, i) => `${i === 0 ? "M" : "L"}${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(" ");
  const totals = data.woo.map((v, i) => v + data.shopify[i]);
  const areaTop = totals;
  const area = `${areaTop.map((v, i) => `${i === 0 ? "M" : "L"}${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(" ")} L${x(n - 1)},${pad.t + innerH} L${x(0)},${pad.t + innerH} Z`;

  const onMove = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const px = ((e.clientX - rect.left) / rect.width) * W;
    let idx = Math.round(((px - pad.l) / innerW) * (n - 1));
    idx = Math.max(0, Math.min(n - 1, idx));
    setHover(idx);
  };
  const money = (v) => "$" + v.toLocaleString();

  return (
    <div>
      <CardHeader
        title="Revenue"
        subtitle={`${data.total} · last ${range === "7d" ? "7 days" : range === "30d" ? "30 days" : "90 days"}`}
        action={
          <div style={{ display: "flex", gap: 4, background: "var(--bg-app)", padding: 3, borderRadius: "var(--radius-sm)", border: "1px solid var(--border-default)" }}>
            {ranges.map((r) => (
              <button key={r} onClick={() => setRange(r)} style={{ height: 26, padding: "0 11px", borderRadius: "var(--radius-xs)", border: "none", background: range === r ? "var(--surface-card)" : "transparent", boxShadow: range === r ? "var(--shadow-xs)" : "none", color: range === r ? "var(--green-800)" : "var(--text-secondary)", font: "var(--type-caption)", fontWeight: 600, cursor: "pointer" }}>{r}</button>
            ))}
          </div>
        }
      />
      <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 6 }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11, color: "var(--text-secondary)", fontWeight: 500 }}><span style={{ width: 9, height: 9, borderRadius: "50%", background: "var(--green-600)" }} />WooCommerce</span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11, color: "var(--text-secondary)", fontWeight: 500 }}><span style={{ width: 9, height: 9, borderRadius: "50%", background: "var(--green-300)" }} />Shopify</span>
        <span style={{ marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: 3, fontSize: 12, fontWeight: 600, color: data.up ? "var(--color-success)" : "var(--color-error)" }}>{data.up ? "↑" : "↓"} {data.delta} <span style={{ color: "var(--text-muted)", fontWeight: 400 }}>vs. prior</span></span>
      </div>

      <div style={{ position: "relative" }}>
        <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block" }} onMouseMove={onMove} onMouseLeave={() => setHover(null)}>
          <defs>
            <linearGradient id="revFill2" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#52B788" stopOpacity="0.20" />
              <stop offset="100%" stopColor="#52B788" stopOpacity="0" />
            </linearGradient>
          </defs>
          {[0, 0.25, 0.5, 0.75, 1].map((g, i) => (
            <line key={i} x1={pad.l} x2={W - pad.r} y1={pad.t + innerH * (1 - g)} y2={pad.t + innerH * (1 - g)} stroke="var(--border-subtle)" strokeWidth="1" />
          ))}
          <path d={area} fill="url(#revFill2)" />
          <path d={linePath(data.shopify)} fill="none" stroke="var(--green-300)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
          <path d={linePath(totals)} fill="none" stroke="var(--green-600)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
          {hover != null ? <line x1={x(hover)} x2={x(hover)} y1={pad.t} y2={pad.t + innerH} stroke="var(--green-400)" strokeWidth="1" strokeDasharray="3 3" /> : null}
          {hover != null ? <circle cx={x(hover)} cy={y(totals[hover])} r="4.5" fill="var(--green-600)" stroke="#fff" strokeWidth="2" /> : null}
          <circle cx={x(n - 1)} cy={y(totals[n - 1])} r="4" fill="var(--green-600)" stroke="#fff" strokeWidth="2" />
          {data.labels.map((lb, i) => lb ? <text key={i} x={x(i)} y={H - 7} fontSize="10" fill="var(--text-muted)" textAnchor="middle" fontFamily="var(--font-sans)">{lb}</text> : null)}
        </svg>
        {hover != null ? (
          <div style={{ position: "absolute", left: `${(x(hover) / W) * 100}%`, top: 0, transform: "translateY(6px)", marginLeft: hover > n / 2 ? -130 : 8, background: "var(--ink-900)", color: "#fff", borderRadius: "var(--radius-sm)", padding: "8px 10px", boxShadow: "var(--shadow-md)", pointerEvents: "none", minWidth: 120 }}>
            <div style={{ font: "var(--type-eyebrow)", color: "var(--green-300)", textTransform: "uppercase", letterSpacing: "var(--tracking-caps)" }}>{data.labels[hover] || `Point ${hover + 1}`}</div>
            <div style={{ font: "var(--type-card-title)", color: "#fff", marginTop: 4 }}>{money(totals[hover])}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 2, marginTop: 5 }}>
              <span style={{ fontSize: 11, color: "var(--green-200)" }}>Woo · {money(data.woo[hover])}</span>
              <span style={{ fontSize: 11, color: "var(--green-200)" }}>Shopify · {money(data.shopify[hover])}</span>
            </div>
          </div>
        ) : null}
      </div>
    </div>
  );
}
window.RevenuePanel = RevenuePanel;