// src/components/SankeyPanel.jsx
import { useMemo } from "react";

export default function SankeyPanel({
  env = "office1",
  computers = [],   // ✅ празно значи All
  ips = [],         // ✅ празно значи All
  from = "now-24h",
  to = "now",
}) {
  const dashboardUid = "adt9v8k";
  const grafanaBase = "http://localhost:3000";

  const src = useMemo(() => {
    const params = new URLSearchParams();
    params.set("orgId", "1");
    params.set("kiosk", "tv");
    params.set("from", from);
    params.set("to", to);

    params.set("var-env", env);

    // ✅ НЕ праќај "All"
    const cleanComputers = (computers || []).filter((c) => c && c !== "All");
    const cleanIps = (ips || []).filter((ip) => ip && ip !== "All");

    // ✅ додавај само ако има конкретни вредности
    cleanComputers.forEach((c) => params.append("var-computers", c));
    cleanIps.forEach((ip) => params.append("var-ips", ip));

    return `${grafanaBase}/d/${dashboardUid}/sankey-panel?${params.toString()}`;
  }, [env, computers, ips, from, to]);

  return (
    <div style={{ width: "100%", height: "85vh", overflow: "hidden", borderRadius: 12 }}>
      <iframe
        src={src}
        title="Network Sankey"
        width="100%"
        height="100%"
        frameBorder="0"
      />
    </div>
  );
}