{% extends "base.html" %}
{% block title %}Plan & Usage — Settings{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h4 class="mb-0"><i class="bi bi-patch-check me-2"></i>Plan &amp; Usage</h4>
  <div class="btn-group btn-group-sm">
    <a href="{{ url_for('tenant_settings.branding') }}" class="btn btn-outline-secondary">Branding</a>
    <a href="{{ url_for('tenant_settings.plan') }}" class="btn btn-primary">Plan &amp; Usage</a>
    <a href="{{ url_for('tenant_settings.domains') }}" class="btn btn-outline-secondary">Domains</a>
  </div>
</div>

{% if plan_info %}
<div class="row g-3">
  <div class="col-lg-5">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-header bg-white py-2">
        <span class="fw-semibold" style="font-size:.9rem;">Current Plan</span>
      </div>
      <div class="card-body">
        <div class="d-flex align-items-center gap-2 mb-3">
          <span class="badge bg-primary fs-6 px-3 py-2">{{ plan_info.name }}</span>
          <span class="text-muted" style="font-size:.85rem;">{{ plan_info.code }}</span>
        </div>
        <table class="table table-sm mb-0" style="font-size:.85rem;">
          <tbody>
            <tr>
              <td class="text-muted">Mobile API (iPad)</td>
              <td>{% if plan_info.allow_mobile_api %}<i class="bi bi-check-circle-fill text-success"></i>{% else %}<i class="bi bi-x-circle-fill text-danger"></i>{% endif %}</td>
            </tr>
            <tr>
              <td class="text-muted">Scheduled Reports</td>
              <td>{% if plan_info.allow_scheduled_reports %}<i class="bi bi-check-circle-fill text-success"></i>{% else %}<i class="bi bi-x-circle-fill text-danger"></i>{% endif %}</td>
            </tr>
            <tr>
              <td class="text-muted">Branding / White-label</td>
              <td>{% if plan_info.allow_branding %}<i class="bi bi-check-circle-fill text-success"></i>{% else %}<i class="bi bi-x-circle-fill text-danger"></i>{% endif %}</td>
            </tr>
            <tr>
              <td class="text-muted">Custom Domain</td>
              <td>{% if plan_info.allow_custom_domain %}<i class="bi bi-check-circle-fill text-success"></i>{% else %}<i class="bi bi-x-circle-fill text-danger"></i>{% endif %}</td>
            </tr>
          </tbody>
        </table>
        <div class="mt-3">
          {% if billing_enabled %}
            {# MT-8: live subscription status badge #}
            {% if subscription_status == 'trial' %}
              <span class="badge bg-info text-dark mb-2 d-block" style="font-size:.8rem;">
                <i class="bi bi-hourglass-split me-1"></i>
                Free trial{% if trial_ends_at %} — expires {{ trial_ends_at.strftime('%b %d, %Y') }}{% endif %}
              </span>
            {% elif subscription_status == 'active' %}
              <span class="badge bg-success mb-2 d-block" style="font-size:.8rem;">
                <i class="bi bi-check-circle me-1"></i> Active subscription
              </span>
            {% elif subscription_status == 'past_due' %}
              <span class="badge bg-warning text-dark mb-2 d-block" style="font-size:.8rem;">
                <i class="bi bi-exclamation-triangle me-1"></i> Payment past due
              </span>
            {% elif subscription_status == 'cancelled' %}
              <span class="badge bg-danger mb-2 d-block" style="font-size:.8rem;">
                <i class="bi bi-x-circle me-1"></i> Subscription cancelled
              </span>
            {% endif %}
            {# Action button #}
            {% if subscription_status in ('active', 'past_due') %}
            <a href="{{ url_for('billing.portal') }}" class="btn btn-sm btn-outline-primary">
              <i class="bi bi-credit-card me-1"></i> Manage Billing
            </a>
            {% else %}
            <a href="{{ url_for('billing.subscribe') }}" class="btn btn-sm btn-primary">
              <i class="bi bi-lightning-charge me-1"></i> Subscribe Now
            </a>
            {% endif %}
          {% else %}
          <a href="mailto:support@jqc.app?subject=Plan upgrade request"
             class="btn btn-sm btn-outline-primary">
            <i class="bi bi-arrow-up-circle me-1"></i> Request Plan Upgrade
          </a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-7">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-header bg-white py-2">
        <span class="fw-semibold" style="font-size:.9rem;">Usage This Month</span>
      </div>
      <div class="card-body">
        {% set axes = [
          ('inspections', 'Inspections / month', plan_info.max_inspections_month),
          ('issues',      'Issues / month',      plan_info.max_issues_month),
          ('users',       'Active Users (total)', plan_info.max_users),
          ('facilities',  'Active Facilities (total)', plan_info.max_facilities),
        ] %}
        {% for key, label, limit in axes %}
        {% set current = quota_usage.get(key, 0) %}
        {% set pct = ((current / limit * 100) | int) if limit else 0 %}
        {% set over = limit and current >= limit %}
        <div class="mb-3">
          <div class="d-flex justify-content-between mb-1" style="font-size:.85rem;">
            <span>{{ label }}</span>
            <span class="{{ 'text-danger fw-semibold' if over else 'text-muted' }}">
              {{ current }}{% if limit %} / {{ limit }}{% else %} / <em>unlimited</em>{% endif %}
            </span>
          </div>
          {% if limit %}
          <div class="progress" style="height:6px;">
            <div class="progress-bar {{ 'bg-danger' if over else ('bg-warning' if pct >= 80 else 'bg-success') }}"
                 role="progressbar" style="width:{{ [pct,100]|min }}%"></div>
          </div>
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>

{% if billing_enabled and invoices %}
<div class="card border-0 shadow-sm mt-3">
  <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
    <span class="fw-semibold" style="font-size:.9rem;">Invoice History</span>
    <a href="{{ url_for('billing.portal') }}" class="btn btn-xs btn-outline-secondary"
       style="font-size:.75rem;padding:2px 10px;">
      Manage in Stripe &rsaquo;
    </a>
  </div>
  <div class="table-responsive">
    <table class="table table-sm table-hover mb-0" style="font-size:.85rem;">
      <thead class="table-light">
        <tr>
          <th>Invoice #</th>
          <th>Date</th>
          <th>Amount</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for inv in invoices %}
        <tr>
          <td class="text-muted">{{ inv.number }}</td>
          <td>{{ inv.date }}</td>
          <td>{{ inv.amount }}</td>
          <td>
            {% if inv.status == 'paid' %}
              <span class="badge bg-success-subtle text-success border border-success-subtle">Paid</span>
            {% elif inv.status == 'open' %}
              <span class="badge bg-warning-subtle text-warning border border-warning-subtle">Open</span>
            {% elif inv.status == 'void' %}
              <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">Void</span>
            {% elif inv.status == 'uncollectible' %}
              <span class="badge bg-danger-subtle text-danger border border-danger-subtle">Uncollectible</span>
            {% else %}
              <span class="badge bg-light text-muted border">{{ inv.status }}</span>
            {% endif %}
          </td>
          <td class="text-end">
            {% if inv.pdf_url %}
            <a href="{{ inv.pdf_url }}" target="_blank" class="btn btn-xs btn-outline-secondary me-1"
               style="font-size:.75rem;padding:2px 8px;">
              <i class="bi bi-file-pdf me-1"></i>PDF
            </a>
            {% endif %}
            {% if inv.hosted_url %}
            <a href="{{ inv.hosted_url }}" target="_blank" class="btn btn-xs btn-outline-primary"
               style="font-size:.75rem;padding:2px 8px;">
              View
            </a>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}

{% else %}
<div class="alert alert-info">
  Plan information is only available when multi-tenancy is enabled.
</div>
{% endif %}
{% endblock %}