conception-assistant/views/main.js

function getMain() {
  return `
  <main>
    <section id="table-of-contents">
      <h2>📑 Table des matières</h2>
      <nav id="toc-nav">
        <div class="toc-placeholder">
          <p>La table des matières sera générée automatiquement à partir des titres de votre journal.</p>
          <button id="refresh-toc" class="btn secondary">🔄 Actualiser</button>
        </div>
      </nav>
    </section>

    <section id="design-journal">
      <h2>📝 Journal de conception</h2>
      <div id="journal-controls" style="padding: 1rem; border-bottom: 1px solid var(--border-color); display: flex; gap: 1rem; align-items: center; justify-content: center;">
        <button id="save-journal" class="btn success">💾 Sauvegarder</button>
        <button id="load-journal" class="btn">📂 Charger</button>
        <button id="preview-toggle" class="btn primary">👁️ Visualiser</button>
        <span id="save-status" class="text-light"></span>
      </div>

      <!-- Modal de chargement des journaux -->
      <div id="journal-modal" class="modal-overlay" style="display: none;">
        <div class="modal-content">
          <div class="modal-header">
            <h3>📂 Sélectionner un journal</h3>
            <button class="modal-close" id="close-journal-modal">×</button>
          </div>
          <div class="modal-body" id="journal-modal-body">
            <!-- Contenu dynamique -->
          </div>
        </div>
      </div>
      <div id="journal-editor" contenteditable="true">
        <!-- Zone d'écriture principale -->
      </div>
    </section>

    <section id="ai-assistant">
      <h2>🤖 Assistant IA</h2>
      <div class="ai-controls" style="padding: 1rem; border-bottom: 1px solid var(--border-color);">
        <div class="ai-actions" style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem;">
          <button id="activate-rephrase" class="btn" title="Reformuler le texte sélectionné">
            ✨ Reformuler
          </button>
          <button id="check-inconsistencies" class="btn" title="Vérifier les incohérences">
            🔍 Incohérences
          </button>
          <button id="check-duplications" class="btn" title="Vérifier les doublons">
            📋 Doublons
          </button>
          <button id="give-advice" class="btn" title="Conseils d'amélioration">
            💡 Conseils
          </button>
        </div>
        <div class="liberty-mode" style="border-top: 1px solid var(--border-color); padding-top: 1rem;">
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem;">
            <div style="display: flex; align-items: center; gap: 0.25rem;">
              <label for="liberty-repeat-count" style="font-size: 0.85rem; color: var(--text-light);">Itérations:</label>
              <select id="liberty-repeat-count" style="padding: 0.25rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--surface-color); color: var(--text-color); font-size: 0.85rem;">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3" selected>3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
              </select>
            </div>
            <div style="display: flex; align-items: center; gap: 0.25rem;">
              <label for="liberty-precision" style="font-size: 0.85rem; color: var(--text-light);">Précision:</label>
              <select id="liberty-precision" style="padding: 0.25rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--surface-color); color: var(--text-color); font-size: 0.85rem;">
                <option value="30">30% (Très créatif)</option>
                <option value="50">50% (Équilibré)</option>
                <option value="70" selected>70% (Conservateur)</option>
                <option value="90">90% (Très précis)</option>
              </select>
            </div>
          </div>
          <button id="liberty-mode" class="btn" style="width: 100%;" title="Mode Liberté Total - Génération itérative en temps réel">
            🚀 Mode Liberté Total
          </button>
        </div>
      </div>
      <div id="ai-assistant-feedback" style="flex: 1; padding: 1rem; overflow-y: auto; min-height: 200px;">
        <div class="feedback-message" style="text-align: center; color: var(--text-light);">
          <strong>🎯 Assistant IA prêt</strong><br>
          Sélectionnez du texte dans l'éditeur et cliquez sur une action pour commencer.
          <div style="margin-top: 1rem; font-size: 0.85rem;">
            <div style="margin-bottom: 0.5rem;"><strong>Powered by Mistral AI</strong></div>
            <div>Modèle: Mistral Large (multilingue)</div>
          </div>
        </div>
      </div>
    </section>
  </main>
  `;
}

module.exports = { getMain };