{% extends "base.html" %}

{% block title %}امنیت حساب — Hamsoo Identity{% endblock %}

{% block content %}
<div class="card">
  <h1>امنیت حساب</h1>
  <p class="sub">تأیید ایمیل، ورود دومرحله‌ای و کلیدهای امنیتی.</p>

  {% if errors %}
    {% for error in errors %}<div class="error">{{ error }}</div>{% endfor %}
  {% endif %}
  {% if notice %}<div class="success">{{ notice }}</div>{% endif %}
</div>

<div class="card" style="margin-top:20px;">
  <h2>ایمیل</h2>
  <p class="sub">
    {{ account.email|default:"—" }}
    {% if account.email_verified %}
      <span class="badge ok">تأیید شده</span>
    {% else %}
      <span class="badge warn">تأیید نشده</span>
    {% endif %}
  </p>

  {% if account.email and not account.email_verified %}
    <form method="post" style="display:inline-block; margin-left:10px;">
      {% csrf_token %}
      <input type="hidden" name="action" value="email_send" />
      <button type="submit">ارسال کد تأیید</button>
    </form>
    <form method="post" style="margin-top:14px;">
      {% csrf_token %}
      <input type="hidden" name="action" value="email_confirm" />
      <label for="email-code">کد ارسال‌شده</label>
      <input id="email-code" name="code" inputmode="numeric" autocomplete="one-time-code" />
      <button type="submit">تأیید ایمیل</button>
    </form>
  {% endif %}
</div>

<div class="card" style="margin-top:20px;">
  <h2>شمارهٔ موبایل</h2>
  <p class="sub">
    {% if phone_masked %}
      {{ phone_masked }}
      {% if account.phone_verified %}
        <span class="badge ok">تأیید شده</span>
      {% else %}
        <span class="badge warn">تأیید نشده</span>
      {% endif %}
    {% else %}
      <span class="badge warn">ثبت نشده</span>
    {% endif %}
  </p>

  <form method="post">
    {% csrf_token %}
    <input type="hidden" name="action" value="phone_send" />
    <label for="phone-number">شمارهٔ موبایل (مثل 09121234567)</label>
    <input id="phone-number" name="phone" inputmode="tel" autocomplete="tel" required />
    <button type="submit">ارسال کد تأیید</button>
  </form>

  <form method="post" style="margin-top:14px;">
    {% csrf_token %}
    <input type="hidden" name="action" value="phone_confirm" />
    <label for="phone-code">کد تأیید</label>
    <input id="phone-code" name="code" inputmode="numeric" autocomplete="one-time-code" required />
    <label for="phone-number-confirm">شمارهٔ موبایل</label>
    <input id="phone-number-confirm" name="phone" inputmode="tel" autocomplete="tel" required />
    <button type="submit">تأیید شماره</button>
  </form>
</div>

<div class="card" style="margin-top:20px;">
  <h2>ورود دومرحله‌ای (TOTP)</h2>
  <p class="sub">
    {% if account.mfa_enabled %}
      <span class="badge ok">فعال</span> — کدهای بازیابی باقی‌مانده: {{ recovery_remaining }}
    {% else %}
      <span class="badge warn">غیرفعال</span>
    {% endif %}
  </p>

  {% if mfa_setup %}
    <p class="sub">کد QR را با اپلیکیشن احراز هویت اسکن کنید یا کلید را دستی وارد کنید.</p>
    <img src="{{ mfa_setup.qr_code }}" alt="QR" style="width:180px; height:180px; display:block; margin:8px 0;" />
    <div class="fact" style="max-width:420px;">
      <span class="k">کلید دستی</span>
      <span class="v" style="font-family:monospace;">{{ mfa_setup.secret }}</span>
    </div>
    <form method="post" style="margin-top:14px;">
      {% csrf_token %}
      <input type="hidden" name="action" value="mfa_verify" />
      <label for="mfa-code">کد ۶ رقمی</label>
      <input id="mfa-code" name="code" inputmode="numeric" autocomplete="one-time-code" />
      <button type="submit">فعال‌سازی</button>
    </form>
  {% elif account.mfa_enabled %}
    <form method="post" style="margin-top:14px;">
      {% csrf_token %}
      <input type="hidden" name="action" value="mfa_disable" />
      <label for="disable-password">رمز فعلی برای غیرفعال‌سازی</label>
      <input id="disable-password" type="password" name="current_password" autocomplete="current-password" />
      <button type="submit" class="btn ghost" style="border-color:#b42318; color:#b42318;">غیرفعال‌کردن</button>
    </form>

    <form method="post" style="margin-top:14px;">
      {% csrf_token %}
      <input type="hidden" name="action" value="recovery_generate" />
      <label for="recovery-password">رمز فعلی برای ساخت کدهای بازیابی</label>
      <input id="recovery-password" type="password" name="current_password" autocomplete="current-password" />
      <button type="submit">ساخت کدهای بازیابی جدید</button>
    </form>
  {% else %}
    <form method="post" style="margin-top:14px;">
      {% csrf_token %}
      <input type="hidden" name="action" value="mfa_start" />
      <button type="submit">شروع راه‌اندازی</button>
    </form>
  {% endif %}

  {% if recovery_codes %}
    <div class="success" style="margin-top:16px;">
      این کدها فقط یک‌بار نمایش داده می‌شوند؛ در جای امن نگه دارید.
    </div>
    <div class="fact" style="margin-top:10px;">
      {% for code in recovery_codes %}<div style="font-family:monospace; font-size:14px;">{{ code }}</div>{% endfor %}
    </div>
  {% endif %}
