const fs = require('fs');
let c = fs.readFileSync('index.html', 'utf8');

const viewStr = `      <!-- Audit Logs View -->
      <div id="view-audit-logs" class="view">
        <div class="header-actions">
          <h2>سجل المراقبة والنسخ الاحتياطي</h2>
          <button class="btn-primary" onclick="window.runBackup()">💾 أخذ نسخة احتياطية الآن</button>
        </div>
        
        <div style="display:flex; gap: 15px; margin-bottom: 20px;">
           <input type="text" id="audit-search" placeholder="بحث باسم المستخدم أو الحركة..." style="flex:1;" oninput="window.renderAuditLogs()">
           <input type="date" id="audit-date" style="width:150px;" onchange="window.renderAuditLogs()">
        </div>
        
        <div class="card" style="margin-bottom: 20px; display:none;" id="backup-result-card">
           <p id="backup-result-msg" style="color: green; font-weight: bold;"></p>
        </div>

        <div class="table-responsive">
          <table class="data-table">
            <thead>
              <tr>
                <th>التاريخ والوقت</th>
                <th>المستخدم</th>
                <th>الحركة</th>
                <th>الموديول</th>
                <th>رقم السجل</th>
                <th>التفاصيل</th>
              </tr>
            </thead>
            <tbody id="audit-logs-tbody">
              <!-- Audit Logs -->
            </tbody>
          </table>
        </div>
      </div>`;

// Remove it from current location
const idx1 = c.indexOf('      <!-- Audit Logs View -->');
if (idx1 !== -1) {
  const endIdx = c.indexOf('      <!-- Modals -->', idx1);
  if (endIdx !== -1) {
    c = c.substring(0, idx1) + c.substring(endIdx);
  }
}

// Insert it right before the closing tags of app-screen
c = c.replace('</div>\n  </div>\n\n  \n      <!-- Modals -->', viewStr + '\n    </div>\n  </div>\n\n  \n      <!-- Modals -->');

fs.writeFileSync('index.html', c);
console.log('Fixed index.html structure');
