{% extends 'layout/base.html' %}
{% block title %}Новый домен · Админка{% endblock %}
{% block body %}
<div class="content" style="max-width:900px">
  {% include 'admin/_flash.html' %}

  <div class="card" style="margin-bottom:14px">
    <div class="card-body" style="padding:14px 16px">
      <div class="wiz-steps">
        <div class="wiz-step {% if step >= 1 %}active{% endif %} {% if step > 1 %}done{% endif %}">
          <span class="wiz-num">1</span><span>DNS-записи</span>
        </div>
        <div class="wiz-line"></div>
        <div class="wiz-step {% if step >= 2 %}active{% endif %} {% if step > 2 %}done{% endif %}">
          <span class="wiz-num">2</span><span>Проверка</span>
        </div>
        <div class="wiz-line"></div>
        <div class="wiz-step {% if step >= 3 %}active{% endif %}">
          <span class="wiz-num">3</span><span>DKIM и финал</span>
        </div>
      </div>
    </div>
  </div>

  {# ── Step 1 ─────────────────────────────────────────────── #}
  {% if step == 1 %}
  <div class="card">
    <div class="card-head"><div class="card-title">Шаг 1. DNS-записи для нового домена</div></div>
    <div class="card-body">
      <form method="post" class="form-row" style="margin-bottom:14px">
        <input type="hidden" name="step" value="1">
        <label style="color:var(--color-text-secondary);font-size:12px">Домен:</label>
        <input class="compose-input" name="domain" value="{{ domain }}" placeholder="example.com" required
               style="flex:1;border:0.5px solid var(--color-border-tertiary);border-radius:6px;padding:6px 10px">
        <button class="btn btn-primary" type="submit">Показать записи →</button>
      </form>

      {% if records %}
      <p style="color:var(--color-text-secondary);font-size:12px;margin-bottom:10px">
        Скопируйте эти записи в панель управления вашего DNS-регистратора (Cloudflare, REG.RU, Namecheap и т.д.).
        После применения DNS обычно нужно подождать 5–30 минут.
      </p>
      <table class="tbl">
        <thead><tr><th>Тип</th><th>Имя</th><th>Значение</th><th>Назначение</th></tr></thead>
        <tbody>
          {% for r in records %}
          <tr>
            <td><span class="dns-type">{{ r.type }}</span></td>
            <td><code>{{ r.name }}</code></td>
            <td style="max-width:380px"><code style="word-break:break-all;white-space:pre-wrap">{{ r.value }}</code></td>
            <td style="color:var(--color-text-secondary);font-size:12px">{{ r.hint }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>

      <div style="margin-top:14px;display:flex;gap:8px">
        <a class="btn" href="{{ url_for('admin.domains') }}">Отмена</a>
        <span style="flex:1"></span>
        <form method="post" style="display:inline">
          <input type="hidden" name="step" value="1">
          <input type="hidden" name="domain" value="{{ domain }}">
          <button class="btn btn-primary" type="submit">Далее: проверка →</button>
        </form>
      </div>
      {% endif %}
    </div>
  </div>

  {# ── Step 2 ─────────────────────────────────────────────── #}
  {% elif step == 2 %}
  <div class="card">
    <div class="card-head" style="display:flex;align-items:center">
      <div class="card-title">Шаг 2. Проверка DNS-записей для <code>{{ domain }}</code></div>
      <span style="flex:1"></span>
      <a class="btn" href="{{ url_for('admin.domain_new', step=2, domain=domain) }}" title="Перепроверить">↻ Перепроверить</a>
    </div>
    <div class="card-body" style="padding:0">
      <table class="tbl">
        <thead><tr><th style="width:1%"></th><th>Тип</th><th>Имя</th><th>Текущее значение</th></tr></thead>
        <tbody>
          {% for v in verify %}
          <tr>
            <td>{% if v.ok %}<span class="dns-ok">✓</span>{% else %}<span class="dns-fail">✗</span>{% endif %}</td>
            <td><span class="dns-type">{{ v.type }}</span></td>
            <td><code>{{ v.name }}</code></td>
            <td style="max-width:480px;color:{% if v.ok %}var(--color-text-primary){% else %}var(--color-text-tertiary){% endif %}">
              <code style="word-break:break-all;white-space:pre-wrap;font-size:11px">{{ v.current }}</code>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <div class="card-body" style="border-top:0.5px solid var(--color-border-tertiary);font-size:12px;color:var(--color-text-secondary)">
      Если записи ещё не подтянулись — DNS обновляется не мгновенно (TTL вашего регистратора). Подождите и нажмите «Перепроверить».
      DKIM-запись на этом шаге может быть пустой — она появится после Шага 3.
    </div>
  </div>
  <div style="margin-top:14px;display:flex;gap:8px">
    <a class="btn" href="{{ url_for('admin.domain_new', step=1, domain=domain) }}">← Назад</a>
    <span style="flex:1"></span>
    <form method="post" style="display:inline">
      <input type="hidden" name="step" value="2">
      <input type="hidden" name="domain" value="{{ domain }}">
      <button class="btn btn-primary" type="submit">Далее: DKIM →</button>
    </form>
  </div>

  {# ── Step 3 ─────────────────────────────────────────────── #}
  {% elif step == 3 %}
  <div class="card">
    <div class="card-head"><div class="card-title">Шаг 3. DKIM и завершение</div></div>
    <div class="card-body">
      {% if not dkim %}
        <p style="color:var(--color-text-secondary);margin-bottom:12px">
          DKIM-ключ для <code>{{ domain }}</code> ещё не создан. Сгенерируйте его — после этого скопируйте
          получившуюся TXT-запись в DNS вашего регистратора.
        </p>
        <form method="post">
          <input type="hidden" name="step" value="3">
          <input type="hidden" name="domain" value="{{ domain }}">
          <input type="hidden" name="action" value="dkim">
          <button class="btn btn-primary" type="submit">Сгенерировать DKIM</button>
        </form>
      {% else %}
        <p style="color:var(--color-text-secondary);margin-bottom:8px">
          Добавьте эту TXT-запись в DNS:
        </p>
        <table class="tbl">
          <tr>
            <td style="width:80px"><span class="dns-type">TXT</span></td>
            <td style="width:260px"><code>mail._domainkey.{{ domain }}</code></td>
            <td><code style="word-break:break-all;white-space:pre-wrap;font-size:11px">{{ dkim }}</code></td>
          </tr>
        </table>
        <p style="margin-top:12px;color:var(--color-text-secondary);font-size:12px">
          После применения DNS — нажмите «Готово». Можно вернуться на Шаг 2 и перепроверить, что все записи активны.
        </p>
      {% endif %}
    </div>
  </div>
  <div style="margin-top:14px;display:flex;gap:8px">
    <a class="btn" href="{{ url_for('admin.domain_new', step=2, domain=domain) }}">← Назад</a>
    <span style="flex:1"></span>
    <form method="post" style="display:inline">
      <input type="hidden" name="step" value="3">
      <input type="hidden" name="domain" value="{{ domain }}">
      <input type="hidden" name="action" value="finish">
      <button class="btn btn-primary" type="submit">Готово</button>
    </form>
  </div>
  {% endif %}
</div>

<style>
.wiz-steps{display:flex;align-items:center;gap:14px}
.wiz-step{display:flex;align-items:center;gap:8px;color:var(--color-text-tertiary);font-size:13px}
.wiz-step.active{color:var(--color-text-primary);font-weight:500}
.wiz-step.done{color:var(--color-text-secondary)}
.wiz-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);font-size:12px}
.wiz-step.active .wiz-num{background:var(--color-text-primary);color:var(--color-background-primary);border-color:transparent}
.wiz-step.done .wiz-num{background:#2e7d32;color:#fff;border-color:transparent}
.wiz-step.done .wiz-num::before{content:'✓';font-size:13px}
.wiz-step.done .wiz-num{font-size:0}
.wiz-line{flex:1;height:0.5px;background:var(--color-border-tertiary);max-width:80px}
.dns-ok{color:#2e7d32;font-weight:600;font-size:14px}
.dns-fail{color:var(--color-text-danger);font-weight:600;font-size:14px}
.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.flash-stack{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.flash{padding:8px 12px;border-radius:6px;border:0.5px solid var(--color-border-tertiary);font-size:12px}
.flash-ok{background:#e8f5e9;color:#1b5e20;border-color:#c8e6c9}
.flash-err{background:#fce8e6;color:#9b2c2c;border-color:#f5c0c0}
body.dark .flash-ok{background:#0f3a18;color:#a8e8b9;border-color:#1f5a2d}
body.dark .flash-err{background:#3a1212;color:#f0a8a8;border-color:#5c2020}
.dns-type{display:inline-block;padding:1px 6px;background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:4px;font-size:11px;font-family:monospace}
code{font-family:'SF Mono',Menlo,monospace;font-size:12px}
</style>
{% endblock %}