/**
 * Manages the lifecycle of recruiter credentials.
 * Ensures credentials are only generated on explicit user intent.
 */
class CredentialManager {
  constructor() {
    this.container = document.getElementById("manager-container");
    this.token = this.container?.dataset.token || null;
    this.sections = {
      login: document.getElementById("login-section"),
      manual: document.getElementById("manual-section"),
      creds: document.getElementById("credential-section"),
      request: document.getElementById("request-section"),
    };
  }

  /**
   * Initializes event listeners for the reveal action.
   */
  init() {
    // UI Navigation Elements
    const showTokenBtn = document.getElementById("show-token-entry-btn");
    const backBtns = document.querySelectorAll(".back-link-btn");
    const submitTokenBtn = document.getElementById("submit-token-btn");
    const saveCheck = document.getElementById("save-check");
    const returnLoginBtn = document.getElementById("return-to-login-btn");

    // Navigation Listeners
    if (showTokenBtn) {
      showTokenBtn.addEventListener("click", () =>
        this._switchState("login-section", "token-entry-section"),
      );
    }

    backBtns.forEach((btn) => {
      btn.addEventListener("click", () =>
        this._switchState("token-entry-section", "login-section"),
      );
    });

    // Token Workflow
    if (submitTokenBtn) {
      submitTokenBtn.addEventListener("click", () => {
        const input = document.getElementById("token-input-field");
        this.token = input.value.trim();
        if (this.token) this.handleReveal();
      });
    }

    // Auto-trigger if token is in URL
    if (this.token && this.token !== "") {
      this._switchState("login-section", "token-entry-section");
      this.handleReveal();
    }

    // Enforcement Workflow
    if (saveCheck) {
      saveCheck.addEventListener("change", (e) => {
        returnLoginBtn.disabled = !e.target.checked;
        returnLoginBtn.classList.toggle("btn-disabled", !e.target.checked);
      });
    }

    if (returnLoginBtn) {
      returnLoginBtn.addEventListener("click", () => {
        this._switchState("credential-section", "login-section");
      });
    }
  }
  _switchState(fromId, toId) {
    document.getElementById(fromId).classList.add("hidden");
    document.getElementById(toId).classList.remove("hidden");
  }

  submitToken() {
    const submitBtn = document.getElementById("submit-token-btn");
    const tokenInput = document.getElementById("token-input");

    if (manualBtn) {
      manualBtn.addEventListener("click", () => {
        const tokenValue = tokenInput.value.trim();
        if (tokenValue) {
          // Update container attribute for use by existing logic
          container.setAttribute("data-token", tokenValue);

          // Trigger the reveal logic defined in your reveal-btn listener
          revealCredentials();
        }
      });
    }
  }

  /**
   * Orchestrates the reveal process via POST request.
   */
  async handleReveal() {
    const btn = document.getElementById("submit-token-btn");
    this._toggleLoading(btn, true);

    try {
      const response = await fetch(
        `https://access.jasonpoage.com/access/${this.token}`,
      );
      const data = await this._processResponse(response);
      this._displayCredentials(data);
    } catch (err) {
      this._handleRevealError(err.message);
    } finally {
      this._toggleLoading(btn, false);
    }
  }

  /**
   * Validates response status and parses JSON payload.
   */
  async _processResponse(response) {
    const self = this;
    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.message || `Error: ${response.status}`);
    }
    return response.json();
  }

  /**
   * Updates DOM elements with credential data and transitions visibility.
   */
  _displayCredentials(data) {
    document.getElementById("token-entry-section").classList.add("hidden");
    document.getElementById("credential-section").classList.remove("hidden");

    document.getElementById("username").innerText = data.username;
    document.getElementById("password").innerText = data.password;

    this._initCopyButtons();
  }

  /**
   * Binds clipboard actions using dynamic import in-place.
   */
  async _initCopyButtons() {
    const self = this;
    const userTrigger = document.getElementById("copy-user-btn");
    const userSource = document.getElementById("username");
    const passTrigger = document.getElementById("copy-pass-btn");
    const passSource = document.getElementById("password");

    const copyUtils = await import("./copyUtils.js");
    copyUtils.bindCopyAction(userTrigger, userSource);
    copyUtils.bindCopyAction(passTrigger, passSource);
  }

  /**
   * UI state helper for the reveal button.
   */
  _toggleLoading(element, isLoading) {
    const self = this;
    element.disabled = isLoading;
    element.innerText = isLoading ? "GENERATING..." : "GET CREDENTIALS";
  }

  /**
   * Renders error state in the reveal section.
   */
  _handleRevealError(msg) {
    const self = this;
    const messageEl = document.getElementById("reveal-section");
    messageEl.innerHTML = `<h1 style="color: #ef4444">Access Denied</h1><p>${msg}</p>`;
  }
}

const manager = new CredentialManager();
manager.init();