import { Hanko } from "@teamhanko/hanko-frontend-sdk";

// Replace with your Hanko Cloud project's API endpoint
const API_URL = "https://<your-project-id>.hanko.io";

// Initialize Hanko instance
const hanko = new Hanko(API_URL);

// Check if we're on the success page
const isSuccessPage = window.location.pathname.includes("success.html");

if (isSuccessPage) {
  // Handle logout on success page
  const logoutButton = document.getElementById("logout");
  if (logoutButton) {
    logoutButton.addEventListener("click", async () => {
      try {
        await hanko.logout();
      } catch (error) {
        console.error("Logout failed:", error);
        alert("Failed to log out. Please try again.");
      }
    });
  }
  // Redirect to login page on logout
  hanko.onUserLoggedOut(() => {
    window.location.href = "/index.html";
  });
} else {
  // Listen for state changes
  hanko.onAfterStateChange(({ state }) => {
    handleState(state); // To be implemented in the next step of this guide
  });

  // Listen for successful login
  hanko.onSessionCreated(() => {
    window.location.href = "/success.html";
  });

  // Initialize login flow on index.html
  hanko.createState("login");
}

function generateInput(input, options = {}) {
  const { name, type, min_length, max_length, required, error } = input;
  const { autocomplete } = options;

  // Build attributes
  const attributes = [
    `type="${type}"`,
    `id="${name}"`,
    `name="${name}"`,
    required ? "required" : "",
    min_length ? `minlength="${min_length}"` : "",
    max_length ? `maxlength="${max_length}"` : "",
    autocomplete ? `autocomplete="${autocomplete}"` : ""
  ].join(" ");

  // Generate HTML for the input group
  return `
    <div class="form-group">
      <label for="${name}">${name.charAt(0).toUpperCase() + name.slice(1)}</label>
      <input ${attributes}>${error ? `<p class="error">${error.message}</p>` : ""}
    </div>`;
}

function handleState(state) {
  const app = document.getElementById("app");
  app.innerHTML = ""; // Clear previous content

  switch (state.name) {
    case "login_init":
      renderLoginInit(state);
      state.passkeyAutofillActivation(); // Enable passkey autofill
      break;
    case "login_method_chooser":
      renderLoginMethodChooser(state);
      break;
    case "onboarding_create_passkey":
      renderOnboardingCreatePasskey(state);
      break;
    case "passcode_confirmation":
      renderPasscodeConfirmation(state);
      break;
    case "error":
      renderError(state.error || { message: "An unexpected error occurred." });
      break;
  }
}

function renderLoginInit(state) {
  const app = document.getElementById("app");
  const action = state.actions.continue_with_login_identifier;
  const emailInput = action.inputs.email || action.inputs.identifier;
  const inputHtml = generateInput(emailInput, { autocomplete: "username webauthn" });

  app.innerHTML = `
    <h1>Log In</h1>
    <form id="login-form">
      ${inputHtml}
      <button type="submit">Continue</button>
    </form>`;

  const form = document.getElementById("login-form");

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const email = form.querySelector(`#${emailInput.name}`).value;
    await action.run({[emailInput.name]: email });
  });
}

function renderLoginMethodChooser(state) {
  const app = document.getElementById("app");

  app.innerHTML = `
    <h1>Choose Login Method</h1>
    <div id="methods"></div>`;

  const methods = document.getElementById("methods");
  const actions = state.actions;

  if (actions.continue_to_password_login.enabled) {
    methods.innerHTML += `<button data-action="continue_to_password_login">Use Password</button>`;
  }

  if (actions.continue_to_passcode_confirmation.enabled) {
    methods.innerHTML += `<button data-action="continue_to_passcode_confirmation">Use Passcode</button>`;
  }

  if (actions.back.enabled) {
    methods.innerHTML += `<button data-action="back">Back</button>`;
  }

  methods.querySelectorAll("button").forEach((button) => {
    button.addEventListener("click", async (e) => {
      e.preventDefault();
      const actionName = button.dataset.action;
      await actions[actionName].run();
    });
  });
 }

function renderOnboardingCreatePasskey(state) {
  const app = document.getElementById("app");

  app.innerHTML = `
    <h1>Create a Passkey</h1>
    <p>Add a passkey for faster login (optional).</p>
    <div id="actions"></div>`;

  const actionsDiv = document.getElementById("actions");
  const actions = state.actions;

  if (actions.webauthn_generate_creation_options.enabled) {
    actionsDiv.innerHTML += `<button data-action="webauthn_generate_creation_options">Create Passkey</button>`;
  }
  if (actions.skip.enabled) {
    actionsDiv.innerHTML += `<button data-action="skip">Skip</button>`;
  }
  if (actions.back.enabled) {
    actionsDiv.innerHTML += `<button data-action="back">Back</button>`;
  }

  actionsDiv.querySelectorAll("button").forEach(button => {
    button.addEventListener("click", async () => {
      const actionName = button.dataset.action;
      await actions[actionName].run();
    });
  });
}

function renderPasscodeConfirmation(state) {
  const app = document.getElementById("app");
  const verifyAction = state.actions.verify_passcode;
  const codeInput = verifyAction.inputs.code;
  const inputHtml = generateInput(codeInput);

  app.innerHTML = `
    <h1>Enter Passcode</h1>
    <p>Check your email for the passcode.</p>
    <form id="passcode-form">
      ${inputHtml}
      <button type="submit">Verify</button>
    </form>
    <div id="actions"></div>`;

    const form = document.getElementById("passcode-form");

    form.addEventListener("submit", async (e) => {
      e.preventDefault();
      const code = form.querySelector(`#${codeInput.name}`).value;
      await verifyAction.run({ code });
    });

    const actionsDiv = document.getElementById("actions");

    if (state.actions.resend_passcode.enabled) {
      actionsDiv.innerHTML += `<button data-action="resend_passcode">Resend Passcode</button>`;
    }
    if (state.actions.back.enabled) {
      actionsDiv.innerHTML += `<button data-action="back">Back</button>`;
    }

    actionsDiv.querySelectorAll("button").forEach(button => {
      button.addEventListener("click", async () => {
        const actionName = button.dataset.action;
        await state.actions[actionName].run();
    });
  });
}

function renderError(error) {
  const app = document.getElementById("app");

  app.innerHTML = `
    <h1>Error</h1>
    <p class="error">${error.message}</p>
    <button id="retry">Try Again</button>`;

  document.getElementById("retry").addEventListener("click", () => {
    initializeLoginFlow();
  });
}