{% extends "console_page.html" %}

{% block head_extras %}
  <style>
    .code-input {
      display: flex;
      gap: 8px;
    }
    .code-input input {
      width: 45px;
      height: 50px;
      font-size: 22px;
      text-align: center;
      border: 1px solid #ccc;
      border-radius: 6px;
    }
    .code-input input:focus {
      border-color: #007bff;
      outline: none;
      box-shadow: 0 0 3px #007bff;
    }
  </style>
{% endblock %}


{% block console_content %}
  {% load static %}
  <script src="{% static 'js/sms_forms.js' %}"></script>
  <div class="max-w-xl space-y-8">
    <h1 class="text-2xl font-semibold text-gray-800">Profile</h1>

    <!-- Basic Information Section -->
    <form type="POST" id="profile-form" method="post" class="space-y-6">
      {% csrf_token %}
      {{ profile_form.non_field_errors }}
      <div class="space-y-4">
        <h2 class="text-lg font-medium text-gray-800 border-b border-gray-200 pb-2">Basics</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            {{ profile_form.first_name.label_tag }}
            {{ profile_form.first_name }}
          </div>
          <div>
            {{ profile_form.last_name.label_tag }}
            {{ profile_form.last_name }}
          </div>
        </div>
        <div>
          {{ profile_form.timezone.label_tag }}
          {{ profile_form.timezone }}
          {% if profile_form.timezone.help_text %}
            <p class="mt-1 text-xs text-gray-500">{{ profile_form.timezone.help_text }}</p>
          {% endif %}
          {{ profile_form.timezone.errors }}
        </div>
      </div>
      <!-- Hidden input for action -->
      <input type="hidden" name="action" id="action-input" value="">
      <div class="pt-4">
        <button
          type="submit"
          class="inline-flex items-center px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out"
        >
          <i aria-hidden="true" data-lucide="check" class="w-4 h-4 mr-2"></i>
          Save Changes
        </button>
      </div>
    </form>

    <!-- Referral Link Section -->
    <div class="space-y-3">
      <div class="flex items-center justify-between border-b border-gray-200 pb-2">
        <h2 class="text-lg font-medium text-gray-800">Referral Link</h2>
      </div>
      <p class="text-sm text-slate-600">
        Share your link to invite friends and earn task credits when they get started.
      </p>
      <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
        <input
          id="referral-link-input"
          type="text"
          readonly
          value="{{ referral_link }}"
          class="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 sm:flex-1 sm:min-w-0"
        >
        <button
          id="referral-link-copy"
          type="button"
          class="inline-flex items-center justify-center rounded-md bg-blue-600 px-5 py-2 text-sm font-medium text-white transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:shrink-0"
        >
          <i aria-hidden="true" data-lucide="copy" class="w-4 h-4 mr-2"></i>
          Copy link
        </button>
      </div>
      <p id="referral-link-status" class="text-xs text-emerald-700 hidden">Copied to clipboard.</p>
    </div>

    <!-- Phone Numbers Section -->
    <div class="space-y-4">
      <div class="flex items-center justify-between border-b border-gray-200 pb-2">
        <h2 class="text-lg font-medium text-gray-800">Phone Numbers</h2>
      </div>

      {% include "partials/_sms_form.html" with phone=phone add_form=add_form verify_form=verify_form post_url=post_url %}
    </div>
  </div>

  <script>
    (() => {
      const copyBtn = document.getElementById('referral-link-copy');
      const input = document.getElementById('referral-link-input');
      const status = document.getElementById('referral-link-status');
      if (!copyBtn || !input) return;

      const showCopied = () => {
        if (!status) return;
        status.classList.remove('hidden');
        clearTimeout(status._t);
        status._t = setTimeout(() => status.classList.add('hidden'), 2000);
      };

      copyBtn.addEventListener('click', async () => {
        const text = input.value || '';
        try {
          await navigator.clipboard.writeText(text);
          showCopied();
        } catch (err) {
          input.focus();
          input.select();
          input.setSelectionRange(0, text.length);
          try {
            const successful = document.execCommand('copy');
            if (successful) {
              showCopied();
            }
          } catch (copyErr) {
            console.error('Failed to copy referral link', copyErr);
          }
        }
      });
    })();
  </script>
{% endblock %}