{% extends "base.html" %}
{% block title %}{{ ui.pro_form.title }} · {{ versions.product_name }}{% endblock %}

{% block content %}
<section class="section">
  <div class="container container--narrow">
    <div class="section-head">
      <h1>{{ ui.pro_form.title }} <span class="badge badge--pro">{{ ui.home.pro_label }}</span></h1>
      <p>{{ ui.pro_form.intro }}</p>
    </div>

    {% if error %}
    <div class="block" style="border-left:4px solid var(--critical); margin-bottom:18px;">
      <p style="margin:0;color:var(--critical);">{{ error }}</p>
    </div>
    {% endif %}

    <div class="card form-card">
      <form method="post" action="{{ url_for('main.run_pro') }}" id="pro-form">
        <div class="field">
          <label for="assessment_name">{{ ui.pro_form.name_label }}</label>
          <input type="text" id="assessment_name" name="assessment_name" value="{{ form.assessment_name if form else '' }}" placeholder="{{ ui.pro_form.name_placeholder }}" required>
        </div>

        <div class="field">
          <label for="application_type">{{ ui.pro_form.type_label }}</label>
          <select id="application_type" name="application_type" required>
            <option value="" disabled {{ 'selected' if not (form and form.application_type) else '' }}>{{ ui.quick_form.type_placeholder }}</option>
            {% for t in application_types %}
            <option value="{{ t.id }}" {{ 'selected' if form and form.application_type == t.id else '' }}>{{ t.name }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="field">
          <label for="description">{{ ui.pro_form.description_label }}</label>
          <textarea id="description" name="description" rows="4" required placeholder="{{ ui.pro_form.description_placeholder }}">{{ form.description if form else '' }}</textarea>
        </div>

        <hr>

        <h3 style="margin-bottom:14px;">{{ ui.pro_form.connection_title }}</h3>

        {% set conn_mode = form.connection_mode if form else 'mock' %}
        <div class="field">
          {% if dev_mode %}
          <label class="radio-row">
            <input type="radio" name="connection_mode" value="mock" {{ 'checked' if conn_mode == 'mock' else '' }} onchange="toggleConnection()">
            <span>{{ ui.pro_form.mock_option }}</span>
            <span class="hint">{{ ui.pro_form.mock_hint }}</span>
          </label>
          {% endif %}
          <label class="radio-row">
            <input type="radio" name="connection_mode" value="api" {{ 'checked' if conn_mode == 'api' else '' }} onchange="toggleConnection()">
            <span>{{ ui.pro_form.custom_option }}</span>
            <span class="hint">{{ ui.pro_form.custom_hint }}</span>
          </label>
        </div>

        <div id="api-fields" style="display:{{ 'block' if conn_mode == 'api' else 'none' }};">
          <div class="field">
            <label for="base_url">{{ ui.pro_form.base_url_label }}</label>
            <input type="text" id="base_url" name="base_url" value="{{ form.base_url if form else '' }}" placeholder="{{ ui.pro_form.base_url_placeholder }}">
          </div>
          <div class="field">
            <label for="api_key">{{ ui.pro_form.api_key_label }}</label>
            <input type="password" id="api_key" name="api_key" value="{{ form.api_key if form else '' }}" placeholder="{{ ui.pro_form.api_key_placeholder }}" autocomplete="off">
            <div class="hint">{{ ui.pro_form.api_key_hint }}</div>
          </div>
          <div class="field">
            <label for="model_name">{{ ui.pro_form.model_label }}</label>
            <input type="text" id="model_name" name="model_name" value="{{ form.model_name if form else '' }}" placeholder="{{ ui.pro_form.model_placeholder }}">
          </div>
          <div class="form-actions" style="margin-top:4px;">
            <button type="button" id="test-connection" class="btn btn-secondary">{{ ui.pro_form.test_button }}</button>
            <span id="test-result" class="small muted"></span>
          </div>
        </div>

        <hr>

        <div class="form-actions">
          <button type="submit" class="btn btn-primary btn-lg">{{ ui.pro_form.run_button }}</button>
          <a href="{{ url_for('main.index') }}" class="btn btn-secondary">{{ ui.common.cancel }}</a>
        </div>
      </form>
    </div>
  </div>
</section>
{% endblock %}

{% block scripts %}
<script>
  function toggleConnection() {
    var el = document.querySelector('input[name="connection_mode"]:checked');
    var mode = el ? el.value : 'api';
    document.getElementById('api-fields').style.display = (mode === 'api') ? 'block' : 'none';
  }
  document.addEventListener('DOMContentLoaded', function () {
    var btn = document.getElementById('test-connection');
    var out = document.getElementById('test-result');
    btn.addEventListener('click', function () {
      var el = document.querySelector('input[name="connection_mode"]:checked');
      var mode = el ? el.value : 'mock';
      out.textContent = 'Testing connection';
      out.style.color = '';
      fetch('/pro/connection/test', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          mode: mode,
          base_url: document.getElementById('base_url').value,
          api_key: document.getElementById('api_key').value,
          model_name: document.getElementById('model_name').value
        })
      })
      .then(function (r) { return r.json(); })
      .then(function (data) {
        out.textContent = data.message || (data.ok ? 'Connection successful' : 'Connection failed');
        out.style.color = data.ok ? 'var(--strong)' : 'var(--critical)';
      })
      .catch(function () {
        out.textContent = 'Connection test failed';
        out.style.color = 'var(--critical)';
      });
    });
  });
</script>
{% endblock %}