{% extends "base.html" %}
{% block title %}Déclaration TVA – AAZ Accounting{% endblock %}
{% block page_title %}Déclaration TVA trimestrielle – 3310-CA3{% endblock %}

{% block topbar_actions %}
<select id="yearPicker" class="btn btn-outline btn-sm" onchange="updatePeriod()">
  {% for y in years %}<option value="{{ y }}" {% if y==year %}selected{% endif %}>{{ y }}</option>{% endfor %}
</select>
{% endblock %}

{% block content %}

<!-- Sélection trimestre -->
<div class="card mb-2">
  <div class="card-body" style="padding:1rem 1.5rem">
    <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap">
      <span style="font-weight:600;color:var(--primary)">Période :</span>
      {% for q in quarters %}
      <a href="{{ url_for('tva.index', year=year, quarter=loop.index, compute=1) }}"
         class="btn {% if loop.index == q_num %}btn-primary{% else %}btn-outline{% endif %} btn-sm">
        {{ q.label }}
        <span style="font-size:.72rem;opacity:.7;margin-left:.3rem">
          {{ q.start.strftime('%d/%m') }}→{{ q.end.strftime('%d/%m') }}
        </span>
      </a>
      {% endfor %}
      {% if not declaration %}
      <a href="{{ url_for('tva.index', year=year, quarter=q_num, compute=1) }}"
         class="btn btn-success btn-sm">▶ Calculer</a>
      {% endif %}
    </div>

    {% if declaration %}
    <div style="margin-top:.75rem;font-size:.83rem;color:var(--text-muted)">
      Période du <strong>{{ selected.start.strftime('%d/%m/%Y') }}</strong>
      au <strong>{{ selected.end.strftime('%d/%m/%Y') }}</strong> —
      Dépôt avant le <strong>{{ selected.deadline.strftime('%d/%m/%Y') }}</strong>
    </div>
    {% endif %}
  </div>
</div>

{% if declaration %}

<!-- Avertissements -->
{% for w in declaration.warnings %}
<div class="alert alert-warning">{{ w }}</div>
{% endfor %}

<!-- Résultat principal -->
<div class="kpi-grid" style="grid-template-columns:repeat(4,1fr);margin-bottom:1.5rem">
  <div class="kpi-card primary">
    <div class="kpi-label">Recettes HT (A1)</div>
    <div class="kpi-value">{{ declaration.A1_recettes_ht }} €</div>
  </div>
  <div class="kpi-card danger">
    <div class="kpi-label">TVA brute collectée (L.17)</div>
    <div class="kpi-value">{{ declaration.ligne_17_total_brute }} €</div>
  </div>
  <div class="kpi-card success">
    <div class="kpi-label">TVA déductible (L.23)</div>
    <div class="kpi-value">{{ declaration.ligne_23_total_deduc }} €</div>
  </div>
  <div class="kpi-card {% if declaration.is_credit %}success{% else %}warning{% endif %}">
    <div class="kpi-label">{% if declaration.is_credit %}Crédit TVA (L.25){% else %}TVA due (L.24){% endif %}</div>
    <div class="kpi-value">
      {% if declaration.is_credit %}{{ declaration.ligne_25_credit }}{% else %}{{ declaration.ligne_24_tva_due }}{% endif %} €
    </div>
    <div class="kpi-sub">{% if declaration.is_credit %}À reporter / rembourser{% else %}À payer avant {{ selected.deadline.strftime('%d/%m/%Y') }}{% endif %}</div>
  </div>
</div>

