{% extends "base.html" %}

{% block content %}

<!-- Header -->
{% if result.errors %}
<div class="text-center mb-4">
  <i class="fa-solid fa-triangle-exclamation fa-3x text-warning mb-3"></i>
  <h5 class="fw-bold">Setup Complete — with Warnings</h5>
</div>
{% else %}
<div class="text-center mb-4">
  <i class="fa-solid fa-circle-check fa-3x text-success mb-3"></i>
  <h5 class="fw-bold">Setup Complete!</h5>
</div>
{% endif %}

<!-- Step results checklist -->
<ul class="list-group mb-4">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    <span><i class="fa fa-database me-2 text-muted"></i>Security database initialised</span>
    {% if result.db_initialized %}
    <span class="badge bg-success"><i class="fa fa-check me-1"></i>OK</span>
    {% else %}
    <span class="badge bg-danger"><i class="fa fa-xmark me-1"></i>Failed</span>
    {% endif %}
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    <span><i class="fa fa-user me-2 text-muted"></i>Admin user created</span>
    {% if result.admin_created %}
    <span class="badge bg-success"><i class="fa fa-check me-1"></i>OK</span>
    {% else %}
    <span class="badge bg-danger"><i class="fa fa-xmark me-1"></i>Failed</span>
    {% endif %}
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    <span><i class="fa fa-plug me-2 text-muted"></i>UniData connection config written</span>
    {% if result.ini_written %}
    <span class="badge bg-success"><i class="fa fa-check me-1"></i>OK</span>
    {% else %}
    <span class="badge bg-secondary"><i class="fa fa-minus me-1"></i>Skipped</span>
    {% endif %}
  </li>
</ul>

<!-- Errors (if any) -->
{% if result.errors %}
<div class="alert alert-warning mb-4">
  <i class="fa fa-triangle-exclamation me-2"></i><strong>Warnings:</strong>
  <ul class="mb-0 mt-1">
    {% for e in result.errors %}<li>{{ e }}</li>{% endfor %}
  </ul>
</div>
{% endif %}

<!-- Critical: save the .env content -->
<div class="alert alert-danger mb-3 d-flex align-items-start gap-2">
  <i class="fa fa-lock fa-lg mt-1 flex-shrink-0"></i>
  <div>
    <strong>Save these values now.</strong><br>
    The JWT secret key <strong>cannot be recovered</strong> after this page is closed.
    Also saved to <code>.env</code> in your project root.
  </div>
</div>

<div class="mb-4">
  <div class="d-flex justify-content-between align-items-center mb-1">
    <label class="form-label fw-semibold mb-0">
      <code>.env</code> file content
    </label>
    <button type="button" class="btn btn-sm btn-outline-secondary"
            onclick="copyText(document.getElementById('envContent').textContent, this)">
      <i class="fa fa-copy me-1"></i>Copy
    </button>
  </div>
  <pre id="envContent" class="bg-dark text-light rounded-2 p-3"
       style="font-size:.82rem">{{ result.env_file_content }}</pre>
</div>

<!-- Encryption status (shown when an INI was written) -->
{% if result.ini_written %}
<div class="alert alert-success py-2 mb-3 d-flex align-items-center gap-2">
  <i class="fa fa-shield-halved flex-shrink-0 text-success"></i>
  <div class="small">
    Passwords in <code>unidata_config.ini</code> are encrypted with
    <strong>Fernet (AES-128-CBC)</strong>.
    Decryption requires <code>JWT_SECRET_KEY</code> — keep it safe.
  </div>
</div>
{% endif %}

<!-- Restart notice -->
<div class="alert alert-info mb-3 d-flex align-items-start gap-2">
  <i class="fa fa-rotate-right fa-lg mt-1 flex-shrink-0"></i>
  <div>
    <strong>Restart required</strong> — the <code>.env</code> file has been written to your working directory.
    Stop the server and start it again so the new <code>JWT_SECRET_KEY</code> takes effect.
    U2 connections have been reloaded automatically.
  </div>
</div>

<!-- Next steps -->
<h6 class="fw-semibold mb-2">Next Steps</h6>
<ol class="mb-4">
  <li class="mb-1">
    First click <strong>Step 5</strong> below to save your client connection configs
  </li>
  <li class="mb-1">
    Then restart the server from your working directory:
    <br>
    <code class="bg-light px-2 py-1 rounded border d-inline-block mt-1" style="font-size:.82rem">uofast-mcp</code>
    <span class="text-muted small ms-2">
      (the .env file is loaded automatically on startup)
    </span>
  </li>
  <li class="mb-1">
    Log in to the <strong>Admin UI</strong> with your new admin credentials
  </li>
</ol>

<!-- CTA -->
<div class="d-grid gap-2">
  <a href="/admin/setup/client-setup" class="btn btn-primary btn-lg">
    <i class="fa fa-laptop-code me-2"></i>Step 5: Configure Your MCP Client
    <i class="fa fa-arrow-right ms-1"></i>
  </a>
  <a href="/admin" class="btn btn-outline-secondary">
    <i class="fa fa-shield-halved me-2"></i>Go to Admin UI
  </a>
  <a href="/docs" class="btn btn-outline-secondary">
    <i class="fa fa-book me-2"></i>API Documentation
  </a>
</div>

{% endblock %}