pepperplus-ui/src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.tsx

import {type ChangeEvent, useRef, useState} from "react";
import useFlowStore from "../VisProgStores";
import visProgStyles from "../../VisProg.module.css";
import styles from "./SaveLoadPanel.module.css";
import { makeProjectBlob, type SavedProject } from "../../../../utils/SaveLoad";

export default function SaveLoadPanel() {
  const nodes = useFlowStore((s) => s.nodes);
  const edges = useFlowStore((s) => s.edges);
  const setNodes = useFlowStore((s) => s.setNodes);
  const setEdges = useFlowStore((s) => s.setEdges);

  const [saveUrl, setSaveUrl] = useState<string | null>(null);

  // ref to the file input
  const inputRef = useRef<HTMLInputElement | null>(null);

  const onSave = async (nameGuess = "visual-program") => {
    const blob = makeProjectBlob(nameGuess, nodes, edges);
    const url = URL.createObjectURL(blob);
    setSaveUrl(url);
  };

  // input change handler updates the graph with a parsed JSON file
  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    try {
      const text = await file.text();
      const parsed = JSON.parse(text) as SavedProject;
      if (!parsed.nodes || !parsed.edges) throw new Error("Invalid file format");
      setNodes(parsed.nodes);
      setEdges(parsed.edges);
    } catch (e) {
      console.error(e);
      alert("Loading failed. See console.");
    } finally {
      // allow re-selecting same file next time
      if (inputRef.current) inputRef.current.value = "";
    }
  };

  const defaultName = "visual-program";
  return (
    <div className={`flex-col gap-lg padding-md border-lg ${styles.saveLoadPanel}`}>
      <div className="description">You can save and load your graph here.</div>
      <div className={`flex-row gap-lg justify-center`}>
        <a
          href={saveUrl ?? "#"}
          onClick={() => onSave(defaultName)}
          download={`${defaultName}.json`}
          className={`${visProgStyles.draggableNode} ${styles.saveButton}`}
        >
          Save Graph
        </a>

        <label className={`${visProgStyles.draggableNode} ${styles.fileInputButton}`}>
          <input
            ref={inputRef}
            type="file"
            accept=".visprog.json,.json,.txt,application/json,text/plain"
            onChange={handleFileChange}
          />
          Load Graph
        </label>
      </div>
    </div>
  );
}