</div>

<div class="card" style="margin-top:20px;">
  <h2>کلیدهای امنیتی (Passkey)</h2>
  {% if passkeys %}
    <table>
      <thead>
        <tr><th>نام</th><th>ثبت</th><th>آخرین استفاده</th><th></th></tr>
      </thead>
      <tbody>
        {% for passkey in passkeys %}
          <tr>
            <td>{{ passkey.name|default:"بدون نام" }}</td>
            <td>{{ passkey.created_at|date:"Y-m-d" }}</td>
            <td>{{ passkey.last_used_at|date:"Y-m-d H:i"|default:"—" }}</td>
            <td>
              <form method="post" style="margin:0;">
                {% csrf_token %}
                <input type="hidden" name="action" value="passkey_delete" />
                <input type="hidden" name="passkey_id" value="{{ passkey.id }}" />
                <button type="submit" class="btn ghost" style="margin:0; padding:6px 10px; font-size:12px;">حذف</button>
              </form>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  {% else %}
    <p class="sub">هنوز کلیدی ثبت نشده است.</p>
  {% endif %}

  <button type="button" onclick="addPasskey()">افزودن کلید امنیتی</button>
  <p class="hint">نیازمند مرورگر و دستگاهی با Windows Hello / Touch ID / کلید سخت‌افزاری.</p>
</div>

<script>
  function b64urlToBuf(value) {
    let s = value.replace(/-/g, "+").replace(/_/g, "/");
    const pad = "=".repeat((4 - (s.length % 4)) % 4);
    const bin = atob(s + pad);
    const bytes = new Uint8Array(bin.length);
    for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
    return bytes.buffer;
  }

  function bufToB64url(buffer) {
    const bytes = new Uint8Array(buffer);
    let bin = "";
    for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]);
    return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
  }

  async function addPasskey() {
    const csrf = document.querySelector('input[name="csrfmiddlewaretoken"]').value;
    const name = prompt("نام این کلید (مثلاً لپ‌تاپ من)") || "Passkey";
    if (!window.PublicKeyCredential) {
      alert("این مرورگر از کلید امنیتی پشتیبانی نمی‌کند.");
      return;
    }

    const begin = await fetch("/api/v1/authentication/passkeys/register/begin/", {
      method: "POST",
      headers: { "Content-Type": "application/json", "X-CSRFToken": csrf },
      body: "{}",
    });
    if (!begin.ok) {
      alert("شروع ثبت کلید ناموفق بود.");
      return;
    }

    const options = await begin.json();
    options.challenge = b64urlToBuf(options.challenge);
    options.user.id = b64urlToBuf(options.user.id);
    (options.excludeCredentials || []).forEach((c) => { c.id = b64urlToBuf(c.id); });

    let credential;
    try {
      credential = await navigator.credentials.create({ publicKey: options });
    } catch (e) {
      alert("ساخت کلید لغو شد.");
      return;
    }

    const response = credential.response;
    const payload = {
      id: credential.id,
      rawId: bufToB64url(credential.rawId),
      type: credential.type,
      name: name,
      response: {
        clientDataJSON: bufToB64url(response.clientDataJSON),
        attestationObject: bufToB64url(response.attestationObject),
        transports: response.getTransports ? response.getTransports() : [],
      },
    };

    const finish = await fetch("/api/v1/authentication/passkeys/register/finish/", {
      method: "POST",
      headers: { "Content-Type": "application/json", "X-CSRFToken": csrf },
      body: JSON.stringify(payload),
    });
    if (finish.ok) {
      location.reload();
    } else {
      const error = await finish.json().catch(() => ({}));
      alert(error.detail || "ثبت کلید ناموفق بود.");
    }
  }
</script>
{% endblock %}