<% layout('layouts/main') %>
<% const adminBase = typeof adminBaseUrl !== 'undefined' ? adminBaseUrl : '/admin'; %>
<% const companySlug = typeof currentCompany !== 'undefined' && currentCompany ? currentCompany.slug : 'saas-demo'; %>
<% const publicBase = companySlug === 'saas-demo' ? '/demo/saas-demo' : `/site/${companySlug}`; %>
<div class="app-shell">
  <%- partial('partials/admin-nav') %>
  <section class="content site-admin-page">
    <div class="page-head compact-page-head">
      <div>
        <p class="eyebrow">SEO & confiance</p>
        <h1>Photos du site</h1>
        <p class="muted">Médiathèque publique utilisée par le Studio, les services, les zones et les articles.</p>
      </div>
      <div class="actions">
        <a class="button secondary" href="<%= adminBase %>/studio">Studio</a>
        <a class="button secondary" href="<%= publicBase %>" target="_blank" rel="noopener">Voir la vitrine</a>
      </div>
    </div>

    <section class="site-quality-strip">
      <article><strong><%= photos.length %></strong><span>Photos en médiathèque</span></article>
      <article><strong><%= photos.filter((photo) => photo.status === 'publiee').length %></strong><span>Publiées</span></article>
      <article><strong><%= photos.filter((photo) => photo.alt_text).length %></strong><span>Alt SEO renseignés</span></article>
    </section>

    <details class="ops-drawer site-create-drawer">
      <summary><span>Ajouter des photos réelles</span><small>Images nettes, lumineuses, adaptées au nettoyage et aux prestations vendues.</small></summary>
      <div class="site-guidance-grid">
        <article><strong>Priorité</strong><span>Photos réelles d’interventions, équipes, matériel, avant/après et fin de chantier.</span></article>
        <article><strong>SEO</strong><span>Un texte alternatif précis aide Google et évite les images anonymes.</span></article>
        <article><strong>Confiance</strong><span>Évitez les images floues, sombres, trop génériques ou non représentatives.</span></article>
      </div>
      <form class="form-grid" method="post" enctype="multipart/form-data">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <label>Photos<input type="file" name="photos" accept="image/jpeg,image/png,image/webp" multiple required></label>
        <div class="form-grid two">
          <label>Service associé<select name="service_slug">
            <option value="">Tous services</option>
            <% servicePages.forEach((service) => { %><option value="<%= service.slug %>"><%= service.serviceType %></option><% }) %>
          </select></label>
          <label>Ville associée<select name="city_slug">
            <option value="">Toutes zones</option>
            <% locationPages.forEach((location) => { %><option value="<%= location.slug %>"><%= location.city %></option><% }) %>
          </select></label>
        </div>
        <div class="form-grid two">
          <label>Emplacement<select name="placement">
            <option value="general">Général</option>
            <option value="accueil">Accueil</option>
            <option value="service">Pages services</option>
            <option value="article">Articles / infos utiles</option>
            <option value="zone">Pages zones</option>
          </select></label>
          <label>Texte alternatif SEO<input name="alt_text" placeholder="Ex. Mur peint, chantier terminé ou intervention réalisée"></label>
        </div>
        <label>Légende courte<input name="caption" placeholder="Ex. Intervention terminée chez un client"></label>
        <button>Ajouter les photos</button>
      </form>
    </details>

    <section class="media-grid site-media-grid">
      <% photos.forEach((photo) => { %>
        <article class="media-card">
          <img src="/photos/<%= photo.stored_name %>" alt="<%= photo.alt_text %>">
          <div class="site-media-meta">
            <strong><%= photo.caption || photo.original_name || 'Photo du site' %></strong>
            <span><%= ui.label(photo.placement || 'general') %> · <%= photo.service_slug || 'tous services' %> · <%= photo.city_slug || 'toutes zones' %></span>
            <span class="badge <%= photo.status === 'publiee' ? 'success' : 'warning' %>"><%= ui.label(photo.status) %></span>
          </div>
          <details class="site-card-drawer">
            <summary>Réglages photo</summary>
            <form method="post" action="<%= adminBase %>/photos/<%= photo.id %>" class="form-grid compact">
              <input type="hidden" name="_csrf" value="<%= csrfToken %>">
              <label>Alt SEO<input name="alt_text" value="<%= photo.alt_text %>"></label>
              <label>Légende<input name="caption" value="<%= photo.caption || '' %>"></label>
              <div class="form-grid two">
                <label>Service<select name="service_slug">
                  <option value="">Tous</option>
                  <% servicePages.forEach((service) => { %><option value="<%= service.slug %>" <%= photo.service_slug === service.slug ? 'selected' : '' %>><%= service.serviceType %></option><% }) %>
                </select></label>
                <label>Ville<select name="city_slug">
                  <option value="">Toutes</option>
                  <% locationPages.forEach((location) => { %><option value="<%= location.slug %>" <%= photo.city_slug === location.slug ? 'selected' : '' %>><%= location.city %></option><% }) %>
                </select></label>
              </div>
              <div class="form-grid two">
                <label>Emplacement<select name="placement">
                  <% ['general','accueil','service','article','zone'].forEach((placement) => { %><option value="<%= placement %>" <%= photo.placement === placement ? 'selected' : '' %>><%= ui.label(placement) %></option><% }) %>
                </select></label>
                <label>Statut<select name="status"><option value="publiee" <%= photo.status === 'publiee' ? 'selected' : '' %>>Publiée</option><option value="masquee" <%= photo.status === 'masquee' ? 'selected' : '' %>>Masquée</option></select></label>
              </div>
              <div class="actions inline-actions">
                <button class="secondary">Enregistrer</button>
              </div>
            </form>
            <form method="post" action="<%= adminBase %>/photos/<%= photo.id %>/supprimer" onsubmit="return confirm('Supprimer cette photo ?')">
              <input type="hidden" name="_csrf" value="<%= csrfToken %>">
              <button class="danger">Supprimer</button>
            </form>
          </details>
        </article>
      <% }) %>
      <% if (!photos.length) { %><div class="empty-state"><strong>Aucune photo</strong><span>Ajoutez des photos réelles pour renforcer la confiance, le SEO local et la conversion.</span></div><% } %>
    </section>
  </section>
</div>
