{% extends "base.html" %}
{% block title %}Setup Wizard - QuantVAT{% endblock %} 
{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/setup.css') }}">
{% endblock %}
{% block content %}
<div class="container">
    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        {% for category, message in messages %}
          <div class="{{ category }}-message">
            {% if category == 'success' %}
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: middle; margin-right: 6px;">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                <polyline points="22 4 12 14.01 9 11.01"></polyline>
              </svg>
            {% else %}
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: middle; margin-right: 6px;">
                <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
                <line x1="12" y1="9" x2="12" y2="13"></line>
                <line x1="12" y1="17" x2="12.01" y2="17"></line>
              </svg>
            {% endif %}
            {{ message }}
          </div>
        {% endfor %}
      {% endif %}
    {% endwith %}

    {% if success %}
      <div class="success-message">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: middle; margin-right: 6px;">
          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
          <polyline points="22 4 12 14.01 9 11.01"></polyline>
        </svg>
        {{ success }}
      </div>
    {% endif %}

    <h1>
        <span style="display: inline-flex; vertical-align: middle; margin-right: 6px;">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="3"></circle>
                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
            </svg>
        </span>
        Setup Wizard
    </h1>
    
    <div class="card">
        <p>Welcome to <b>QuantVAT</b> one-time setup wizard. Configure your API key and VTMR URL to unlock the full potential our tool.</p>
        </div>

    <form action="{{ url_for('main.save_config') }}" method="POST" id="setupForm">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="card">
            <h2 style="color: var(--accent-green);">API Key Setup</h2>
            
            <label>CoinGecko Key <a href="https://www.coingecko.com/en/developers/dashboard" target="_blank" class="get-key-link">Get Demo Key ↗</a></label>
            <input type="text" name="cg_key" value="{{ cg }}" placeholder="Paste CG Key here..." autocomplete="off">

        </div>

        <div class="card">
            <h2 style="color: var(--accent-green);">CoinAlyze Setup</h2>
            
            <label>VTMR URL  </label>
            
            <input type="text" name="vtmr_url" value="{{ vtmr }}" placeholder="https://coinalyze.net/?columns=..." autocomplete="off">
            
            <div class="setup-guide-box">
                <strong style="color:var(--text-main); display:block; margin-bottom:10px;">
                    <span style="display: inline-flex; vertical-align: middle; margin-right: 6px;">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
                            <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
                            <line x1="9" y1="12" x2="15" y2="12"></line>
                            <line x1="9" y1="16" x2="15" y2="16"></line>
                        </svg>
                    </span>
                    Instructions:
                </strong>
                <ol style="margin:0; padding-left:20px; color:var(--text-dim); line-height: 1.6;">
                    <li>Visit <a href="https://github.com/heisbuba/quantvat" target="_blank" style="color: var(--accent-green);text-decoration:underline;">GitHub</a> and copy the VTMR code.
                    </li>
                    <li>Log in to <a href="https://coinalyze.net" target="_blank" style="color: var(--accent-green);text-decoration:underline;">CoinAlyze.net</a>.
                    </li>
                    <li>Create <strong>Custom Metrics</strong> → Name: <strong>VTMR</strong>.</li>
                    <li>Select Columns: <b>Market Cap</b>, <b>Vol 24H</b>, <b>OI Change % 24H</b>, <b>Predicted Funding Rate (OI Weighted), VTMR</b>.</li>
                    <li>Sort the table by <strong>VTMR</strong> (highest first).</li>
                    <li>Copy the <strong>entire browser URL</strong> and paste above.</li>
                </ol>
            </div>
        </div>

        <div class="grid-buttons" style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px;">
            <button type="submit" class="btn btn-green" style="margin: 0; width: 100%; height: 50px; padding: 0; display: flex; align-items: center; justify-content: center; font-weight: 800;">
                LAUNCH
            </button>

            <a href="{{ url_for('auth.logout') }}" class="btn btn-red" style="margin: 0; width: 100%; height: 50px; padding: 0; box-sizing: border-box; text-decoration: none; display: flex; align-items: center; justify-content: center; font-weight: 800;">
                QUIT
            </a>
        </div>
    </form>
</div>

<!-- Auto-save toast -->
<div class="save-toast" id="saveToast">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
    </svg>
    <span>Auto-saved</span>
</div>

<script>
  window.QV = {
    urls: { saveConfig: "{{ url_for('main.save_config') }}" }
  };
</script>
<script src="{{ url_for('static', filename='js/setup.js') }}" defer></script>
{% endblock %}