{% extends "body_base.html" %}
{% block main %}
<style>
  form.htmx-request {
    opacity: 0.5;
  }
</style>
<main class="container flex-grow flex flex-col mx-auto mt-4 space-y-1">
  <h1 class="text-3xl font-bold mb-2">Account Settings</h1>
  <div class="form-control">
    <label class="label">
      <span class="label-text">Email</span>
    </label>
    <input type="email" name="email" value="{{ user.email }}" class="input text-primary-content input-bordered w-full"
      disabled />
  </div>

  <div class="form-control">
    <label class="label">
      <span class="label-text">API key</span>
    </label>
    {% block api_key_section %}
    {% if user.api_key %}
    <div class="relative">
      <input id="api_key_input" type="text" name="api_key" value="{{ user.api_key }}"
        class="input text-primary-content input-bordered w-full pr-12" disabled />
      <button type="button" id="copy_api_key_btn" onclick="copy_api_key()"
        class="absolute inset-y-0 cursor-pointer right-0 flex items-center pr-3" title="Copy API key">
        {% include "icons/clipboard_icon.html" %}
      </button>
    </div>
    <a href="https://www.icloud.com/shortcuts/66985f7b98a74aaeac6ba29c3f1f0960"
      class="btn btn-accent mt-4 w-full">Download iOS shortcut</a>
    {% else %}
    <button hx-post="/set-api-key" class="btn btn-secondary w-full" hx-swap="outerHTML">
      Create API-Key
    </button>
    {% endif %}
    {% endblock %}
  </div>

  <script>
    // Using a single toast element avoids creating many timeouts when clicking repeatedly.
    let current_toast = null;
    let toast_timeout = null;

    function show_toast(message) {
      if (current_toast) {
        // Update message and reset timeout if a toast is already displayed.
        current_toast.querySelector('span').textContent = message;
        clearTimeout(toast_timeout);
      } else {
        current_toast = document.createElement('div');
        current_toast.className = 'toast';
        current_toast.innerHTML = `<div class="alert alert-success">
        <div>
        <span>${message}</span>
        </div>
        </div>`;
        document.body.appendChild(current_toast);
      }
      toast_timeout = setTimeout(() => {
        if (current_toast) {
          current_toast.remove();
          current_toast = null;
        }
      }, 3000);
    }

    function copy_api_key() {
      const input = document.getElementById('api_key_input');
      if (!input) return;
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(input.value).then(() => {
          show_toast('API key copied!');
        }).catch(() => {
          show_toast('Copy failed');
        });
      } else {
        show_toast('Copy not supported');
      }
    }
  </script>

  <div class="form-control mt-4">
    <label class="label">
      <span class="label-text">Timezone</span>
    </label>
    {% block timezone_section %}
    <select name="timezone" class="select w-full" hx-patch="/update-timezone" hx-swap="outerHTML">
      {% for tz in timezones %}
      <option value="{{ tz }}" {% if tz==user.timezone %}selected{% endif %}>{{ tz }}</option>
      {% endfor %}
    </select>
    {% endblock %}
  </div>

  <div class="form-control mt-4 hidden">
    <button hx-post="/verify-email" class="btn btn-secondary w-full">
      Verify Email
    </button>
  </div>
  <div class="form-control mt-4">
    {% block change_password_section %}
    <button hx-get="/change-password" hx-swap="outerHTML" class="btn btn-primary w-full">
      Change Password
    </button>
    {% endblock %}
  </div>
  <div class="form-control mt-4">
    <button hx-delete="/delete-account"
      hx-confirm="This action will permanently delete your account and all data associated. Are you sure you want to continue?"
      class="btn btn-error w-full">
      Delete Account
    </button>
  </div>
  <div id="account-result" class="mt-4"></div>
</main>
{% endblock %}