<!-- Formulaire CERFA 3310-CA3 -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem">

  <!-- Section A + B TVA brute -->
  <div class="card">
    <div class="card-header" style="background:var(--primary);color:#fff">
      Formulaire 3310-CA3 — Ce que vous remplissez sur impots.gouv.fr
    </div>
    <div class="card-body" style="padding:0">

      <!-- Section A -->
      <div style="padding:1rem 1.5rem;border-bottom:1px solid var(--border);background:#F8FAFC">
        <div style="font-size:.75rem;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin-bottom:.75rem;letter-spacing:.05em">
          A – Montant des opérations réalisées
        </div>
        {% call cerfa_row("A1", "Ventes, prestations de services", declaration.A1_recettes_ht, "Chiffre d'affaires HT de la période") %}{% endcall %}
        {% call cerfa_row("A2", "Autres opérations imposables", declaration.A2_autres_ops, "Si applicable") %}{% endcall %}
      </div>

      <!-- Section B TVA brute -->
      <div style="padding:1rem 1.5rem;border-bottom:1px solid var(--border)">
        <div style="font-size:.75rem;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin-bottom:.75rem;letter-spacing:.05em">
          B – TVA brute (ce que vous avez collecté)
        </div>

        <!-- Ligne 08 – 20% -->
        <div class="cerfa-row">
          <div class="cerfa-case">08</div>
          <div class="cerfa-label">Taux normal 20%</div>
          <div class="cerfa-values">
            <div class="cerfa-field">
              <div class="cerfa-field-label">Base HT</div>
              <div class="cerfa-amount {% if declaration.ligne_08_base_20 != '0.00' %}cerfa-filled{% endif %}">
                {{ declaration.ligne_08_base_20 }} €
              </div>
            </div>
            <div class="cerfa-field">
              <div class="cerfa-field-label">Taxe due</div>
              <div class="cerfa-amount cerfa-tva {% if declaration.ligne_08_tva_20 != '0.00' %}cerfa-filled{% endif %}">
                {{ declaration.ligne_08_tva_20 }} €
              </div>
            </div>
          </div>
        </div>

        <!-- Ligne 09 – 5,5% -->
        <div class="cerfa-row">
          <div class="cerfa-case">09</div>
          <div class="cerfa-label">Taux réduit 5,5%</div>
          <div class="cerfa-values">
            <div class="cerfa-field">
              <div class="cerfa-field-label">Base HT</div>
              <div class="cerfa-amount {% if declaration.ligne_09_base_55 != '0.00' %}cerfa-filled{% endif %}">
                {{ declaration.ligne_09_base_55 }} €
              </div>
            </div>
            <div class="cerfa-field">
              <div class="cerfa-field-label">Taxe due</div>
              <div class="cerfa-amount cerfa-tva {% if declaration.ligne_09_tva_55 != '0.00' %}cerfa-filled{% endif %}">
                {{ declaration.ligne_09_tva_55 }} €
              </div>
            </div>
          </div>
        </div>

        <!-- Ligne 9B – 10% -->
        <div class="cerfa-row">
          <div class="cerfa-case">9B</div>
          <div class="cerfa-label">Taux intermédiaire 10%</div>
          <div class="cerfa-values">
            <div class="cerfa-field">
              <div class="cerfa-field-label">Base HT</div>
              <div class="cerfa-amount {% if declaration.ligne_9B_base_10 != '0.00' %}cerfa-filled{% endif %}">
                {{ declaration.ligne_9B_base_10 }} €
              </div>
            </div>
            <div class="cerfa-field">
              <div class="cerfa-field-label">Taxe due</div>
              <div class="cerfa-amount cerfa-tva {% if declaration.ligne_9B_tva_10 != '0.00' %}cerfa-filled{% endif %}">
                {{ declaration.ligne_9B_tva_10 }} €
              </div>
            </div>
          </div>
        </div>

        <!-- Ligne 17 – Total brute -->
        <div class="cerfa-row cerfa-total">
          <div class="cerfa-case" style="background:var(--primary);color:#fff">17</div>
          <div class="cerfa-label" style="font-weight:700">Total TVA brute</div>
          <div class="cerfa-values">
            <div class="cerfa-field">
              <div class="cerfa-amount cerfa-total-amount">{{ declaration.ligne_17_total_brute }} €</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Section B TVA déductible -->
      <div style="padding:1rem 1.5rem">
        <div style="font-size:.75rem;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin-bottom:.75rem;letter-spacing:.05em">
          TVA déductible (ce que vous avez payé)
        </div>

        <div class="cerfa-row">
          <div class="cerfa-case">19</div>
          <div class="cerfa-label">Dont TVA sur immobilisations</div>
          <div class="cerfa-values">
            <div class="cerfa-field">
              <div class="cerfa-amount {% if declaration.ligne_19_tva_immo != '0.00' %}cerfa-filled{% endif %}">
                {{ declaration.ligne_19_tva_immo }} €
              </div>
            </div>
          </div>
        </div>

        <div class="cerfa-row">
          <div class="cerfa-case">20</div>
          <div class="cerfa-label">Dont TVA sur autres biens et services</div>
          <div class="cerfa-values">
            <div class="cerfa-field">
              <div class="cerfa-amount {% if declaration.ligne_20_tva_services != '0.00' %}cerfa-filled{% endif %}">
                {{ declaration.ligne_20_tva_services }} €
              </div>
            </div>
          </div>
        </div>

        <div class="cerfa-row cerfa-total">
          <div class="cerfa-case" style="background:var(--success);color:#fff">23</div>
          <div class="cerfa-label" style="font-weight:700">Total TVA déductible</div>
          <div class="cerfa-values">
            <div class="cerfa-field">
              <div class="cerfa-amount cerfa-total-amount">{{ declaration.ligne_23_total_deduc }} €</div>
            </div>
          </div>
        </div>

        <!-- Résultat final -->
        <div style="margin-top:1rem;padding:1rem;border-radius:8px;background:{% if declaration.is_credit %}#DCFCE7{% else %}#FEF9C3{% endif %}">
          <div style="display:flex;justify-content:space-between;align-items:center">
            <div>
              <div style="font-weight:700;font-size:.9rem">
                {% if declaration.is_credit %}
                  ✅ Ligne 25 – Crédit de TVA
                {% else %}
                  ⚠️ Ligne 24 – TVA nette due
                {% endif %}
              </div>
              <div style="font-size:.8rem;color:var(--text-muted);margin-top:.2rem">
                {% if declaration.is_credit %}
                  À reporter ou demander en remboursement
                {% else %}
                  À régler avant le {{ selected.deadline.strftime('%d/%m/%Y') }}
                {% endif %}
              </div>
            </div>
            <div style="font-size:1.5rem;font-weight:800;color:{% if declaration.is_credit %}var(--success){% else %}var(--warning){% endif %}">
              {% if declaration.is_credit %}{{ declaration.ligne_25_credit }}{% else %}{{ declaration.ligne_24_tva_due }}{% endif %} €
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Détail par compte + instructions -->
  <div style="display:flex;flex-direction:column;gap:1.5rem">

    <!-- Détail TVA déductible -->
    <div class="card">
      <div class="card-header">Détail TVA déductible par compte</div>
      <div class="card-body" style="padding:0">
        <table>
          <thead><tr><th>Compte</th><th>Taux</th><th class="text-right">TVA</th></tr></thead>
          <tbody>
            {% for d in declaration.detail_deductible %}
            <tr>
              <td class="font-mono" style="font-size:.82rem">{{ d.account }}</td>
              <td><span class="tag tag-info" style="font-size:.72rem">{{ d.rate }}{% if d.rate not in ('formation','0') %}%{% endif %}</span></td>
              <td class="text-right font-mono">{{ "%.2f"|format(d.tva) }} €</td>
            </tr>
            {% else %}
            <tr><td colspan="3" class="text-center text-muted" style="padding:1rem">Aucune TVA déductible sur la période</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <!-- Guide de saisie -->
    <div class="card">
      <div class="card-header">Guide de saisie sur impots.gouv.fr</div>
      <div class="card-body">
        <ol style="font-size:.87rem;line-height:2;color:var(--text-muted);padding-left:1.2rem">
          <li>Aller sur <a href="https://cfspro.impots.gouv.fr" target="_blank" style="color:var(--accent)">impots.gouv.fr</a> → Espace Pro → Déclarer TVA</li>
          <li>Sélectionner le formulaire <strong>3310-CA3</strong></li>
          <li>Période : <strong>{{ selected.start.strftime('%d/%m/%Y') }} → {{ selected.end.strftime('%d/%m/%Y') }}</strong></li>
          <li>Case <strong>A1</strong> : saisir <strong>{{ declaration.A1_recettes_ht }} €</strong></li>
          {% if declaration.ligne_08_base_20 != '0.00' %}
          <li>Case <strong>08</strong> (base 20%) : <strong>{{ declaration.ligne_08_base_20 }} €</strong></li>
          <li>Case <strong>08</strong> (taxe) : <strong>{{ declaration.ligne_08_tva_20 }} €</strong></li>
          {% endif %}
          {% if declaration.ligne_9B_base_10 != '0.00' %}
          <li>Case <strong>9B</strong> (base 10%) : <strong>{{ declaration.ligne_9B_base_10 }} €</strong></li>
          <li>Case <strong>9B</strong> (taxe) : <strong>{{ declaration.ligne_9B_tva_10 }} €</strong></li>
          {% endif %}
          {% if declaration.ligne_09_base_55 != '0.00' %}
          <li>Case <strong>09</strong> (base 5,5%) : <strong>{{ declaration.ligne_09_base_55 }} €</strong></li>
          <li>Case <strong>09</strong> (taxe) : <strong>{{ declaration.ligne_09_tva_55 }} €</strong></li>
          {% endif %}
          {% if declaration.ligne_20_tva_services != '0.00' %}
          <li>Case <strong>20</strong> (TVA déductible services) : <strong>{{ declaration.ligne_20_tva_services }} €</strong></li>
          {% endif %}
          {% if declaration.ligne_19_tva_immo != '0.00' %}
          <li>Case <strong>19</strong> (TVA déductible immo) : <strong>{{ declaration.ligne_19_tva_immo }} €</strong></li>
          {% endif %}
          <li>Vérifier que la ligne <strong>17</strong> affiche <strong>{{ declaration.ligne_17_total_brute }} €</strong></li>
          <li>Vérifier que la ligne <strong>23</strong> affiche <strong>{{ declaration.ligne_23_total_deduc }} €</strong></li>
          <li>
            {% if declaration.is_credit %}
            La ligne <strong>25</strong> doit afficher <strong>{{ declaration.ligne_25_credit }} €</strong> (crédit)
            {% else %}
            La ligne <strong>24</strong> doit afficher <strong>{{ declaration.ligne_24_tva_due }} €</strong>
            {% endif %}
          </li>
          <li>Valider et payer avant le <strong style="color:var(--danger)">{{ selected.deadline.strftime('%d/%m/%Y') }}</strong></li>
        </ol>
      </div>
    </div>
  </div>
