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

import Button from '../ui/Button.vue'
import Card from '../ui/Card.vue'

defineProps<{
  loading: boolean
  saving: boolean
  canManage: boolean
  summary: {
    clipSubmissionsEnabled: boolean
    clipReviewEnabled: boolean
    pendingClipCount: number
    totalClipCount: number
  }
  disabledMessage: string
}>()

const emit = defineEmits<{
  configure: []
}>()
</script>

<template>
  <Card class="overflow-hidden">
    <section class="p-5">
      <div class="grid gap-4 xl:grid-cols-[minmax(0,1fr)_auto] xl:items-start">
        <div class="min-w-0">
          <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Optionale Workflows</p>
          <div class="mt-2 flex flex-wrap items-center gap-2">
            <Film class="h-5 w-5 text-violet-700" />
            <h2 class="text-lg font-bold text-slate-900">Clip-Einreichungen steuern</h2>
          </div>
          <p class="mt-2 max-w-3xl text-sm leading-6 text-slate-500">
            Clip-Einreichung und Clip-Review sind optionale Betriebsfunktionen. Wenn deaktiviert, bleibt der Award-Workflow ohne Clip-Pflicht nutzbar.
          </p>
        </div>

        <Button class="gap-2" :disabled="loading || saving || !canManage" @click="emit('configure')">
          <Settings2 class="h-4 w-4" />
          Clip-Workflow konfigurieren
        </Button>
      </div>

      <div class="mt-5 flex flex-wrap gap-2">
        <span
          class="rounded-full px-3 py-1.5 text-xs font-semibold"
          :class="summary.clipSubmissionsEnabled ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700'"
        >
          {{ summary.clipSubmissionsEnabled ? 'Clips aktiv' : 'Clips deaktiviert' }}
        </span>
        <span
          class="rounded-full px-3 py-1.5 text-xs font-semibold"
          :class="summary.clipSubmissionsEnabled ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-600'"
        >
          {{ summary.clipSubmissionsEnabled ? 'Public sichtbar' : 'Public ausgeblendet' }}
        </span>
        <span
          class="rounded-full px-3 py-1.5 text-xs font-semibold"
          :class="summary.clipReviewEnabled ? 'bg-violet-100 text-violet-700' : 'bg-slate-100 text-slate-600'"
        >
          {{ summary.clipReviewEnabled ? 'Admin-Review sichtbar' : 'Admin-Review aus' }}
        </span>
        <span class="rounded-full bg-amber-100 px-3 py-1.5 text-xs font-semibold text-amber-700">
          Review offen: {{ summary.pendingClipCount }}
        </span>
        <span class="rounded-full bg-sky-100 px-3 py-1.5 text-xs font-semibold text-sky-700">
          Bestand: {{ summary.totalClipCount }}
        </span>
      </div>

      <p v-if="!summary.clipSubmissionsEnabled" class="mt-4 rounded-2xl border border-slate-100 bg-slate-50 px-4 py-3 text-sm leading-6 text-slate-600">
        {{ disabledMessage || 'Neue Clip-Einreichungen sind geschlossen. Bestehende Clips und Review-Daten bleiben erhalten.' }}
      </p>
    </section>
  </Card>
</template>
