import { useEffect, useState } from "react";

interface Props {
  addLog: (msg: string) => void;
}

export default function SessionStorageDebug({ addLog }: Props) {
  const [registro, setRegistro] = useState<string | null>(null);

  useEffect(() => {
    if (typeof window !== "undefined") {
      setRegistro(sessionStorage.getItem("registro-completado"));
    }
  }, []);

  const setFlag = () => {
    if (typeof window !== "undefined") {
      sessionStorage.setItem("registro-completado", Date.now().toString());
      setRegistro(sessionStorage.getItem("registro-completado"));
      addLog("🔧 Flag registro-completado definida");
    }
  };

  const removeFlag = () => {
    if (typeof window !== "undefined") {
      sessionStorage.removeItem("registro-completado");
      setRegistro(sessionStorage.getItem("registro-completado"));
      addLog("🗑️ Flag registro-completado removida");
    }
  };

  return (
    <>
      <p className="text-sm text-yellow-800">
        <strong>registro-completado:</strong> {registro || "Não definido"}
      </p>
      <button
        onClick={setFlag}
        className="mt-2 px-3 py-1 bg-yellow-600 text-white rounded text-sm hover:bg-yellow-700"
      >
        Simular Flag de Registro Completado
      </button>
      <button
        onClick={removeFlag}
        className="mt-2 ml-2 px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700"
      >
        Remover Flag
      </button>
    </>
  );
}
