{% extends "base.html" %}
{% block title %}{{ t.export_title }} - {{ config.APP_NAME }}{% endblock %}
{% block paddle %}{% include "_payment_js.html" %}{% endblock %}

{% block head %}
<style>
  .exp-wrap { max-width: 640px; margin: 0 auto; padding: 3rem 0; }
  .exp-hero { text-align: center; margin-bottom: 2rem; }
  .exp-hero h1 { font-size: 1.75rem; margin-bottom: 0.5rem; }
  .exp-hero p { color: #64748B; }
  .exp-price { font-size: 2rem; font-weight: 800; color: #1E293B; text-align: center; margin: 1rem 0; }
  .exp-price span { font-size: 0.875rem; font-weight: 400; color: #64748B; }
  .exp-features {
    list-style: none; padding: 0; margin: 1.5rem 0; display: grid;
    grid-template-columns: 1fr 1fr; gap: 8px;
  }
  .exp-features li {
    font-size: 0.8125rem; color: #475569; display: flex; align-items: flex-start; gap: 6px;
  }
  .exp-features li::before { content: "✓"; color: #16A34A; font-weight: 700; flex-shrink: 0; }
  .exp-form { background: white; border: 1px solid #E2E8F0; border-radius: 14px; padding: 1.5rem; margin: 1.5rem 0; }
  .exp-form label { display: block; font-size: 0.8125rem; font-weight: 600; color: #475569; margin-bottom: 4px; }
  .exp-form select, .exp-form input { width: 100%; margin-bottom: 1rem; }
  .exp-existing { background: white; border: 1px solid #E2E8F0; border-radius: 14px; padding: 1.5rem; margin-top: 2rem; }
  .exp-existing h3 { font-size: 0.9375rem; margin-bottom: 0.75rem; }
  .exp-dl-link {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid #F1F5F9; font-size: 0.8125rem;
  }
  .exp-dl-link:last-child { border-bottom: none; }
  .exp-status { font-size: 0.6875rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
  .exp-status--ready { background: #DCFCE7; color: #16A34A; }
  .exp-status--pending { background: #FEF3C7; color: #D97706; }
  .exp-status--failed { background: #FEE2E2; color: #DC2626; }
</style>
{% endblock %}

{% block content %}
<main class="container-page">
  <div class="exp-wrap">
    <div class="exp-hero">
      <h1>{{ t.export_title }}</h1>
      <p>{{ t.export_subtitle }}</p>
    </div>

    <div class="exp-price">&euro;149 <span>one-time</span></div>

    <ul class="exp-features">
      {% for key in ['planner_export_f1','planner_export_f2','planner_export_f3','planner_export_f4','planner_export_f5','planner_export_f6','planner_export_f7','planner_export_f8'] %}
      <li>{{ t[key] }}</li>
      {% endfor %}
    </ul>

    <div class="exp-form">
      <form id="export-form">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <label>{{ t.export_scenario_label }}</label>
        <select name="scenario_id" class="form-input" required>
          <option value="">{{ t.export_scenario_default }}</option>
          {% for s in scenarios %}
          <option value="{{ s.id }}">{{ s.name }}{% if s.location %} ({{ s.location }}){% endif %}</option>
          {% endfor %}
        </select>

        <label>{{ t.export_language_label }}</label>
        <select name="language" class="form-input">
          <option value="en">English</option>
          <option value="de">Deutsch</option>
        </select>

        <button type="submit" class="btn" style="width:100%;margin-top:0.5rem" id="export-buy-btn">
          {{ t.export_btn }}
        </button>
        <div id="export-error" style="display:none;margin-top:0.75rem;padding:0.75rem 1rem;background:#FEE2E2;color:#991B1B;border-radius:8px;font-size:0.875rem"></div>
      </form>
    </div>

    {% if exports %}
    <div class="exp-existing">
      <h3>{{ t.export_your_exports }}</h3>
      {% for e in exports %}
      <div class="exp-dl-link">
        <div>
          <span>Export #{{ e.id }}</span>
          <span style="color:#94A3B8;font-size:0.75rem;margin-left:8px">{{ e.created_at[:10] }}</span>
        </div>
        <div>
          {% if e.status == 'ready' %}
          <a href="{{ url_for('planner.export_download', token=e.token) }}" class="btn-outline" style="font-size:0.75rem;padding:4px 12px">{{ t.export_download }}</a>
          {% elif e.status == 'pending' or e.status == 'generating' %}
          <span class="exp-status exp-status--pending">{{ t.export_generating }}</span>
          {% else %}
          <span class="exp-status exp-status--failed">{{ t.export_failed }}</span>
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
    {% endif %}

    <p style="text-align:center;margin-top:1.5rem">
      <a href="{{ url_for('planner.index') }}" style="color:#1D4ED8;font-size:0.875rem">{{ t.export_back }}</a>
    </p>
  </div>
</main>
{% endblock %}

{% block scripts %}
<script>
function showExportError(msg) {
  var el = document.getElementById('export-error');
  el.textContent = msg;
  el.style.display = 'block';
}

document.getElementById('export-form').addEventListener('submit', async function(e) {
  e.preventDefault();
  const btn = document.getElementById('export-buy-btn');
  document.getElementById('export-error').style.display = 'none';
  btn.disabled = true;
  btn.textContent = '{{ t.export_generating }}';

  const formData = new FormData(this);
  try {
    const resp = await fetch("{{ url_for('planner.export_checkout') }}", {
      method: 'POST',
      body: formData,
    });
    const data = await resp.json();
    if (data.error) {
      showExportError(data.error);
      btn.disabled = false;
      btn.textContent = '{{ t.export_btn }}';
      return;
    }
    startCheckout(data);
    btn.disabled = false;
    btn.textContent = '{{ t.export_btn }}';
  } catch (err) {
    showExportError('{{ t.export_failed }}');
    btn.disabled = false;
    btn.textContent = '{{ t.export_btn }}';
  }
});
</script>
{% endblock %}
