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

<section class="stats stats--dashboard">
  <article class="stat">
    <span class="stat-label">Programmes</span>
    <span class="stat-value"><%= formatInteger(stats.programmes) %></span>
  </article>
  <article class="stat">
    <span class="stat-label">Lots</span>
    <span class="stat-value"><%= formatInteger(stats.lots) %></span>
  </article>
  <article class="stat">
    <span class="stat-label">CA opérations en cours</span>
    <span class="stat-value stat-value--money"><%= formatMoney(stats.caTotal) %> €</span>
  </article>
  <article class="stat">
    <span class="stat-label">CA vendu</span>
    <span class="stat-value stat-value--money"><%= formatMoney(stats.caVendu) %> €</span>
  </article>
  <article class="stat">
    <span class="stat-label">CA restant à percevoir</span>
    <span class="stat-value stat-value--money"><%= formatMoney(stats.caRestant) %> €</span>
  </article>
</section>

<section class="synth-grid dash-commercialisation">
  <%
    const commercialisationSafe = typeof commercialisation !== 'undefined' && commercialisation
      ? commercialisation
      : { segments: [], totalLots: 0, avancementPct: 0, caTotal: 0, caVendu: 0, caRestant: 0 };
    const segments = commercialisationSafe.segments || [];
  %>
  <article class="synth-card synth-chart-card">
    <h3>Commercialisation globale</h3>
    <p class="muted">Tous les programmes — cliquez un statut pour le détail par opération</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(commercialisationSafe.totalLots || 0, 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(commercialisationSafe.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(commercialisationSafe.totalLots) %></strong>
            <span class="donut-pct"><%= formatNumber(seg.pct, { digits: 0 }) %>%</span>
          </span>
        </li>
      <% }) %>
    </ul>
  </article>

  <article class="synth-card">
    <h3>Indicateurs lots</h3>
    <dl class="synth-stats">
      <div>
        <dt>Lots totaux</dt>
        <dd><%= formatInteger(commercialisationSafe.totalLots) %></dd>
      </div>
      <div>
        <dt>Dispo</dt>
        <dd><%= formatInteger((segments.find(function(s){ return s.value === 'dispo'; }) || {}).count || 0) %> / <%= formatInteger(commercialisationSafe.totalLots) %></dd>
      </div>
      <div>
        <dt>Réservé</dt>
        <dd><%= formatInteger((segments.find(function(s){ return s.value === 'reserve'; }) || {}).count || 0) %> / <%= formatInteger(commercialisationSafe.totalLots) %></dd>
      </div>
      <div>
        <dt>Vendu</dt>
        <dd><%= formatInteger((segments.find(function(s){ return s.value === 'vendu'; }) || {}).count || 0) %> / <%= formatInteger(commercialisationSafe.totalLots) %></dd>
      </div>
      <div>
        <dt>Opérations actives</dt>
        <dd><%= formatInteger(stats.programmes) %></dd>
      </div>
      <div>
        <dt>CA lots HT</dt>
        <dd><%= formatMoney(segments.reduce(function(sum, s){ return sum + (s.ca || 0); }, 0)) %> €</dd>
      </div>
    </dl>
  </article>
</section>

<section class="panel">
  <h2 class="panel-title">Derniers programmes</h2>

  <% if (programmes.length === 0) { %>
    <div class="panel-toolbar">
      <div class="table-search"></div>
      <a href="/programmes/nouveau" class="btn btn-primary">Nouveau programme</a>
    </div>
    <p class="empty">Aucun programme pour le moment. <a href="/programmes/nouveau">Créer le premier</a>.</p>
  <% } else { %>
    <%
      const maxCodeLen = programmes.reduce(function(max, p) {
        return Math.max(max, String(p.code_interne || '').length);
      }, 1);
    %>
    <div data-programme-search>
      <div class="panel-toolbar">
        <div class="table-search">
          <label class="sr-only" for="programme-search-dash">Rechercher par code, nom ou ville</label>
          <input
            id="programme-search-dash"
            type="search"
            class="table-search-input"
            data-programme-search-input
            placeholder="Rechercher code, nom ou ville…"
            autocomplete="off"
          >
        </div>
        <a href="/programmes/nouveau" class="btn btn-primary">Nouveau programme</a>
      </div>
      <div class="table-wrap" style="--code-badge-ch: <%= maxCodeLen %>ch">
        <table>
          <thead>
            <tr>
              <th>Code interne</th>
              <th>Nom commercial</th>
              <th>Ville</th>
              <th>Lots</th>
              <th>Responsable</th>
            </tr>
          </thead>
          <tbody>
            <% programmes.forEach(function(p) { %>
              <tr data-nom="<%= p.nom_commercial || '' %>" data-ville="<%= p.ville || '' %>" data-code="<%= p.code_interne || '' %>">
                <td><code class="code-badge"><%= p.code_interne %></code></td>
                <td>
                  <strong
                    class="name-open"
                    title="Ouvrir la synthèse"
                    data-href="/programmes/<%= p.id %>"
                  ><%= p.nom_commercial %></strong>
                </td>
                <td><%= p.ville %></td>
                <td><%= p.nombre_lots != null ? formatInteger(p.nombre_lots) : '—' %></td>
                <td>
                  <% if (p.responsable_prenom) { %>
                    <%= p.responsable_prenom %> <%= p.responsable_nom %>
                  <% } else { %>
                    <span class="muted">—</span>
                  <% } %>
                </td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
      <p class="empty" data-programme-search-empty hidden>Aucun programme ne correspond à la recherche.</p>
    </div>
  <% } %>
</section>

<dialog class="synth-modal" id="statut-modal" data-mode="operations">
  <div class="synth-modal-head">
    <div>
      <p class="eyebrow" id="statut-modal-eyebrow">Opérations</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">Opérations</span>
      <strong id="statut-modal-ops">0</strong>
    </div>
    <div>
      <span class="muted">Lots</span>
      <strong id="statut-modal-count">0</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>Code</th>
          <th>Opération</th>
          <th>Ville</th>
          <th class="num">Lots</th>
          <th class="num">Surface (m²)</th>
          <th class="num">CA HT</th>
        </tr>
      </thead>
      <tbody id="statut-modal-body"></tbody>
    </table>
  </div>
</dialog>

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

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