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

import type { AdminWorkflowRule } from '../../types/awards'
import AdminSettingsToggle from './AdminSettingsToggle.vue'
import Button from '../ui/Button.vue'
import Card from '../ui/Card.vue'
import NativeSelect from '../ui/NativeSelect.vue'

defineProps<{
  rules: AdminWorkflowRule[]
  loading: boolean
  saving: boolean
  dirty: boolean
  canManage: boolean
  summary: {
    active: number
    blocking: number
    total: number
  }
}>()

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

const winnerRequiresClipRuleKey = 'winner_requires_clip'
const advisoryOnlyRuleKey = 'recommended_nominators_per_subcategory'
const modeOptions = [
  { label: 'Blockieren', value: 'block' },
  { label: 'Warnen', value: 'warn' },
]
</script>

<template>
  <Card class="overflow-visible">
    <section class="border-b border-violet-100 p-5">
      <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
        <div class="min-w-0">
          <div class="flex items-center gap-2">
            <ShieldCheck class="h-5 w-5 text-violet-700" />
            <h2 class="text-lg font-bold text-slate-900">Award-Workflow-Regeln</h2>
          </div>
          <p class="mt-1 max-w-3xl text-sm leading-6 text-slate-500">
            Diese Regeln steuern Vorbereitung, finale Kandidat:innen und Gewinnervergabe der ausgewählten Saison.
          </p>
        </div>

        <div class="flex flex-wrap items-center gap-2">
          <span class="rounded-full bg-violet-50 px-3 py-1.5 text-xs font-semibold text-violet-700">
            {{ summary.active }}/{{ summary.total }} aktiv
          </span>
          <span class="rounded-full bg-rose-50 px-3 py-1.5 text-xs font-semibold text-rose-700">
            {{ summary.blocking }} blockierend
          </span>
          <Button class="gap-2" :disabled="loading || saving || !dirty || !canManage" @click="emit('save')">
            <Save class="h-4 w-4" />
            {{ saving ? 'Speichert ...' : 'Speichern' }}
          </Button>
        </div>
      </div>
    </section>

    <section v-if="!canManage" class="border-b border-amber-100 bg-amber-50 px-5 py-3 text-sm font-semibold text-amber-800">
      Du kannst die Workflow-Regeln ansehen, aber nicht bearbeiten.
    </section>

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

    <section v-else class="grid gap-3 p-5">
      <article
        v-for="rule in rules"
        :key="rule.key"
        class="rounded-[26px] border border-violet-100 bg-violet-50/35 p-4 shadow-[0_16px_40px_rgba(139,108,219,0.08)]"
      >
        <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_minmax(560px,660px)] xl:items-center">
          <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>

          <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
            <div class="flex min-h-[122px] flex-col rounded-2xl border border-violet-100 bg-white/90 p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.8)]">
              <span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Limit</span>
              <template v-if="rule.key !== winnerRequiresClipRuleKey">
                <input
                  :value="rule.limit"
                  type="number"
                  min="1"
                  max="50"
                  :disabled="!canManage"
                  class="mt-auto h-12 w-full rounded-2xl border border-violet-100 bg-white px-4 text-lg font-semibold text-slate-900 outline-none transition focus:border-violet-300 focus:ring-4 focus:ring-violet-100 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400"
                  @input="emit('updateRule', rule.key, { limit: Number(($event.target as HTMLInputElement).value) })"
                >
              </template>
              <div v-else class="mt-auto space-y-2 text-sm leading-6 text-slate-500">
                <p class="font-semibold text-slate-700">Ja/Nein-Regel</p>
                <p>Limit wird hier nicht verwendet.</p>
              </div>
            </div>

            <div class="flex min-h-[122px] flex-col rounded-2xl border border-violet-100 bg-white/90 p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.8)]">
              <span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Modus</span>
              <div
                v-if="rule.key === advisoryOnlyRuleKey"
                class="mt-auto space-y-2 text-sm leading-6 text-slate-500"
              >
                <p class="font-semibold text-slate-700">Hinweis-Regel</p>
                <p>Diese Regel bleibt immer unverbindlich und blockiert nichts.</p>
              </div>
              <NativeSelect
                v-else
                class="mt-auto"
                :model-value="rule.mode"
                :disabled="!canManage"
                :options="modeOptions"
                @update:model-value="emit('updateRule', rule.key, { mode: String($event) })"
              />
            </div>

            <div class="flex min-h-[122px] flex-col rounded-2xl border border-violet-100 bg-white/90 p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.8)]">
              <span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Status</span>
              <div class="mt-auto">
                <AdminSettingsToggle
                  class="w-full justify-between"
                  :model-value="rule.enabled"
                  :label="`${rule.label} aktivieren`"
                  :disabled="!canManage"
                  active-label="Aktiv"
                  inactive-label="Inaktiv"
                  @update:model-value="emit('updateRule', rule.key, { enabled: $event })"
                />
              </div>
            </div>
          </div>
        </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 Workflow-Regeln verfügbar.
      </p>
    </section>
  </Card>
</template>
