{% extends "base.html" %}

{% block content %}
<style>
  .sim-card {
    background: #1a1a2e;
    border: 1px solid #2d2d44;
    border-radius: 12px;
  }
  .sim-card .card-body {
    padding: 1.5rem;
  }
  .sim-label {
    color: #8b8b9e;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
  }
  .sim-value {
    font-size: 1.5rem;
    font-weight: 700;
  }
  .sim-sub {
    color: #6b6b7e;
    font-size: 0.8rem;
  }
  .btn-sim {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    font-weight: 600;
  }
  .btn-sim:hover {
    opacity: 0.9;
    color: white;
  }
  .form-control-dark {
    background: #0f0f1a;
    border: 1px solid #2d2d44;
    color: #fff;
  }
  .form-control-dark:focus {
    background: #0f0f1a;
    border-color: #667eea;
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
  }
</style>

<div class="container-fluid py-4">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="text-white m-0">{{ sim_label }}</h2>
    <div class="d-flex gap-2">
      <span class="badge bg-dark border border-secondary">Theme</span>
      <span class="badge bg-dark border border-secondary">{{ current_user.username or 'User' }}</span>
    </div>
  </div>

  <div class="row g-4">
    <!-- LEFT: Parameters -->
    <div class="col-lg-4">
      <div class="sim-card">
        <div class="card-body">
          <h5 class="text-white mb-4">Simulation Parameters</h5>
          <form id="demandForm" method="POST" action="{{ url_for('simulation.run_simulation', sim_type=sim_type) }}">
            <input type="hidden" name="name" value="{{ sim_label }} - {{ now }}">

            <div class="mb-3">
              <label class="form-label text-light">Demand Increase (%)</label>
              <input type="number" class="form-control form-control-dark" name="demand_increase_percent" value="20" step="1" min="1" max="500" required>
            </div>

            <div class="mb-3">
              <label class="form-label text-light">Product Lines</label>
              <input type="number" class="form-control form-control-dark" name="product_lines" value="3" step="1" min="1" max="50" required>
            </div>

            <div class="mb-3">
              <label class="form-label text-light">Seasonality Factor</label>
              <input type="number" class="form-control form-control-dark" name="seasonality_factor" value="1.0" step="0.1" min="0.1" max="5.0" required>
            </div>

            <button type="submit" class="btn btn-sim w-100 py-2">
              <i class="fas fa-play me-2"></i>Run Simulation
            </button>
          </form>
        </div>
      </div>

      <!-- Baseline -->
      <div class="sim-card mt-4">
        <div class="card-body">
          <h6 class="text-white mb-3">Current Baseline</h6>
          <div class="d-flex justify-content-between mb-2">
            <span class="text-muted">Annual Revenue</span>
            <span class="text-white fw-bold">{{ currency_symbol }}{{ "{:,.0f}".format(baseline.revenue) }}</span>
          </div>
          <div class="d-flex justify-content-between mb-2">
            <span class="text-muted">Annual Costs</span>
            <span class="text-white fw-bold">{{ currency_symbol }}{{ "{:,.0f}".format(baseline.costs) }}</span>
          </div>
          <div class="d-flex justify-content-between">
            <span class="text-muted">Current Profit</span>
            <span class="text-success fw-bold">{{ currency_symbol }}{{ "{:,.0f}".format(baseline.profit) }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- RIGHT: Results -->
    <div class="col-lg-8">
      <div class="sim-card h-100">
        <div class="card-body">
          <h5 class="text-white mb-4">Simulation Results</h5>
          <div id="resultsArea">
            <div class="text-center text-muted py-5">
              <p class="mb-0">Click <strong>Run Simulation</strong> to see results</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>window.CURRENCY_SYMBOL = "{{ currency_symbol }}";</script>
<script src="{{ url_for('static', filename='js/simulation_formatter.js') }}"></script>
<script>
  const CENTER_URL = "{{ url_for('simulation.center') }}";

  document.getElementById('demandForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const form = e.target;
    const btn = form.querySelector('button[type="submit"]');
    const originalText = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Running...';
    btn.disabled = true;

    try {
      const response = await fetch(form.action, {
        method: 'POST',
        body: new FormData(form),
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
      });
      const data = await response.json();
      if (data.success) {
        renderResults(data.simulation);
      }
    } catch (err) {
      console.error(err);
      alert('Simulation failed. Check console.');
    } finally {
      btn.innerHTML = originalText;
      btn.disabled = false;
    }
  });

  function renderResults(sim) {
    const revImpact = (sim.revenue_after || 0) - (sim.revenue_before || 0);
    const profitImpact = (sim.profit_after || 0) - (sim.profit_before || 0);
    const costImpact = (sim.cost_after || 0) - (sim.cost_before || 0);
    const gap = sim.capacity_gap || 0;

    const color = (n) => n >= 0 ? 'text-success' : 'text-danger';
    const riskBadge = (score) => {
      if (score < 40) return 'bg-success';
      if (score < 70) return 'bg-warning text-dark';
      return 'bg-danger';
    };

    document.getElementById('resultsArea').innerHTML = `
      <div class="row g-3 mb-3">
        <div class="col-md-6">
          <div class="sim-card">
            <div class="card-body">
              <div class="sim-label">Revenue Impact</div>
              <div class="sim-value ${color(revImpact)}">${fmtMoneySigned(revImpact)}</div>
              <div class="sim-sub">${fmtMoney(sim.revenue_before)} → ${fmtMoney(sim.revenue_after)}</div>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="sim-card">
            <div class="card-body">
              <div class="sim-label">Profit Impact</div>
              <div class="sim-value ${color(profitImpact)}">${fmtMoneySigned(profitImpact)}</div>
              <div class="sim-sub">${fmtMoney(sim.profit_before)} → ${fmtMoney(sim.profit_after)}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="row g-3 mb-3">
        <div class="col-md-6">
          <div class="sim-card">
            <div class="card-body">
              <div class="sim-label">Cost Impact</div>
              <div class="sim-value ${color(costImpact)}">${fmtMoneySigned(costImpact)}</div>
              <div class="sim-sub">${fmtMoney(sim.cost_before)} → ${fmtMoney(sim.cost_after)}</div>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="sim-card">
            <div class="card-body">
              <div class="sim-label">Capacity Gap</div>
              <div class="sim-value ${gap > 0 ? 'text-danger' : 'text-success'}">${fmtMoney(gap)}</div>
              <div class="sim-sub">${sim.expansion_needed ? 'Expansion required' : 'Within capacity'}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="mb-3 d-flex align-items-center gap-2">
        <span class="text-muted">Risk Score:</span>
        <span class="badge ${riskBadge(sim.risk_score)}">${sim.risk_score}</span>
      </div>

      <div class="sim-card">
        <div class="card-body">
          <div class="sim-label mb-2">Analysis</div>
          <p class="text-light mb-0" style="font-size: 0.95rem; line-height: 1.6;">${escapeHtml(sim.recommendations) || 'No analysis available.'}</p>
        </div>
      </div>

      <div class="mt-3">
        <a href="${CENTER_URL}" class="btn btn-outline-secondary btn-sm">Back to Center</a>
      </div>
    `;
  }
</script>
{% endblock %}