<script setup>
import { ref } from "vue";
import { q, m } from "#imports";
import { useQuasar } from "quasar";
const $q = useQuasar();
const [{ eventLogCleanup }, { userLogCleanup }] = await Promise.all([
  q({ eventLogCleanup: { enabled: true, days: true } }),
  q({ userLogCleanup: { enabled: true, days: true } })
]);
const eventLog = ref({ enabled: eventLogCleanup.enabled, days: eventLogCleanup.days || 30 });
const userLog = ref({ enabled: userLogCleanup.enabled, days: userLogCleanup.days || 30 });
const retentionOptions = [
  { label: "7 days", value: 7 },
  { label: "14 days", value: 14 },
  { label: "30 days", value: 30 },
  { label: "60 days", value: 60 },
  { label: "90 days", value: 90 },
  { label: "180 days", value: 180 },
  { label: "1 year", value: 365 }
];
const onSave = async (type) => {
  try {
    if (type === "eventLog") {
      await m("setEventLogCleanup", { enabled: eventLog.value.enabled, days: eventLog.value.days });
    } else {
      await m("setUserLogCleanup", { enabled: userLog.value.enabled, days: userLog.value.days });
    }
    $q.notify({ type: "positive", message: "Log cleanup settings saved" });
  } catch (e) {
    $q.dialog({ title: "Error", message: e.message });
  }
};
</script>

<template>
    <q-tab-panel name="logs" class="q-pa-lg">

        <!-- Event Log -->
        <div class="text-h6 q-mb-md">{{ $t("Event Log") }}</div>
        <q-card flat bordered class="q-pa-md q-mb-lg" style="max-width: 480px">
            <q-card-section>
                <q-toggle v-model="eventLog.enabled" :label="$t('Enable nightly auto-cleanup')" color="primary" />
                <div class="text-caption text-grey q-mt-xs q-ml-lg">
                    {{ $t("A MySQL Event Scheduler runs daily at midnight to remove old logs.") }}
                </div>
            </q-card-section>
            <q-card-section>
                <q-select v-model="eventLog.days" :options="retentionOptions" emit-value map-options
                    :label="$t('Keep logs for')" outlined dense :disable="!eventLog.enabled" />
            </q-card-section>
            <q-card-actions align="right">
                <q-btn color="primary" :label="$t('Save')" unelevated @click="onSave('eventLog')" />
            </q-card-actions>
        </q-card>

        <!-- User Log -->
        <div class="text-h6 q-mb-md">{{ $t("User Log") }}</div>
        <q-card flat bordered class="q-pa-md" style="max-width: 480px">
            <q-card-section>
                <q-toggle v-model="userLog.enabled" :label="$t('Enable nightly auto-cleanup')" color="primary" />
                <div class="text-caption text-grey q-mt-xs q-ml-lg">
                    {{ $t("A MySQL Event Scheduler runs daily at midnight to remove old logs.") }}
                </div>
            </q-card-section>
            <q-card-section>
                <q-select v-model="userLog.days" :options="retentionOptions" emit-value map-options
                    :label="$t('Keep logs for')" outlined dense :disable="!userLog.enabled" />
            </q-card-section>
            <q-card-actions align="right">
                <q-btn color="primary" :label="$t('Save')" unelevated @click="onSave('userLog')" />
            </q-card-actions>
        </q-card>

    </q-tab-panel>
</template>
