<!-- htmlhint doctype-first:false -->
<div class="space-y-6">
  <!-- Maintenance Header -->
  <div class="bg-gradient-to-r from-amber-500 to-orange-600 rounded-lg shadow-lg p-6 text-white">
    <h2 class="text-2xl font-bold mb-2 flex items-center">
      <svg
        class="h-8 w-8 mr-3"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        aria-hidden="true"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
        />
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
        />
      </svg>
      Platform Maintenance
    </h2>
    <p class="text-amber-100">
      Administrative tools for platform maintenance and data management. These operations are restricted to platform administrators.
    </p>
  </div>

  <!-- Metrics Maintenance Card -->
  {% if payload.settings.metrics_cleanup_enabled or payload.settings.metrics_rollup_enabled %}
  <div class="bg-white rounded-lg shadow p-6 dark:bg-gray-800" x-data="{
    cleanupLoading: false,
    rollupLoading: false,
    cleanupResult: null,
    rollupResult: null,
    showCleanupConfirm: false,
    showRollupConfirm: false,
    retentionDays: {{ payload.settings.metrics_retention_days | default(7) }},
    deleteAll: false,
    rollupHoursBack: 1,
    includeRollupData: true
  }">
    <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
      <svg
        class="h-6 w-6 mr-2 text-indigo-600"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
        ></path>
      </svg>
      Metrics Maintenance
    </h3>
    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
      Manage metrics data retention and aggregation. Cleanup removes old raw metrics,
      rollup creates hourly summaries for efficient historical queries.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <!-- Cleanup Section -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
        <h4 class="text-sm font-medium mb-3 dark:text-gray-200 flex items-center">
          <svg class="h-4 w-4 mr-2 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
          </svg>
          Metrics Cleanup
        </h4>

        <!-- Retention Days Input -->
        <div class="mb-3">
          <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
            Delete metrics older than:
          </label>
          <div class="flex items-center gap-2">
            <input
              type="number"
              x-model="retentionDays"
              :disabled="deleteAll"
              min="0"
              max="365"
              class="w-20 px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800 dark:text-gray-200 disabled:opacity-50"
            />
            <span class="text-xs text-gray-500 dark:text-gray-400">days</span>
          </div>
        </div>

        <!-- Delete All Checkbox -->
        <div class="mb-3">
          <label class="flex items-center text-xs text-gray-600 dark:text-gray-400 cursor-pointer">
            <input
              type="checkbox"
              x-model="deleteAll"
              @change="if(deleteAll) retentionDays = 0"
              class="mr-2 rounded border-gray-300 dark:border-gray-600 text-red-600 focus:ring-red-500"
            />
            <span class="font-medium text-red-600 dark:text-red-400">Delete ALL metrics (ignores retention)</span>
          </label>
        </div>

        <!-- Include Rollup Data Checkbox -->
        <div class="mb-3">
          <label class="flex items-center text-xs text-gray-600 dark:text-gray-400 cursor-pointer">
            <input
              type="checkbox"
              x-model="includeRollupData"
              class="mr-2 rounded border-gray-300 dark:border-gray-600 text-red-600 focus:ring-red-500"
            />
            <span>Also delete hourly rollup data</span>
          </label>
        </div>

        <!-- Run Cleanup Button -->
        <button
          @click="showCleanupConfirm = true"
          :disabled="cleanupLoading"
          class="w-full inline-flex items-center justify-center px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-red-400 text-white text-sm font-medium rounded-md shadow-sm transition-colors"
        >
          <template x-if="cleanupLoading">
            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
          </template>
          <span x-text="cleanupLoading ? 'Deleting...' : (deleteAll ? 'Delete All Metrics' : 'Run Cleanup')"></span>
        </button>

        <!-- Cleanup Confirmation Dialog -->
        <template x-if="showCleanupConfirm">
          <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" @click.self="showCleanupConfirm = false">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-md mx-4">
              <div class="flex items-center mb-4">
                <svg class="h-6 w-6 text-red-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                </svg>
                <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100">Confirm Metrics Cleanup</h4>
              </div>
              <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
                <template x-if="deleteAll">
                  <p class="text-red-600 dark:text-red-400 font-medium">
                    WARNING: This will permanently delete ALL metrics data!
                  </p>
                </template>
                <template x-if="!deleteAll">
                  <p>
                    This will delete all metrics older than <span class="font-medium" x-text="retentionDays"></span> days.
                  </p>
                </template>
                <p class="mt-2" x-show="includeRollupData">
                  Hourly rollup data will also be deleted.
                </p>
                <p class="mt-2 font-medium">This action cannot be undone.</p>
              </div>
              <div class="flex justify-end gap-3">
                <button
                  @click="showCleanupConfirm = false"
                  class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md"
                >
                  Cancel
                </button>
                <button
                  @click="
                    showCleanupConfirm = false;
                    cleanupLoading = true;
                    cleanupResult = null;
                    fetch('{{ root_path }}/api/metrics/cleanup', {
                      method: 'POST',
                      headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + (document.cookie.match(/jwt_token=([^;]+)/)?.[1] || '')
                      },
                      body: JSON.stringify({
                        retention_days: deleteAll ? 0 : retentionDays,
                        include_rollup: includeRollupData
                      })
                    })
                    .then(r => r.json())
                    .then(data => { cleanupResult = data; cleanupLoading = false; })
                    .catch(e => { cleanupResult = {error: e.message}; cleanupLoading = false; })
                  "
                  class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md"
                >
                  Yes, Delete
                </button>
              </div>
            </div>
          </div>
        </template>

        <!-- Cleanup Result -->
        <template x-if="cleanupResult">
          <div class="mt-3 p-2 rounded text-xs" :class="cleanupResult.error ? 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300' : 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300'">
            <template x-if="!cleanupResult.error">
              <div>
                <span class="font-medium">Deleted:</span> <span x-text="cleanupResult.total_deleted"></span> records
                <span class="text-gray-500 dark:text-gray-400 ml-2">(<span x-text="cleanupResult.duration_seconds?.toFixed(2)"></span>s)</span>
              </div>
            </template>
            <template x-if="cleanupResult.error">
              <span x-text="cleanupResult.error || cleanupResult.detail"></span>
            </template>
          </div>
        </template>
      </div>

      <!-- Rollup Section -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
        <h4 class="text-sm font-medium mb-3 dark:text-gray-200 flex items-center">
          <svg class="h-4 w-4 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
          </svg>
          Metrics Rollup
        </h4>

        <!-- Hours Back Input -->
        <div class="mb-3">
          <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
            Process metrics from last:
          </label>
          <div class="flex items-center gap-2">
            <select
              x-model="rollupHoursBack"
              class="px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800 dark:text-gray-200"
            >
              <option value="1">1 hour</option>
              <option value="4">4 hours</option>
              <option value="12">12 hours</option>
              <option value="24">24 hours (1 day)</option>
              <option value="72">72 hours (3 days)</option>
              <option value="168">168 hours (7 days)</option>
              <option value="720">720 hours (30 days)</option>
              <option value="2160">2160 hours (90 days)</option>
              <option value="8760">8760 hours (365 days)</option>
            </select>
          </div>
        </div>

        <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
          Aggregates raw metrics into hourly summaries with percentiles (p50, p95, p99).
        </p>

        <!-- Run Rollup Button -->
        <button
          @click="showRollupConfirm = true"
          :disabled="rollupLoading"
          class="w-full inline-flex items-center justify-center px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white text-sm font-medium rounded-md shadow-sm transition-colors"
        >
          <template x-if="rollupLoading">
            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
          </template>
          <span x-text="rollupLoading ? 'Processing...' : 'Run Rollup Now'"></span>
        </button>

        <!-- Rollup Confirmation Dialog -->
        <template x-if="showRollupConfirm">
          <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" @click.self="showRollupConfirm = false">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-md mx-4">
              <div class="flex items-center mb-4">
                <svg class="h-6 w-6 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                </svg>
                <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100">Confirm Metrics Rollup</h4>
              </div>
              <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
                <p>
                  This will aggregate raw metrics from the last <span class="font-medium" x-text="rollupHoursBack"></span> hours into hourly summaries.
                </p>
                <p class="mt-2">
                  Existing rollups for those hours will be updated with current data.
                </p>
              </div>
              <div class="flex justify-end gap-3">
                <button
                  @click="showRollupConfirm = false"
                  class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md"
                >
                  Cancel
                </button>
                <button
                  @click="
                    showRollupConfirm = false;
                    rollupLoading = true;
                    rollupResult = null;
                    fetch('{{ root_path }}/api/metrics/rollup', {
                      method: 'POST',
                      headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + (document.cookie.match(/jwt_token=([^;]+)/)?.[1] || '')
                      },
                      body: JSON.stringify({hours_back: parseInt(rollupHoursBack)})
                    })
                    .then(r => r.json())
                    .then(data => { rollupResult = data; rollupLoading = false; })
                    .catch(e => { rollupResult = {error: e.message}; rollupLoading = false; })
                  "
                  class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md"
                >
                  Yes, Run Rollup
                </button>
              </div>
            </div>
          </div>
        </template>

        <!-- Rollup Result -->
        <template x-if="rollupResult">
          <div class="mt-3 p-2 rounded text-xs" :class="rollupResult.error ? 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300' : 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300'">
            <template x-if="!rollupResult.error">
              <div>
                <span class="font-medium">New:</span> <span x-text="rollupResult.total_rollups_created"></span>,
                <span class="font-medium">Updated:</span> <span x-text="rollupResult.total_rollups_updated"></span> rollups
                <span class="text-gray-500 dark:text-gray-400 ml-2">(<span x-text="rollupResult.duration_seconds?.toFixed(2)"></span>s)</span>
              </div>
            </template>
            <template x-if="rollupResult.error">
              <span x-text="rollupResult.error || rollupResult.detail"></span>
            </template>
          </div>
        </template>
      </div>
    </div>

    <!-- Info Notice -->
    <div class="mt-4 flex items-start bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
      <svg class="h-5 w-5 text-blue-600 dark:text-blue-400 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <div class="text-sm text-blue-700 dark:text-blue-300">
        Both operations run automatically in the background. Manual triggers are for immediate execution.
      </div>
    </div>
  </div>
  {% else %}
  <!-- Metrics maintenance disabled -->
  <div class="bg-white rounded-lg shadow p-6 dark:bg-gray-800">
    <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
      <svg
        class="h-6 w-6 mr-2 text-gray-400"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
        ></path>
      </svg>
      Metrics Maintenance
    </h3>
    <div class="flex items-start bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
      <svg class="h-5 w-5 text-gray-500 dark:text-gray-400 mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <div class="text-sm text-gray-600 dark:text-gray-400">
        <p class="font-medium text-gray-700 dark:text-gray-300">Metrics maintenance is disabled</p>
        <p class="mt-1">
          To enable metrics cleanup and rollup, set <code class="bg-gray-200 dark:bg-gray-600 px-1 rounded">METRICS_CLEANUP_ENABLED=true</code>
          and/or <code class="bg-gray-200 dark:bg-gray-600 px-1 rounded">METRICS_ROLLUP_ENABLED=true</code> in your environment.
        </p>
      </div>
    </div>
  </div>
  {% endif %}

  <!-- Future Maintenance Tasks Placeholder -->
  <div class="bg-white rounded-lg shadow p-6 dark:bg-gray-800">
    <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
      <svg
        class="h-6 w-6 mr-2 text-indigo-600"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
        ></path>
      </svg>
      System Health
    </h3>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
        <div class="text-sm font-medium text-gray-500 dark:text-gray-400">Database</div>
        <div class="text-lg font-semibold text-green-600 dark:text-green-400 flex items-center mt-1">
          <svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          Healthy
        </div>
      </div>
      <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
        <div class="text-sm font-medium text-gray-500 dark:text-gray-400">Cache</div>
        <div class="text-lg font-semibold text-green-600 dark:text-green-400 flex items-center mt-1">
          <svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          Operational
        </div>
      </div>
      <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
        <div class="text-sm font-medium text-gray-500 dark:text-gray-400">Background Jobs</div>
        <div class="text-lg font-semibold text-green-600 dark:text-green-400 flex items-center mt-1">
          <svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          Running
        </div>
      </div>
    </div>
  </div>
</div>