</div>

{% else %}
<!-- Pas encore calculé -->
<div class="card">
  <div class="card-body text-center" style="padding:4rem">
    <div style="font-size:3rem;margin-bottom:1rem">📊</div>
    <h3 style="color:var(--primary);margin-bottom:.75rem">Calculer la déclaration {{ selected.label }}</h3>
    <p style="color:var(--text-muted);margin-bottom:1.5rem">
      Période du {{ selected.start.strftime('%d/%m/%Y') }} au {{ selected.end.strftime('%d/%m/%Y') }}<br>
      Date limite de dépôt : <strong>{{ selected.deadline.strftime('%d/%m/%Y') }}</strong>
    </p>
    <a href="{{ url_for('tva.index', year=year, quarter=q_num, compute=1) }}" class="btn btn-primary">
      ▶ Calculer maintenant
    </a>
  </div>
</div>
{% endif %}

<style>
.cerfa-row {
  display:flex;align-items:center;gap:1rem;padding:.6rem 0;
  border-bottom:1px solid var(--border);
}
.cerfa-row:last-child { border-bottom:none; }
.cerfa-case {
  width:36px;height:36px;border-radius:6px;background:var(--bg);
  border:2px solid var(--border-dark);display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:.9rem;flex-shrink:0;
  font-family:monospace;
}
.cerfa-label { flex:1;font-size:.85rem;color:var(--text); }
.cerfa-values { display:flex;gap:.75rem; }
.cerfa-field { text-align:right; }
.cerfa-field-label { font-size:.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em; }
.cerfa-amount {
  font-family:monospace;font-size:.9rem;font-weight:600;
  padding:.3rem .6rem;border-radius:4px;border:1.5px solid var(--border);
  background:var(--surface);min-width:90px;text-align:right;color:var(--text-muted);
}
.cerfa-amount.cerfa-filled { border-color:var(--accent);color:var(--primary);background:#EBF5FB; }
.cerfa-amount.cerfa-tva.cerfa-filled { border-color:var(--danger);color:var(--danger);background:#FEF2F2; }
.cerfa-total .cerfa-amount { font-size:1rem; }
.cerfa-total-amount { border-color:var(--primary);color:var(--primary);background:#EBF5FB;font-size:1rem; }
</style>

{% macro cerfa_row(case, label, value, tip="") %}
<div class="cerfa-row">
  <div class="cerfa-case {% if value != '0.00' %}cerfa-filled{% endif %}">{{ case }}</div>
  <div class="cerfa-label" title="{{ tip }}">{{ label }}</div>
  <div class="cerfa-values">
    <div class="cerfa-field">
      <div class="cerfa-amount {% if value != '0.00' %}cerfa-filled{% endif %}">{{ value }} €</div>
    </div>
  </div>
</div>
{% endmacro %}

{% endblock %}