src/main.ts

import { tokenManager } from "./token";
import { Client } from "./client";
import { WhoAmIUser } from "@huggingface/hub";

const baseUrl = "https://huggingface.co/api";

const showAuthenticatedUI = async () => {
  const accessToken = tokenManager.getAccessToken();

  if (!accessToken) {
    throw new Error("Access token not found");
  }

  const client = new Client(baseUrl, accessToken);

  // Hide token form
  const tokenForm = document.getElementById("token-form");
  if (tokenForm) {
    tokenForm.style.display = "none";
  }

  // Show repo form and signout button
  const repoForm = document.getElementById("repo-form");
  const signoutButton = document.getElementById("signout");
  if (repoForm) {
    repoForm.style.removeProperty("display");
  }
  if (signoutButton) {
    signoutButton.style.removeProperty("display");
    signoutButton.onclick = () => tokenManager.logout();
  }

  // Add create repo ui
  const createRepoButton = document.getElementById("create-repo");
  const repoNameInput = <HTMLInputElement>document.getElementById("repo-name");
  const resourceGroupInput = <HTMLInputElement>(
    document.getElementById("resource-group-name")
  );
  const resourceGroupContainer = document.getElementById(
    "resource-group-container"
  );

  if (createRepoButton && repoNameInput) {
    createRepoButton.onclick = async () => {
      const repoName = repoNameInput.value.trim();
      const orgSelect = <HTMLSelectElement>(
        document.getElementById("org-select")
      );

      if (repoName) {
        try {
          const organizationName = orgSelect?.value || undefined;
          const resourceGroupName = organizationName
            ? resourceGroupInput?.value.trim()
            : undefined;

          // create repo
          const repo = await client.post<void>("repos/create", {
            type: "model",
            name: repoName,
            organization: organizationName,
            private: true,
          });

          console.log({ repo });
          // create RG
          if (organizationName && resourceGroupName) {
            await client.post<void>(
              `organizations/${organizationName}/resource-groups`,
              {
                name: resourceGroupName,
                description: `Resource group for repository ${name}`,
                autoJoin: {
                  enabled: true,
                  role: "admin",
                },
              }
            );
          }

          alert("Repository and resource group created successfully!");
        } catch (error) {
          console.error(error);
        }
      }
    };
  }

  // Handle org select change to show/hide resource group input
  const orgSelect = document.getElementById("org-select") as HTMLSelectElement;
  if (orgSelect && resourceGroupContainer) {
    orgSelect.onchange = () => {
      if (orgSelect.value) {
        resourceGroupContainer.style.removeProperty("display");
      } else {
        resourceGroupContainer.style.display = "none";
      }
    };
  }

  try {
    const userInfo = await client.get<WhoAmIUser>("whoami-v2");

    // Populate org select
    if (orgSelect && userInfo.orgs) {
      userInfo.orgs.forEach((org) => {
        const option = document.createElement("option");
        option.value = org.name;
        option.textContent = org.name;
        orgSelect.appendChild(option);
      });
    }
  } catch (error) {
    console.error(error);
  }
};

const showUnauthenticatedUI = () => {
  const tokenForm = document.getElementById("token-form");
  const tokenInput = document.getElementById("token-input") as HTMLInputElement;
  const tokenSubmit = document.getElementById("token-submit");

  if (tokenForm && tokenInput && tokenSubmit) {
    tokenForm.style.removeProperty("display");
    tokenSubmit.onclick = () => {
      const token = tokenInput.value.trim();
      if (token) {
        tokenManager.setToken(token);
        showAuthenticatedUI();
      }
    };
  }

  const repoForm = document.getElementById("repo-form");
  const signoutButton = document.getElementById("signout");
  if (repoForm) {
    repoForm.style.display = "none";
  }
  if (signoutButton) {
    signoutButton.style.display = "none";
  }
};

const init = async (): Promise<void> => {
  if (tokenManager.isAuthenticated()) {
    showAuthenticatedUI();
  } else {
    showUnauthenticatedUI();
  }
};

init();