src/main.ts

import { oauthManager, HuggingFaceWindow } from "./oauth";

interface OrganizationInfo {
  type: string;
  id: string;
  name: string;
  role: string;
}

interface WhoAmIResponse {
  type: string;
  id: string;
  name: string;
  email?: string;
  fullname?: string;
  avatarUrl?: string;
  organizations: OrganizationInfo[];
}

declare const window: HuggingFaceWindow;

console.log("huggingface env", window.huggingface);

async function getOrganizationInfo(
  accessToken: string
): Promise<WhoAmIResponse> {
  const response = await fetch("https://huggingface.co/api/whoami-v2", {
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  });

  if (!response.ok) {
    throw new Error(
      `Failed to fetch organization info: ${response.statusText}`
    );
  }

  return response.json();
}

async function createRepository(
  accessToken: string,
  name: string,
  organization?: string
): Promise<void> {
  const response = await fetch("https://huggingface.co/api/repos/create", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${accessToken}`,
    },
    body: JSON.stringify({
      type: "model",
      name: name,
      organization: organization,
      private: false,
    }),
  });

  if (!response.ok) {
    throw new Error(`Failed to create repository: ${response.statusText}`);
  }
}

const init = async (): Promise<void> => {
  await oauthManager.handleRedirect();

  if (oauthManager.isAuthenticated()) {
    const accessToken = oauthManager.getAccessToken();
    if (!accessToken) {
      throw new Error("Access token not found");
    }

    // Show repo form when logged in
    const repoForm = document.getElementById("repo-form");
    if (repoForm) {
      repoForm.style.removeProperty("display");
    }

    // Add create repo functionality
    const createRepoButton = document.getElementById("create-repo");
    const repoNameInput = document.getElementById(
      "repo-name"
    ) as HTMLInputElement;
    if (createRepoButton && repoNameInput) {
      createRepoButton.onclick = async () => {
        const repoName = repoNameInput.value.trim();
        const orgSelect = document.getElementById(
          "org-select"
        ) as HTMLSelectElement;
        if (repoName) {
          try {
            const selectedOrg = orgSelect?.value || undefined;
            await createRepository(accessToken, repoName, selectedOrg);
            repoNameInput.value = ""; // Clear input after success
            alert("Repository created successfully!");
          } catch (error) {
            console.error("Failed to create repository:", error);
            alert("Failed to create repository. Please try again.");
          }
        }
      };
    }

    // Get organization info and populate org select after successful authentication
    try {
      const orgInfo = await getOrganizationInfo(accessToken);

      // Populate org select
      const orgSelect = document.getElementById(
        "org-select"
      ) as HTMLSelectElement;
      if (orgSelect && orgInfo.organizations) {
        orgInfo.organizations.forEach((org) => {
          const option = document.createElement("option");
          option.value = org.name;
          option.textContent = org.name;
          orgSelect.appendChild(option);
        });
      }

      // Display full info in pre element
      const preElement = document.querySelector("pre");
      if (preElement) {
        preElement.textContent = JSON.stringify(
          {
            oauth: oauthManager.getAccessToken(),
            user: orgInfo,
          },
          null,
          2
        );
      }
    } catch (error) {
      console.error("Failed to fetch organization info:", error);
    }

    const signoutButton = document.getElementById("signout");
    if (signoutButton) {
      signoutButton.style.removeProperty("display");
      signoutButton.onclick = () => oauthManager.logout();
    }
  } else {
    const signinButton = document.getElementById("signin");
    if (signinButton) {
      signinButton.style.removeProperty("display");
      signinButton.onclick = () => oauthManager.initiateLogin();
    }
  }
};

init().catch(console.error);