"use client";

import { useState, useEffect } from "react";

import Navbar from "../Components/Navigation/Navbar";

const allowedUserID = ["30f76186-83ff-4b26-a429-357bc1ee126f"];

export default function Utils() {
  const [userId, setUserId] = useState<string>("");

  const clearUserData = async () => {
    console.log("Clearing data..");
    const response = await fetch(`/api/user/${userId}/clear-data`, {
      method: "POST",
    });
    console.log(response);
  };

  const loadConfig = async () => {
    await fetch(`/api/import-config`, {
      method: "POST",
    });
  };

  if (allowedUserID.indexOf(userId) == -1) {
    return (
      <>
        <Navbar setUserId={setUserId} />
        <h1 className="text-2xl text-white p-8">Missing Permission</h1>;
      </>
    );
  }

  return (
    <div className="p-8">
      <Navbar setUserId={setUserId} />
      <h1 className="text-2xl text-white mb-4">Utilities</h1>
      <button
        className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold w-auto text-center mr-4"
        onClick={() => {
          clearUserData();
        }}
      >
        Clear My Data
      </button>
      <button
        className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold w-auto text-center mr-4"
        onClick={() => {
          loadConfig();
        }}
      >
        Load Game Config
      </button>
    </div>
  );
}