<template>
  <div>
    <div class="page-header">
      <h2>Audit &amp; Logging</h2>
    </div>

    <div class="section-card">
      <div class="setting-group">
        <h3>Audit Log Retention</h3>
        <p class="setting-description">
          Configure how long audit logs are retained. Older logs will be automatically purged.
          Set to 0 to keep logs indefinitely.
        </p>

        <div class="setting-row">
          <label>
            <span>Retention Period (days)</span>
            <input
              type="number"
              v-model="settings.audit_retention_days"
              min="0"
              placeholder="90"
              @blur="saveSetting('audit_retention_days', settings.audit_retention_days)"
              :disabled="saving"
            >
            <small class="input-hint">0 = keep forever, recommended: 90 days</small>
          </label>
        </div>

        <router-link to="/settings/auditlogs" class="view-logs-link">
          View Audit Logs &rarr;
        </router-link>
      </div>
    </div>

    <div v-if="error" class="error-message">{{ error }}</div>
    <div v-if="success" class="settings-success">{{ success }}</div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useSystemSettings } from '../../composables/systemSettings'

const {
  settings, saving, error, success,
  loadSettings, saveSetting,
} = useSystemSettings()

onMounted(loadSettings)
</script>
