function getHeader() {
  return `
  <header>
    <div>
      <h1>Mon Journal de Conception</h1>
    </div>
  </header>
  `;
}

function getLeftPanel() {
  return `
  <div class="side-panel left-panel" id="left-panel">
    <div class="panel-toggle" onclick="togglePanel('left')">
      <span class="arrow">▶</span>
    </div>
    <div class="panel-content">
      <h3 class="panel-header">Templates de Projet</h3>

      <div class="template-form">
        <div class="form-group">
          <label for="domain-select">Domaine :</label>
          <select id="domain-select" title="Choisir le domaine">
            <option value="">-- Sélectionner un domaine --</option>
            <option value="recherche">Recherche</option>
            <option value="math">Mathématiques</option>
            <option value="informatique">Informatique</option>
            <option value="ingenierie">Ingénierie</option>
            <option value="business">Business</option>
            <option value="design">Design</option>
          </select>
        </div>

        <div class="form-group">
          <label for="level-select">Niveau de détail :</label>
          <select id="level-select" title="Niveau de détail" disabled>
            <option value="">-- Choisir d'abord un domaine --</option>
            <option value="simple">Simple</option>
            <option value="detaille">Détaillé</option>
            <option value="complet">Complet</option>
          </select>
        </div>

        <div class="form-actions">
          <button id="load-template" class="btn success" title="Charger le template" disabled>
            Charger le template
          </button>
        </div>
      </div>
    </div>
  </div>
  `;
}

function getRightPanel() {
  return `
  <div class="side-panel right-panel" id="right-panel">
    <div class="panel-toggle" onclick="togglePanel('right')">
      <span class="arrow">◀</span>
    </div>
    <div class="panel-content">
      <h3 class="panel-header">Outils</h3>

      <div class="nav-section">
        <h4>Apparence</h4>
        <div class="nav-buttons">
          <button class="nav-btn" id="theme-toggle" title="Basculer mode sombre">
            <span class="icon">☽</span>
            <span>Basculer le thème</span>
          </button>
        </div>
      </div>

      <div class="nav-section">
        <h4>Export</h4>
        <div class="nav-buttons">
          <button class="nav-btn" id="export-md" title="Exporter en Markdown">
            <span class="icon">↓</span>
            <span>Exporter en Markdown</span>
          </button>
        </div>
      </div>

      <div class="nav-section">
        <h4>Import</h4>
        <div class="nav-buttons">
          <label class="panel-file-input" for="import-md" title="Importer Markdown">
            <input id="import-md" type="file" accept=".md" style="display:none;">
            <span class="icon">⬆️</span>
            <span>Importer Markdown</span>
          </label>
        </div>
      </div>
    </div>
  </div>
  `;
}

function getPanelOverlay() {
  return `
  <div class="panel-overlay" id="panel-overlay" onclick="closeAllPanels()"></div>
  `;
}

module.exports = { getHeader, getLeftPanel, getRightPanel, getPanelOverlay };