<%- include('../partials/header') %>

<section class="synth-toolbar">
  <div>
    <p class="eyebrow">Synthèse programme</p>
    <h2 class="sheet-title"><%= programme.nom_commercial %></h2>
    <p class="muted sheet-meta">
      <code><%= programme.code_interne %></code>
      · <%= [programme.numero, programme.rue].filter(Boolean).join(' ') %>,
      <%= programme.code_postal %> <%= programme.ville %>
      · <%= formatInteger(summary.totalLots) %> lot(s)
    </p>
  </div>
  <div class="actions">
    <a href="/programmes/<%= programme.id %>/budget" class="btn btn-primary">Budget</a>
    <a href="/programmes/<%= programme.id %>/rapport" class="btn btn-ghost" target="_blank" rel="noopener">PDF récap</a>
    <a href="/programmes/<%= programme.id %>/modifier" class="btn btn-ghost">Fiche</a>
    <a href="/programmes" class="btn btn-ghost">Programmes</a>
  </div>
</section>

<section class="synth-grid">
  <article class="synth-card synth-chart-card">
    <h3>Commercialisation</h3>
    <p class="muted">Répartition des lots par statut — cliquez un statut pour le détail</p>

    <div class="donut-wrap">
      <svg class="donut" viewBox="0 0 120 120" role="img" aria-label="Répartition Dispo, Réservé, Vendu">
        <circle class="donut-track" cx="60" cy="60" r="42"></circle>
        <%
          const circumference = 2 * Math.PI * 42;
          const gap = 2.5;
          let offset = 0;
          const total = Math.max(summary.totalLots, 1);
          const activeCount = segments.filter(function(s) { return s.count > 0; }).length;
          segments.forEach(function(seg) {
            const length = (seg.count / total) * circumference;
            const draw = (seg.count > 0 && activeCount > 1)
              ? Math.max(0, length - gap)
              : length;
        %>
          <circle
            class="donut-seg <%= seg.count > 0 ? 'is-clickable' : '' %>"
            cx="60"
            cy="60"
            r="42"
            stroke="<%= seg.color %>"
            stroke-dasharray="<%= draw.toFixed(2) %> <%= (circumference - draw).toFixed(2) %>"
            stroke-dashoffset="<%= (-offset).toFixed(2) %>"
            data-statut="<%= seg.value %>"
            <% if (seg.count > 0) { %>role="button" tabindex="0"<% } %>
          ></circle>
        <%
            offset += length;
          });
        %>
      </svg>
      <div class="donut-center">
        <strong><%= formatNumber(summary.avancementPct, { digits: 0 }) %>%</strong>
        <span>avancé</span>
      </div>
    </div>

    <ul class="donut-legend">
      <% segments.forEach(function(seg) { %>
        <%
          const legendLabel = seg.value === 'dispo'
            ? 'lot dispo'
            : (seg.value === 'reserve' ? 'lot réservés' : 'lot vendus');
        %>
        <li
          class="donut-legend-item <%= seg.count > 0 ? 'is-clickable' : '' %>"
          data-statut="<%= seg.value %>"
          <% if (seg.count > 0) { %>role="button" tabindex="0"<% } %>
        >
          <span class="donut-swatch" style="background: <%= seg.color %>"></span>
          <span class="donut-label"><%= legendLabel %></span>
          <span class="donut-data">
            <strong class="donut-value"><%= formatInteger(seg.count) %> / <%= formatInteger(summary.totalLots) %></strong>
            <span class="donut-pct"><%= formatNumber(seg.pct, { digits: 0 }) %>%</span>
          </span>
        </li>
      <% }) %>
    </ul>
  </article>

  <article class="synth-card">
    <h3>Indicateurs</h3>
    <dl class="synth-stats">
      <div>
        <dt>Lots</dt>
        <dd><%= formatInteger(summary.totalLots) %></dd>
      </div>
      <div>
        <dt>Dispo</dt>
        <dd><%= formatInteger(summary.byStatut.dispo || 0) %> / <%= formatInteger(summary.totalLots) %></dd>
      </div>
      <div>
        <dt>Réservé</dt>
        <dd><%= formatInteger(summary.byStatut.reserve || 0) %> / <%= formatInteger(summary.totalLots) %></dd>
      </div>
      <div>
        <dt>Vendu</dt>
        <dd><%= formatInteger(summary.byStatut.vendu || 0) %> / <%= formatInteger(summary.totalLots) %></dd>
      </div>
      <div>
        <dt>Surface lots</dt>
        <dd><%= formatNumber(summary.surface, { digits: 2 }) %> m²</dd>
      </div>
      <div>
        <dt>CA lots HT</dt>
        <dd><%= formatMoney(summary.prixHt) %> €</dd>
      </div>
    </dl>

    <div class="synth-actions">
      <a href="/programmes/<%= programme.id %>/budget" class="btn btn-primary">Ouvrir le budget</a>
      <a href="/programmes/<%= programme.id %>/budget/lots" class="btn btn-ghost" target="_blank" rel="noopener">Gérer les lots</a>
    </div>
  </article>
</section>

<dialog class="synth-modal" id="statut-modal" data-programme-id="<%= programme.id %>">
  <div class="synth-modal-head">
    <div>
      <p class="eyebrow" id="statut-modal-eyebrow">Lots</p>
      <h3 id="statut-modal-title">Détail</h3>
    </div>
    <button type="button" class="btn btn-ghost" id="statut-modal-close">Fermer</button>
  </div>

  <div class="synth-modal-kpis">
    <div>
      <span class="muted">Lots</span>
      <strong id="statut-modal-count">0</strong>
    </div>
    <div>
      <span class="muted">Surface</span>
      <strong id="statut-modal-surface">0,00 m²</strong>
    </div>
    <div>
      <span class="muted">CA HT</span>
      <strong id="statut-modal-ca">0,00 €</strong>
    </div>
  </div>

  <div class="table-wrap">
    <table class="synth-lots-table">
      <thead>
        <tr>
          <th>Lot</th>
          <th>Désignation</th>
          <th class="num">Surface (m²)</th>
          <th class="num">Prix HT</th>
          <th class="num">€/m²</th>
        </tr>
      </thead>
      <tbody id="statut-modal-body"></tbody>
    </table>
  </div>
</dialog>

<script type="application/json" id="synth-statuts-data"><%- JSON.stringify(segments) %></script>

<%- include('../partials/footer') %>
