<% layout('layouts/main') %>
<% const studioCompany = typeof company !== 'undefined' ? company : currentCompany; %>
<% const companyName = studioCompany?.name || studioSettings.business_name || 'Entreprise'; %>
<% const builderJson = JSON.stringify(draftBuilder).replace(/</g, '\\u003c'); %>
<% const templatesJson = JSON.stringify(templates).replace(/</g, '\\u003c'); %>
<% const mediaJson = JSON.stringify(mediaItems.map((photo) => ({ id: photo.id, url: `/photos/${photo.stored_name}`, alt: photo.alt_text || '', caption: photo.caption || '' }))).replace(/</g, '\\u003c'); %>
<% const publishedDate = publishedBuilder.publishedAt ? new Date(publishedBuilder.publishedAt).toLocaleString('fr-CH') : 'Jamais'; %>
<% const adminBase = typeof adminBaseUrl !== 'undefined' ? adminBaseUrl : '/admin'; %>

<section class="studio-mobile-lock">
  <div>
    <p class="eyebrow">Studio desktop</p>
    <h1>Le builder est réservé aux grands écrans.</h1>
    <p>Pour travailler proprement sur les blocs, les textes inline, les photos et l’aperçu exact, ouvrez le studio sur un ordinateur avec une largeur confortable.</p>
    <a class="button secondary" href="<%= adminBase %>">Retour administration</a>
  </div>
</section>

