<script setup lang="ts">
import { Save, SlidersHorizontal } from '@lucide/vue'

import type { AdminRiskRule } from '../../types/awards'
import Button from '../ui/Button.vue'
import NativeSelect from '../ui/NativeSelect.vue'

defineProps<{
  rules: AdminRiskRule[]
  loading: boolean
  saving: boolean
}>()

const emit = defineEmits<{
  updateRule: [ruleKey: string, patch: Partial<AdminRiskRule>]
  save: []
}>()
</script>

<template>
  <section class="border-t border-violet-100 bg-white p-6">
    <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
      <div>
        <div class="flex items-center gap-2">
          <SlidersHorizontal class="h-5 w-5 text-violet-700" />
          <h2 class="text-lg font-bold text-slate-900">Regel-Editor</h2>
        </div>
        <p class="mt-1 text-sm leading-6 text-slate-500">
          Thresholds, Zeitfenster und Severity ohne Code-Deploy anpassen.
        </p>
      </div>
      <Button class="gap-2" :disabled="loading || saving || rules.length === 0" @click="emit('save')">
        <Save class="h-4 w-4" />
        {{ saving ? 'Speichert ...' : 'Regeln speichern' }}
      </Button>
    </div>

    <div v-if="loading" class="mt-5 rounded-2xl border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
      Risk-Regeln werden geladen.
    </div>

    <div v-else class="mt-5 grid gap-3">
      <article
        v-for="rule in rules"
        :key="rule.key"
        class="rounded-2xl border border-violet-100 bg-violet-50/35 p-4"
      >
        <div class="grid gap-3 lg:grid-cols-[minmax(220px,1fr)_120px_140px_150px_110px] lg:items-end">
          <div class="min-w-0">
            <h3 class="text-base font-semibold text-slate-900">{{ rule.label }}</h3>
            <p class="mt-1 text-sm leading-6 text-slate-500">{{ rule.description }}</p>
          </div>

          <label class="space-y-1">
            <span class="text-xs font-semibold text-slate-500">Threshold</span>
            <input
              :value="rule.threshold"
              type="number"
              min="1"
              max="500"
              class="h-10 w-full rounded-xl border border-violet-100 bg-white px-3 text-sm outline-none transition focus:border-violet-300 focus:ring-4 focus:ring-violet-100"
              @input="emit('updateRule', rule.key, { threshold: Number(($event.target as HTMLInputElement).value) })"
            >
          </label>

          <label class="space-y-1">
            <span class="text-xs font-semibold text-slate-500">Fenster Min.</span>
            <input
              :value="rule.windowMinutes"
              type="number"
              min="1"
              max="1440"
              class="h-10 w-full rounded-xl border border-violet-100 bg-white px-3 text-sm outline-none transition focus:border-violet-300 focus:ring-4 focus:ring-violet-100"
              @input="emit('updateRule', rule.key, { windowMinutes: Number(($event.target as HTMLInputElement).value) })"
            >
          </label>

          <label class="space-y-1">
            <span class="text-xs font-semibold text-slate-500">Severity</span>
            <NativeSelect
              :model-value="rule.severity"
              :options="[
                { label: 'Low', value: 'low' },
                { label: 'Medium', value: 'medium' },
                { label: 'High', value: 'high' },
              ]"
              @update:model-value="emit('updateRule', rule.key, { severity: String($event) })"
            />
          </label>

          <label class="flex h-10 items-center gap-2 rounded-xl border border-violet-100 bg-white px-3 text-sm font-semibold text-slate-700">
            <input
              type="checkbox"
              class="h-4 w-4 accent-violet-600"
              :checked="rule.enabled"
              @change="emit('updateRule', rule.key, { enabled: ($event.target as HTMLInputElement).checked })"
            >
            Aktiv
          </label>
        </div>
      </article>

      <p v-if="rules.length === 0" class="rounded-2xl border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
        Keine Risk-Regeln verfügbar.
      </p>
    </div>
  </section>
</template>
