<%- include("partials/layout-top", { title }) %>
<section class="card profile-card">
  <div class="profile-header">
    <div>
      <h1>Your profile</h1>
      <p>Link external accounts to unlock integrations.</p>
    </div>
  </div>

  <div class="profile-section">
    <div class="section-header">
      <div>
        <h2>Username</h2>
        <p class="hint">Shown across the bot and community features.</p>
      </div>
      <% if (canChangeUsername) { %>
      <button type="button" class="button subtle" data-modal-open="username-modal">Change username</button>
      <% } else { %>
      <button type="button" class="button subtle disabled" disabled>Change username</button>
      <% } %>
    </div>
    <div class="profile-username">
      <span class="profile-username-label">Current username</span>
      <span class="profile-username-value"><%= profile.internal_username %></span>
    </div>
    <% if (canChangeUsername) { %>
    <p class="hint">You can change your username once every <%= usernameCooldownDays %> days.</p>
    <% } else { %>
    <p class="hint">Username changes are on cooldown. Try again in <%= usernameCooldownRemainingDays %> day(s).</p>
    <% } %>
  </div>

  <div class="profile-section">
    <h2>Link external accounts</h2>
    <% const linkedProviders = new Set((accounts || []).map((account) => account.provider)); %>
    <div class="profile-actions">
      <% if (platformLinks && platformLinks.length) { %>
      <% platformLinks.forEach((platform) => { %>
      <% if (linkedProviders.has(platform.id)) { %>
      <span class="button subtle disabled" title="<%= platform.label %> is already linked">Linked <%= platform.label %></span>
      <% } else if (platform.configured) { %>
      <a class="button subtle" href="<%= platform.linkPath %>">Link <%= platform.label %></a>
      <% } else { %>
      <span class="button subtle disabled" title="<%= platform.label %> is not configured">Link <%= platform.label %></span>
      <% } %>
      <% }) %>
      <% } else { %>
      <p class="hint">No additional platform links are available.</p>
      <% } %>
    </div>
  </div>

  <div class="profile-section">
    <h2>Linked accounts</h2>
    <% if (!accounts.length) { %>
    <p>No linked accounts yet.</p>
    <% } else { %>
    <ul class="list">
      <% accounts.forEach((account) => { %>
      <li>
        <strong><%= account.provider %></strong>
        <span><%= account.display_name || account.provider_user_id %></span>
        <% if (account.provider !== "discord") { %>
        <form method="post" action="/profile/unlink/<%= account.provider %>" data-confirm-mode="modal" data-confirm-title="Unlink account" data-confirm-text="Unlink this account from your Lumi profile?" data-confirm-label="Unlink account">
          <button type="submit" class="button danger">Unlink</button>
        </form>
        <% } %>
      </li>
      <% }) %>
    </ul>
    <% } %>
  </div>

  <% if (profileSections && profileSections.length) { %>
  <div class="profile-section">
    <h2>Personalized</h2>
    <div class="profile-widgets">
      <% profileSections.forEach((section) => { %>
      <div class="profile-widget">
        <% if (section.label) { %>
        <h3><%= section.label %></h3>
        <% } %>
        <% if (section.view) { %>
        <%- include(section.view, section.locals) %>
        <% } else if (section.content) { %>
        <%- section.content %>
        <% } %>
      </div>
      <% }) %>
    </div>
  </div>
  <% } %>
</section>

<div class="modal-backdrop" data-modal="username-modal" aria-hidden="true">
  <div class="modal">
    <div class="modal-header">
      <h3>Update username</h3>
      <button type="button" class="button subtle" data-modal-close>Close</button>
    </div>
    <form method="post" action="/profile/username" class="form-grid">
      <div class="field">
        <label>Internal username</label>
        <input name="internal_username" value="<%= profile.internal_username %>" />
      </div>
      <p class="hint">This can be changed once every <%= usernameCooldownDays %> days.</p>
      <div class="modal-actions">
        <button type="submit" class="button">Update username</button>
      </div>
    </form>
  </div>
</div>

<script>
  (() => {
    const openButton = document.querySelector("[data-modal-open='username-modal']");
    const modal = document.querySelector("[data-modal='username-modal']");
    if (!openButton || !modal) {
      return;
    }
    const closeButtons = modal.querySelectorAll("[data-modal-close]");
    const closeModal = () => {
      modal.classList.remove("is-open");
      modal.setAttribute("aria-hidden", "true");
    };
    const openModal = () => {
      if (openButton.classList.contains("disabled")) {
        return;
      }
      modal.classList.add("is-open");
      modal.setAttribute("aria-hidden", "false");
    };
    openButton.addEventListener("click", openModal);
    closeButtons.forEach((button) => {
      button.addEventListener("click", closeModal);
    });
    modal.addEventListener("click", (event) => {
      if (event.target === modal) {
        closeModal();
      }
    });
    window.addEventListener("keydown", (event) => {
      if (event.key === "Escape" && modal.classList.contains("is-open")) {
        closeModal();
      }
    });
  })();
</script>

<%- include("partials/layout-bottom") %>
