import { useState } from "react";
import SankeyPanel from "../components/SankeyPanel";

export default function VisualizationsPage() {
  const [env, setEnv] = useState("office1");
  const [computers, setComputers] = useState(["All"]);
  const [ips, setIps] = useState(["All"]);

  return (
    <div style={{ padding: 16 }}>
      <h2>Network Sankey</h2>

      {/* Пример UI (ти можеш да ставиш multi-select компонента) */}
      <div style={{ display: "flex", gap: 12, marginBottom: 12 }}>
        <select value={env} onChange={(e) => setEnv(e.target.value)}>
          <option value="office1">office1</option>
          <option value="default">default</option>
        </select>

        <select
          value={computers[0]}
          onChange={(e) => setComputers([e.target.value])}
        >
          <option value="All">All</option>
          <option value="Ilina-laptop">Ilina-laptop</option>
          <option value="Irena">Irena</option>
        </select>

        <select value={ips[0]} onChange={(e) => setIps([e.target.value])}>
          <option value="All">All</option>
          <option value="127.0.0.1:443">127.0.0.1:443</option>
        </select>
      </div>

      <SankeyPanel
        dashboardUid="adt9v8k"   // <- стави го твојот UID од Grafana URL
        env={env}
        computers={computers}
        ips={ips}
        from="now-24h"
        to="now"
      />
    </div>
  );
}