{% extends "admin/base_admin.html" %}
{% set admin_page = "affiliate_programs" %}

{% block title %}{% if editing %}Edit Program{% else %}New Program{% endif %} - Admin - {{ config.APP_NAME }}{% endblock %}

{% block admin_head %}
<script>
function slugify(text) {
  return text.toLowerCase()
    .replace(/[äöü]/g, c => ({'ä':'ae','ö':'oe','ü':'ue'}[c]))
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-+|-+$/g, '');
}
document.addEventListener('DOMContentLoaded', function() {
  var nameInput = document.getElementById('f-name');
  var slugInput = document.getElementById('f-slug');
  if (nameInput && slugInput && !slugInput.value) {
    nameInput.addEventListener('input', function() {
      if (!slugInput.dataset.manual) {
        slugInput.value = slugify(nameInput.value);
      }
    });
    slugInput.addEventListener('input', function() {
      slugInput.dataset.manual = '1';
    });
  }
});
</script>
{% endblock %}

{% block admin_content %}
  <header class="flex justify-between items-center mb-6">
    <div>
      <a href="{{ url_for('admin.affiliate_programs') }}" class="text-slate text-sm" style="text-decoration:none">← Programs</a>
      <h1 class="text-2xl mt-1">{% if editing %}Edit Program{% else %}New Program{% endif %}</h1>
    </div>
  </header>

  <div style="max-width:600px">
    <form method="post" id="program-form"
          action="{% if editing %}{{ url_for('admin.affiliate_program_edit', program_id=program_id) }}{% else %}{{ url_for('admin.affiliate_program_new') }}{% endif %}">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

      <div class="card" style="padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem;">

        {# Name #}
        <div>
          <label class="form-label" for="f-name">Name *</label>
          <input id="f-name" type="text" name="name" value="{{ data.get('name','') }}"
                 class="form-input" placeholder="e.g. Amazon, Padel Nuestro" required>
        </div>

        {# Slug #}
        <div>
          <label class="form-label" for="f-slug">Slug *</label>
          <input id="f-slug" type="text" name="slug" value="{{ data.get('slug','') }}"
                 class="form-input" placeholder="e.g. amazon, padel-nuestro" required
                 pattern="[a-z0-9][a-z0-9\-]*">
          <p class="form-hint">Lowercase letters, numbers, hyphens only.</p>
        </div>

        {# URL Template #}
        <div>
          <label class="form-label" for="f-template">URL Template *</label>
          <input id="f-template" type="text" name="url_template" value="{{ data.get('url_template','') }}"
                 class="form-input" placeholder="https://www.amazon.de/dp/{product_id}?tag={tag}" required>
          <p class="form-hint">
            Use <code>{product_id}</code> for the ASIN/product path and <code>{tag}</code> for the tracking tag.<br>
            Example: <code>https://www.amazon.de/dp/{product_id}?tag={tag}</code>
          </p>
        </div>

        {# Tracking Tag + Commission row #}
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
          <div>
            <label class="form-label" for="f-tag">Tracking Tag</label>
            <input id="f-tag" type="text" name="tracking_tag" value="{{ data.get('tracking_tag','') }}"
                   class="form-input" placeholder="e.g. padelnomics-21">
          </div>
          <div>
            <label class="form-label" for="f-commission">Commission %</label>
            <input id="f-commission" type="number" name="commission_pct" value="{{ data.get('commission_pct', 0) }}"
                   class="form-input" placeholder="3" step="0.1" min="0" max="100">
            <p class="form-hint">Used for revenue estimates (e.g. 3 = 3%).</p>
          </div>
        </div>

        {# Homepage URL #}
        <div>
          <label class="form-label" for="f-homepage">Homepage URL</label>
          <input id="f-homepage" type="url" name="homepage_url" value="{{ data.get('homepage_url','') }}"
                 class="form-input" placeholder="https://www.amazon.de">
          <p class="form-hint">Shown as a link in the programs list.</p>
        </div>

        {# Status #}
        <div>
          <label class="form-label" for="f-status">Status</label>
          <select id="f-status" name="status" class="form-input">
            {% for s in program_statuses %}
            <option value="{{ s }}" {% if data.get('status','active') == s %}selected{% endif %}>{{ s | capitalize }}</option>
            {% endfor %}
          </select>
          <p class="form-hint">Inactive programs are hidden from the product form dropdown.</p>
        </div>

        {# Notes #}
        <div>
          <label class="form-label" for="f-notes">Notes <span class="form-hint" style="font-weight:normal">(internal)</span></label>
          <textarea id="f-notes" name="notes" rows="3"
                    class="form-input" placeholder="Login URL, account ID, affiliate dashboard link...">{{ data.get('notes','') }}</textarea>
        </div>

        {# Actions #}
        <div class="flex gap-3 justify-between" style="margin-top:.5rem">
          <div class="flex gap-2">
            <button type="submit" class="btn">
              {% if editing %}Save Changes{% else %}Create Program{% endif %}
            </button>
            <a href="{{ url_for('admin.affiliate_programs') }}" class="btn-outline">Cancel</a>
          </div>
          {% if editing %}
          <form method="post" action="{{ url_for('admin.affiliate_program_delete', program_id=program_id) }}" style="margin:0" hx-boost="true">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="btn-outline"
          </form>
          {% endif %}
        </div>

      </div>
    </form>
  </div>
{% endblock %}
