{% extends "pos/base.html" %}
{% load static %}

{% block title %}FBR Sandbox Testing{% endblock %}

{% block heading %}FBR Sandbox Testing{% endblock %}

{% block content %}

<style>
.scenario-card          { border-left: 4px solid; border-radius: 6px; transition: box-shadow .2s; }
.scenario-card:hover    { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.border-primary         { border-left-color: #4e73df !important; }
.border-info            { border-left-color: #36b9cc !important; }
.border-warning         { border-left-color: #f6c23e !important; }
.border-secondary       { border-left-color: #858796 !important; }
.result-box             { display:none; border-radius:6px; font-size:13px; }
.result-box pre         { font-size:11px; max-height:160px; overflow:auto; margin:0; background:#f8f9fc; padding:8px; border-radius:4px; }
.spinner-border-sm      { width:1rem; height:1rem; border-width:.15em; }
.config-row td:first-child { color:#858796; width:180px; font-size:13px; }
.config-row td:last-child  { font-size:13px; font-weight:600; }
.badge-ok   { background:#1cc88a; color:#fff; padding:2px 8px; border-radius:10px; font-size:11px; }
.badge-fail { background:#e74a3b; color:#fff; padding:2px 8px; border-radius:10px; font-size:11px; }
</style>

<!-- Top bar -->
<div class="d-flex justify-content-between align-items-center mb-4">
  <div>
    <span class="badge badge-{% if config_status.mode == 'production' %}danger{% else %}warning{% endif %} p-2" style="font-size:13px;">
      {{ config_status.mode|upper }}
    </span>
    <a href="{% url 'tax_registrations:config_list' %}?dept=FBR" class="btn btn-sm btn-outline-secondary ml-2">
      <i class="fas fa-cog"></i> FBR Config
    </a>
    <a href="{% url 'tax_registrations:dashboard' %}?dept=FBR" class="btn btn-sm btn-outline-primary ml-1">
      <i class="fas fa-chart-bar"></i> FBR Dashboard
    </a>
  </div>
  <button class="btn btn-dark btn-sm" onclick="runAllScenarios()" id="btn-run-all">
    <i class="fas fa-play-circle"></i> Run All 4 Scenarios
  </button>
</div>

<!-- Config Status Card -->
<div class="card shadow mb-4">
  <div class="card-header py-2 d-flex justify-content-between align-items-center">
    <strong>Config Status</strong>
    {% if config_ok %}
      <span class="badge-ok">✅ Ready to Test</span>
    {% else %}
      <span class="badge-fail">❌ Config Incomplete</span>
    {% endif %}
  </div>
  <div class="card-body py-2">
    <table class="table table-sm table-borderless mb-0">
      <tr class="config-row">
        <td>NTN / CNIC</td>
        <td>
          {% if config_status.ntn_ok %}
            <span class="text-success">{{ config_status.ntn }}</span>
          {% else %}
            <span class="text-danger">NOT SET &nbsp;<a href="{% url 'tax_registrations:config_list' %}?dept=FBR" class="text-danger"><small>→ Fill karein</small></a></span>
          {% endif %}
        </td>
      </tr>
      <tr class="config-row">
        <td>Business Name</td>
        <td>
          {% if config_status.name_ok %}
            <span class="text-success">{{ config_status.business_name }}</span>
          {% else %}
            <span class="text-danger">NOT SET &nbsp;<a href="{% url 'tax_registrations:config_list' %}?dept=FBR" class="text-danger"><small>→ Fill karein</small></a></span>
          {% endif %}
        </td>
      </tr>
      <tr class="config-row">
        <td>Seller Province</td>
        <td><span class="text-dark">{{ config_status.seller_province|default:"—" }}</span></td>
      </tr>
      <tr class="config-row">
        <td>Seller Address</td>
        <td><span class="text-dark">{{ config_status.seller_address|default:"—" }}</span></td>
      </tr>
      <tr class="config-row">
        <td>Sandbox Token</td>
        <td>
          {% if config_status.token_ok %}
            <span class="text-success">{{ config_status.token }}</span>
          {% else %}
            <span class="text-danger">NOT SET &nbsp;<a href="{% url 'tax_registrations:config_list' %}?dept=FBR" class="text-danger"><small>→ Fill karein</small></a></span>
          {% endif %}
        </td>
      </tr>
      <tr class="config-row">
        <td>HS Code (Default)</td>
        <td><code class="text-dark">{{ config_status.hs_code }}</code></td>
      </tr>
      <tr class="config-row">
        <td>Sale Type (Default)</td>
        <td><small class="text-dark">{{ config_status.sale_type }}</small></td>
      </tr>
      <tr class="config-row">
        <td>API URL</td>
        <td><small class="text-muted">{{ config_status.url }}</small></td>
      </tr>
    </table>
  </div>
</div>

<!-- All Scenarios Summary (hidden until Run All) -->
<div id="all-results-box" class="card shadow mb-4" style="display:none;">
  <div class="card-header py-2"><strong>All Scenarios — Summary</strong></div>
  <div class="card-body py-2" id="all-results-body"></div>
</div>

<!-- Scenario Cards -->
<div class="row">
  {% for sc in scenarios %}
  <div class="col-md-6 mb-4">
    <div class="card shadow scenario-card border-{{ sc.color }}">
      <div class="card-body">

        <div class="d-flex justify-content-between align-items-start mb-2">
          <div>
            <span class="badge badge-{{ sc.color }} px-2 py-1" style="font-size:13px;">{{ sc.id }}</span>
            <span class="ml-2" style="font-size:13px; font-weight:600;">{{ sc.sale_type }}</span>
          </div>
          <button
            class="btn btn-{{ sc.color }} btn-sm"
            onclick="runScenario('{{ sc.id }}', this)"
            id="btn-{{ sc.id }}"
            {% if not config_ok %}disabled title="Config fill karein pehle"{% endif %}>
            <i class="fas fa-paper-plane"></i> Test
          </button>
        </div>

        <p class="text-muted mb-2" style="font-size:12px;">{{ sc.description }}</p>

        <table class="table table-sm table-borderless mb-2" style="font-size:12px;">
          <tr>
            <td class="text-muted" style="width:90px;">Tax Rate</td>
            <td><strong>{{ sc.tax_rate }}%</strong></td>
          </tr>
          <tr>
            <td class="text-muted">Test Amount</td>
            <td><strong>Rs. 1,000</strong> (excl. tax)</td>
          </tr>
          <tr>
            <td class="text-muted">HS Code</td>
            <td><code>{{ sc.hs_code }}</code></td>
          </tr>
          <tr>
            <td class="text-muted">Sale Type</td>
            <td><small>{{ sc.sale_type }}</small></td>
          </tr>
        </table>

        <!-- Result box for this scenario -->
        <div class="result-box" id="result-{{ sc.id }}"></div>

      </div>
    </div>
  </div>
  {% endfor %}
</div>

{% endblock %}


{% block javascripts %}
<script>
const CSRF = '{{ csrf_token }}';
const RUN_URL     = '{% url "tax_registrations:fbr_sandbox_run" %}';
const RUN_ALL_URL = '{% url "tax_registrations:fbr_sandbox_run_all" %}';

// ── Run single scenario ──────────────────────────────────────────────────
function runScenario(scenarioId, btn) {
  const resultBox = document.getElementById('result-' + scenarioId);
  const origHtml  = btn.innerHTML;

  btn.disabled  = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Sending...';
  resultBox.style.display = 'none';
  resultBox.innerHTML     = '';

  fetch(RUN_URL, {
    method:  'POST',
    headers: { 'X-CSRFToken': CSRF, 'Content-Type': 'application/x-www-form-urlencoded' },
    body:    'scenario_id=' + encodeURIComponent(scenarioId),
  })
  .then(r => r.json())
  .then(data => {
    showResult(resultBox, data);
    btn.disabled  = false;
    btn.innerHTML = origHtml;
  })
  .catch(err => {
    resultBox.style.display = 'block';
    resultBox.className     = 'result-box alert alert-danger';
    resultBox.innerHTML     = '❌ Network error: ' + err;
    btn.disabled  = false;
    btn.innerHTML = origHtml;
  });
}

// ── Run all scenarios ────────────────────────────────────────────────────
function runAllScenarios() {
  const btn      = document.getElementById('btn-run-all');
  const summBox  = document.getElementById('all-results-box');
  const summBody = document.getElementById('all-results-body');

  btn.disabled  = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Running all...';
  summBox.style.display = 'none';
  summBody.innerHTML    = '';

  // Also show spinners on individual cards
  ['SN008','SN026','SN027','SN028'].forEach(sn => {
    const rb = document.getElementById('result-' + sn);
    if (rb) { rb.style.display='block'; rb.className='result-box alert alert-info'; rb.innerHTML='⏳ Running...'; }
    const b = document.getElementById('btn-' + sn);
    if (b) b.disabled = true;
  });

  fetch(RUN_ALL_URL, {
    method:  'POST',
    headers: { 'X-CSRFToken': CSRF, 'Content-Type': 'application/x-www-form-urlencoded' },
    body:    '',
  })
  .then(r => r.json())
  .then(data => {
    btn.disabled  = false;
    btn.innerHTML = '<i class="fas fa-play-circle"></i> Run All 4 Scenarios';

    // Update individual cards
    if (data.results) {
      Object.keys(data.results).forEach(sn => {
        const rb = document.getElementById('result-' + sn);
        const b  = document.getElementById('btn-' + sn);
        if (rb) showResult(rb, data.results[sn]);
        if (b)  b.disabled = false;
      });
    }

    // Summary table
    summBox.style.display = 'block';
    let html = '<table class="table table-bordered table-sm mb-0" style="font-size:13px;">';
    html += '<thead class="thead-light"><tr><th>Scenario</th><th>Status</th><th>Fiscal Invoice #</th><th>USIN</th><th>Message</th></tr></thead><tbody>';
    let allPass = true;
    if (data.results) {
      Object.keys(data.results).forEach(sn => {
        const r = data.results[sn];
        if (!r.success) allPass = false;
        html += `<tr>
          <td><strong>${sn}</strong></td>
          <td>${r.success ? '<span class="badge badge-success">✅ Pass</span>' : '<span class="badge badge-danger">❌ Fail</span>'}</td>
          <td><code>${r.fiscal_invoice_number || '—'}</code></td>
          <td><small>${r.usin || ''}</small></td>
          <td><small>${r.message || ''}</small></td>
        </tr>`;
      });
    }
    html += '</tbody></table>';
    if (allPass) {
      html = '<div class="alert alert-success mb-2"><strong>🎉 Sab 4 scenarios pass!</strong> Production ke liye ready hain.</div>' + html;
    } else {
      html = '<div class="alert alert-warning mb-2"><strong>⚠️ Kuch scenarios fail hue.</strong> Error message dekh kar fix karein.</div>' + html;
    }
    summBody.innerHTML = html;
  })
  .catch(err => {
    btn.disabled  = false;
    btn.innerHTML = '<i class="fas fa-play-circle"></i> Run All 4 Scenarios';
    summBox.style.display = 'block';
    summBody.innerHTML = '<div class="alert alert-danger">Network error: ' + err + '</div>';
  });
}

// ── Show result in a card ────────────────────────────────────────────────
function showResult(box, data) {
  box.style.display = 'block';
  if (data.success) {
    box.className = 'result-box alert alert-success mt-2';
    box.innerHTML = `
      <div><strong>✅ Success!</strong></div>
      <div>Fiscal Invoice #: <code><strong>${data.fiscal_invoice_number || '—'}</strong></code></div>
      <div><small>USIN: ${data.usin || ''}</small></div>
      ${data.message ? '<div><small>' + data.message + '</small></div>' : ''}
    `;
  } else {
    box.className = 'result-box alert alert-danger mt-2';
    box.innerHTML = `
      <div><strong>❌ Failed</strong></div>
      <div>${data.message || 'Unknown error'}</div>
      ${data.usin ? '<div><small>USIN: ' + data.usin + '</small></div>' : ''}
      ${data.errors ? '<pre>' + data.errors.substring(0, 500) + '</pre>' : ''}
    `;
  }
}
</script>
{% endblock %}