{% extends "base.html" %}
{% block title %}
  Complete Setup
{% endblock title %}
{% block og_title %}
  {{ _(server_name) }}
{% endblock og_title %}
{% block og_description %}
  {{ _("Complete your account setup for local servers") }}
{% endblock og_description %}
{% block main %}
  <section class="bg-white dark:bg-gray-900">
    <div class="flex flex-col items-center justify-center px-6 mx-auto h-screen lg:py-0">
      <h1 class="mb-4 text-2xl font-extrabold tracking-tight leading-none text-gray-900 md:text-3xl lg:text-4xl dark:text-white">
        🧙🏼‍♂️ {{ _("Complete Your Account Setup") }}
      </h1>
      <!-- Plex Authentication Success -->
      {% if plex_authenticated %}
        <div class="flex items-center p-4 mb-4 text-sm text-green-800 border border-green-300 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400 dark:border-green-800"
             role="alert">
          <svg class="flex-shrink-0 inline w-4 h-4 me-3"
               aria-hidden="true"
               xmlns="http://www.w3.org/2000/svg"
               fill="currentColor"
               viewBox="0 0 20 20">
            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
          </svg>
          <span class="sr-only">Info</span>
          <div>
            <span class="font-medium">{{ _("Plex Authentication Complete!") }}</span>
            {{ _("Now please set a password for your local server accounts.") }}
          </div>
        </div>
      {% endif %}
      <!-- Local Servers Info -->
      {% if local_servers %}
        <div class="mb-6 w-full max-w-md">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">{{ _("Local Servers") }}</h2>
          <ul class="space-y-2">
            {% for server in local_servers %}
              <li class="flex items-center p-3 text-sm bg-gray-50 rounded-lg dark:bg-gray-700">
                <div class="flex-shrink-0 w-4 h-4 me-3">
                  {% if server.server_type == 'jellyfin' %}
                    <svg class="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
                    </svg>
                  {% elif server.server_type == 'emby' %}
                    <svg class="w-4 h-4 text-green-600"
                         fill="currentColor"
                         viewBox="0 0 24 24">
                      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
                    </svg>
                  {% else %}
                    <svg class="w-4 h-4 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
                    </svg>
                  {% endif %}
                </div>
                <div class="flex-1">
                  <p class="font-medium text-gray-900 dark:text-white">{{ server.name }}</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">{{ server.server_type|title }}</p>
                </div>
              </li>
            {% endfor %}
          </ul>
        </div>
      {% endif %}
      <!-- Password Form -->
      <div class="w-full bg-white rounded-lg shadow-sm dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
        <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
          <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
            {{ _("Set Password for Local Servers") }}
          </h1>
          {% if error %}
            <div class="flex items-center p-4 mb-4 text-sm text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800"
                 role="alert">
              <svg class="flex-shrink-0 inline w-4 h-4 me-3"
                   aria-hidden="true"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="currentColor"
                   viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
              </svg>
              <span class="sr-only">Error</span>
              <div>
                <span class="font-medium">{{ _("Error!") }}</span> {{ error }}
              </div>
            </div>
          {% endif %}
          <form class="space-y-4 md:space-y-6"
                action="{{ url_for('public.process_invitation') }}"
                method="post">
            {% if form %}{{ form.hidden_tag() }}{% endif %}
            <input type="hidden"
                   name="code"
                   value="{{ form.code.data if form and form.code else code }}">
            <input type="hidden" name="plex_token" value="{{ plex_token }}">
            <input type="hidden" name="step" value="local_password">
            <div>
              <label for="username"
                     class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ _("Username") }}</label>
              <input type="text"
                     name="username"
                     id="username"
                     class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                     placeholder="{{ _('Your username') }}"
                     value="{{ form.username.data if form and form.username else '' }}"
                     required>
              {% if form and form.username.errors %}
                {% for error in form.username.errors %}
                  <p class="mt-2 text-sm text-red-600 dark:text-red-500">{{ error }}</p>
                {% endfor %}
              {% endif %}
            </div>
            <div>
              <label for="email"
                     class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                {{ _("Email Address") }}
              </label>
              <input type="email"
                     name="email"
                     id="email"
                     class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                     placeholder="{{ _('your.email@example.com') }}"
                     value="{{ form.email.data if form and form.email else '' }}"
                     required>
              {% if form and form.email.errors %}
                {% for error in form.email.errors %}<p class="mt-2 text-sm text-red-600 dark:text-red-500">{{ error }}</p>{% endfor %}
              {% endif %}
            </div>
            <div>
              <label for="password"
                     class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ _("Password") }}</label>
              <input type="password"
                     name="password"
                     id="password"
                     class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                     placeholder="{{ _('Your password') }}"
                     required>
              {% if form and form.password.errors %}
                {% for error in form.password.errors %}
                  <p class="mt-2 text-sm text-red-600 dark:text-red-500">{{ error }}</p>
                {% endfor %}
              {% endif %}
            </div>
            <div>
              <label for="confirm_password"
                     class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                {{ _("Confirm Password") }}
              </label>
              <input type="password"
                     name="confirm_password"
                     id="confirm_password"
                     class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                     placeholder="{{ _('Confirm your password') }}"
                     required>
              {% if form and form.confirm_password.errors %}
                {% for error in form.confirm_password.errors %}
                  <p class="mt-2 text-sm text-red-600 dark:text-red-500">{{ error }}</p>
                {% endfor %}
              {% endif %}
            </div>
            <div class="flex items-start">
              <div class="flex items-center h-5">
                <input id="agree"
                       aria-describedby="agree"
                       type="checkbox"
                       class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
                       required>
              </div>
              <div class="ml-3 text-sm">
                <label for="agree" class="text-gray-500 dark:text-gray-300">
                  {{ _("I agree to the") }}
                  <a href="#"
                     class="font-medium text-primary-600 hover:underline dark:text-primary-500">
                    {{ _("Terms and Conditions") }}
                  </a>
                </label>
              </div>
            </div>
            <button type="submit"
                    id="setup-submit-btn"
                    class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 disabled:opacity-50 disabled:cursor-not-allowed">
              <span id="setup-btn-text">{{ _("Complete Setup") }}</span>
              <span id="setup-btn-loading" class="hidden">
                <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline"
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24">
                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                  </path>
                </svg>
                {{ _("Setting up...") }}
              </span>
            </button>
          </form>
          <!-- Additional Information -->
          <div class="mt-6 p-4 bg-gray-50 rounded-lg dark:bg-gray-700">
            <h3 class="text-sm font-medium text-gray-900 dark:text-white mb-2">{{ _("What happens next?") }}</h3>
            <ul class="text-sm text-gray-600 dark:text-gray-300 space-y-1">
              <li>• {{ _("Your Plex account is already set up and ready to use") }}</li>
              <li>• {{ _("This password will be used to create accounts on your local servers") }}</li>
              <li>• {{ _("You'll be redirected to the setup wizard to complete configuration") }}</li>
            </ul>
          </div>
          <!-- Back to Plex Only -->
          <div class="text-center">
            <p class="text-sm text-gray-500 dark:text-gray-400">
              {{ _("Only want to use Plex?") }}
              <a href="{{ url_for('public.invite', code=code) }}?plex_only=true"
                 class="font-medium text-primary-600 hover:underline dark:text-primary-500">
                {{ _("Skip local servers") }}
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <script>
      // Password strength indicator
      document.getElementById('password').addEventListener('input', function() {
          const password = this.value;
          const strengthIndicator = document.getElementById('password-strength');

          if (password.length < 8) {
              strengthIndicator.textContent = '{{ _("Password too short") }}';
              strengthIndicator.className = 'mt-1 text-sm text-red-600 dark:text-red-500';
          } else if (password.length < 12) {
              strengthIndicator.textContent = '{{ _("Password strength: Medium") }}';
              strengthIndicator.className = 'mt-1 text-sm text-yellow-600 dark:text-yellow-500';
          } else {
              strengthIndicator.textContent = '{{ _("Password strength: Strong") }}';
              strengthIndicator.className = 'mt-1 text-sm text-green-600 dark:text-green-500';
          }
      });

      // Real-time password confirmation
      document.getElementById('confirm_password').addEventListener('input', function() {
          const password = document.getElementById('password').value;
          const confirmPassword = this.value;
          const submitButton = document.getElementById('setup-submit-btn');

          if (password !== confirmPassword) {
              this.setCustomValidity('{{ _("Passwords do not match") }}');
              submitButton.disabled = true;
          } else {
              this.setCustomValidity('');
              submitButton.disabled = false;
          }
      });

      // Form submission loading state
      document.addEventListener('DOMContentLoaded', function() {
          const form = document.querySelector('form[action="{{ url_for("public.process_invitation") }}"]');
          const submitBtn = document.getElementById('setup-submit-btn');
          const btnText = document.getElementById('setup-btn-text');
          const btnLoading = document.getElementById('setup-btn-loading');

          if (form && submitBtn) {
              form.addEventListener('submit', function(e) {
                  // Only proceed if form validation passes
                  if (form.checkValidity()) {
                      // Disable the button immediately to prevent double submissions
                      submitBtn.disabled = true;

                      // Show loading state
                      btnText.classList.add('hidden');
                      btnLoading.classList.remove('hidden');

                      // Re-enable button after 5 seconds as a fallback in case of network issues
                      setTimeout(function() {
                          submitBtn.disabled = false;
                          btnText.classList.remove('hidden');
                          btnLoading.classList.add('hidden');
                      }, 5000);
                  }
              });
          }
      });
  </script>
  <!-- Add password strength indicator element -->
  <style>
      #password-strength {
          transition: all 0.3s ease;
      }

      .form-field {
          position: relative;
      }

      .form-field input:focus+label {
          color: #3b82f6;
      }

      .loading-spinner {
          display: none;
          width: 20px;
          height: 20px;
          border: 2px solid #f3f3f3;
          border-top: 2px solid #3b82f6;
          border-radius: 50%;
          animation: spin 1s linear infinite;
      }

      @keyframes spin {
          0% {
              transform: rotate(0deg);
          }

          100% {
              transform: rotate(360deg);
          }
      }

      .form-field:focus-within .loading-spinner {
          display: inline-block;
      }
  </style>
{% endblock main %}