<div class="studio-app studio-shell">
  <section class="content studio-content">
    <div class="studio-topbar studio-builder-topbar">
      <div>
        <p class="eyebrow">Studio site</p>
        <h1>Vitrine professionnelle</h1>
        <p class="muted"><%= companyName %> · <%= draftBuilder.blocks.length %> section(s) · dernière publication: <%= publishedDate %></p>
      </div>
      <div class="studio-actions">
        <a class="button secondary" href="<%= adminBase %>">Retour admin</a>
        <a class="button secondary" href="<%= previewUrl %>" target="_blank" rel="noopener">Voir la vitrine</a>
        <a class="button secondary" href="<%= adminBase %>/photos">Photos</a>
        <a class="button secondary" href="<%= adminBase %>/blog">Guides SEO</a>
      </div>
    </div>

    <% if (currentUser && currentUser.is_demo) { %>
      <div class="studio-demo-lock">
        <strong>Mode démo</strong>
        <span>Le builder est entièrement visible. Les sauvegardes et publications restent bloquées pour protéger SaaS DEMO.</span>
      </div>
    <% } %>

    <div class="studio-workspace-tabs" data-studio-workspace-tabs>
      <button type="button" class="active" data-studio-panel-tab="library">Contenu</button>
      <button type="button" data-studio-panel-tab="canvas">Aperçu</button>
      <button type="button" data-studio-panel-tab="inspector">Inspecteur</button>
    </div>

    <form method="post" action="<%= adminBase %>/studio" class="studio-builder" data-block-builder>
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">
      <input type="hidden" name="studio_action" value="save_draft" data-studio-action>
      <input type="hidden" name="version_id" value="" data-restore-version-field>
      <textarea name="builder_json" data-builder-json hidden><%- builderJson %></textarea>

      <aside class="studio-builder-sidebar is-active" data-studio-panel="library">
        <section class="studio-panel">
          <div class="studio-panel-head">
            <strong>Marque & SEO</strong>
            <span>Publication</span>
          </div>
          <div class="studio-fields compact">
            <label>Nom public<input name="business_name" data-brand-field="name" value="<%= studioSettings.business_name || studioCompany?.name || '' %>" required></label>
            <div class="form-grid two">
              <label>Email<input type="email" name="business_email" value="<%= studioSettings.business_email || studioCompany?.email || '' %>"></label>
              <label>Téléphone<input name="business_phone" value="<%= studioSettings.business_phone || studioCompany?.phone || '' %>"></label>
            </div>
            <label>Adresse<textarea name="business_address" rows="3"><%= studioSettings.business_address || studioCompany?.address || '' %></textarea></label>
            <div class="form-grid two">
              <label>Couleur principale<input type="color" name="primary_color" data-brand-field="primary" value="<%= studioCompany?.primary_color || '#0b6b88' %>"></label>
              <label>Couleur secondaire<input type="color" name="secondary_color" data-brand-field="secondary" value="<%= studioCompany?.secondary_color || '#20b86c' %>"></label>
            </div>
            <label>Titre SEO<input data-page-field="seoTitle" value="<%= draftBuilder.page.seoTitle %>"></label>
            <label>Méta-description<textarea data-page-field="metaDescription" rows="3"><%= draftBuilder.page.metaDescription %></textarea></label>
          </div>
        </section>

        <section class="studio-panel">
          <div class="studio-panel-head">
            <strong>Ajouter une section</strong>
            <span>Bibliothèque</span>
          </div>
          <div class="studio-block-library">
            <% Object.entries(blockLabels).forEach(([type, label]) => { %>
              <button type="button" class="studio-block-add" data-add-block="<%= type %>"><span>+</span><%= label %></button>
            <% }) %>
          </div>
        </section>

        <section class="studio-panel studio-outline-panel">
          <div class="studio-panel-head">
            <strong>Structure</strong>
            <span>Navigator</span>
          </div>
          <div class="studio-block-outline" data-block-outline></div>
        </section>

        <section class="studio-panel">
          <div class="studio-panel-head">
            <strong>Modèles</strong>
            <span>Pages</span>
          </div>
          <div class="studio-template-list">
            <% templates.forEach((template) => { %>
              <button type="button" data-template-id="<%= template.id %>">
                <strong><%= template.name %></strong>
                <span><%= template.description %></span>
              </button>
            <% }) %>
          </div>
        </section>
      </aside>

      <section class="studio-builder-main" data-studio-panel="canvas">
        <div class="studio-builder-toolbar">
          <div class="studio-device-toggle" role="group" aria-label="Aperçu">
            <button type="button" class="active" data-device="desktop">Desktop</button>
            <button type="button" data-device="mobile">Mobile</button>
          </div>
          <div class="studio-history-controls" role="group" aria-label="Historique visuel">
            <button type="button" class="secondary" data-history-command="undo" disabled>Annuler</button>
            <button type="button" class="secondary" data-history-command="redo" disabled>Rétablir</button>
          </div>
          <div class="studio-status">
            <span data-builder-status>Brouillon prêt</span>
            <small>Réordonnez les sections, sélectionnez un texte ou une image, puis publiez quand tout est prêt.</small>
          </div>
        </div>

        <div class="studio-canvas-shell">
          <div class="studio-preview studio-builder-preview" style="--studio-primary:<%= studioCompany?.primary_color || '#0b6b88' %>;--studio-secondary:<%= studioCompany?.secondary_color || '#20b86c' %>">
            <div class="studio-device-bar">
              <span></span><span></span><span></span>
              <strong><%= previewUrl %></strong>
            </div>
            <div class="studio-preview-page builder-canvas" data-builder-canvas></div>
          </div>
        </div>
      </section>

      <aside class="studio-builder-inspector" data-studio-panel="inspector">
        <section class="studio-panel">
          <div class="studio-panel-head">
            <strong>Inspecteur</strong>
            <span data-selected-block-label>Aucune section</span>
          </div>
          <div class="studio-inspector-empty" data-inspector-empty>
            <strong>Sélectionnez une section</strong>
            <span>Modifiez les textes, images, listes, visibilité et position de manière contrôlée.</span>
          </div>
          <div class="studio-inspector-fields" data-inspector-fields hidden></div>
        </section>

        <section class="studio-panel">
          <div class="studio-panel-head">
            <strong>Médiathèque</strong>
            <span><%= mediaItems.length %> photo(s)</span>
          </div>
          <div class="studio-media-grid" data-media-library>
            <% mediaItems.forEach((photo) => { %>
              <button type="button" data-media-url="/photos/<%= photo.stored_name %>" data-media-alt="<%= photo.alt_text || '' %>">
                <img src="/photos/<%= photo.stored_name %>" alt="<%= photo.alt_text || '' %>">
              </button>
            <% }) %>
            <% if (!mediaItems.length) { %>
              <div class="empty-state"><strong>Aucune photo</strong><span>Ajoutez des images dans la médiathèque.</span></div>
            <% } %>
          </div>
        </section>

        <section class="studio-panel">
          <div class="studio-panel-head">
            <strong>Historique</strong>
            <span><%= history.length %> version(s)</span>
          </div>
          <div class="studio-history">
            <% history.forEach((version) => { %>
              <div class="studio-history-row">
                <div>
                  <strong><%= version.title %></strong>
                  <span><%= new Date(version.createdAt).toLocaleString('fr-CH') %> · <%= version.blocks %> section(s)</span>
                </div>
                <button type="submit" class="secondary small" data-restore-version="<%= version.id %>">Restaurer</button>
              </div>
            <% }) %>
            <% if (!history.length) { %>
              <div class="empty-state"><strong>Aucune version</strong><span>Publiez une première fois pour créer l’historique.</span></div>
            <% } %>
          </div>
        </section>
      </aside>

      <div class="studio-savebar studio-builder-savebar">
        <button type="submit" class="secondary" data-submit-action="save_draft">Enregistrer brouillon</button>
        <button type="submit" data-submit-action="publish">Publier la vitrine</button>
      </div>
    </form>

    <script type="application/json" id="studio-builder-data"><%- builderJson %></script>
    <script type="application/json" id="studio-template-data"><%- templatesJson %></script>
    <script type="application/json" id="studio-media-data"><%- mediaJson %></script>
  </section>
</div>
