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

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

defineProps<{
  form: {
    clipSubmissionsEnabled: boolean
    clipReviewEnabled: boolean
    clipAdminMenuVisible: boolean
    clipSubmissionDisabledMessage: string
  }
  saving: boolean
  dirty: boolean
  canManage: boolean
}>()

const emit = defineEmits<{
  save: []
  'update:clipSubmissionsEnabled': [value: boolean]
  'update:clipReviewEnabled': [value: boolean]
  'update:clipAdminMenuVisible': [value: boolean]
  'update:clipSubmissionDisabledMessage': [value: string]
}>()
</script>

<template>
  <Card class="overflow-hidden">
    <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">
          <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Optionale Workflows</p>
          <h2 class="mt-2 text-lg font-bold text-slate-900">Clip-Einreichungen direkt steuern</h2>
          <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="saving || !dirty || !canManage" @click="emit('save')">
          <Save class="h-4 w-4" />
          {{ saving ? 'Speichert ...' : 'Clip-Workflow speichern' }}
        </Button>
      </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 den Clip-Workflow ansehen, aber nicht bearbeiten.
    </section>

    <section class="space-y-5 p-5">
      <section class="grid gap-3 md:grid-cols-2">
        <div class="rounded-2xl border border-violet-100 bg-violet-50/45 p-4">
          <div class="flex items-start justify-between gap-4">
            <div>
              <h4 class="text-base font-bold text-slate-900">Public-Einreichung</h4>
              <p class="mt-1 text-sm leading-6 text-slate-500">
                Besucher können während der passenden Phase Clips einreichen.
              </p>
            </div>
            <AdminSettingsToggle
              :model-value="form.clipSubmissionsEnabled"
              label="Clip-Einreichung aktivieren"
              :disabled="!canManage"
              active-label="Aktiv"
              inactive-label="Inaktiv"
              @update:model-value="emit('update:clipSubmissionsEnabled', $event)"
            />
          </div>
        </div>

        <div class="rounded-2xl border border-violet-100 bg-violet-50/45 p-4">
          <div class="flex items-start justify-between gap-4">
            <div>
              <h4 class="text-base font-bold text-slate-900">Admin-Review</h4>
              <p class="mt-1 text-sm leading-6 text-slate-500">
                Clip-Bestand und Alt-Einreichungen bleiben als optionale Inbox sichtbar.
              </p>
            </div>
            <AdminSettingsToggle
              :model-value="form.clipReviewEnabled"
              label="Admin-Review anzeigen"
              :disabled="!canManage"
              active-label="Sichtbar"
              inactive-label="Aus"
              @update:model-value="emit('update:clipReviewEnabled', $event)"
            />
          </div>
        </div>
      </section>

      <div class="rounded-2xl border border-violet-100 bg-violet-50/45 p-4">
        <div class="flex items-start justify-between gap-4">
          <div>
            <h4 class="text-base font-bold text-slate-900">Menüpunkt „Clips" im Admin</h4>
            <p class="mt-1 text-sm leading-6 text-slate-500">
              Blendet den Clips-Menüpunkt im Admin-Panel ein oder aus, unabhängig von Einreichung und Review.
            </p>
          </div>
          <AdminSettingsToggle
            :model-value="form.clipAdminMenuVisible"
            label="Clips-Menüpunkt anzeigen"
            :disabled="!canManage"
            active-label="Sichtbar"
            inactive-label="Aus"
            @update:model-value="emit('update:clipAdminMenuVisible', $event)"
          />
        </div>
      </div>

      <label class="block space-y-2">
        <span class="text-sm font-bold text-slate-900">Hinweis bei deaktivierter Einreichung</span>
        <textarea
          :value="form.clipSubmissionDisabledMessage"
          rows="3"
          maxlength="240"
          :disabled="!canManage"
          class="w-full rounded-2xl border border-violet-100 bg-white px-4 py-3 text-sm leading-6 text-slate-700 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('update:clipSubmissionDisabledMessage', ($event.target as HTMLTextAreaElement).value)"
        />
        <span class="text-xs font-semibold text-slate-500">
          {{ form.clipSubmissionDisabledMessage.length }}/240 Zeichen
        </span>
      </label>

      <section class="rounded-2xl border border-sky-100 bg-sky-50 px-4 py-3 text-sm leading-6 text-sky-800">
        Nominierung, Voting und Gewinnerpflege laufen unabhängig davon weiter. Bestehende Clips werden nicht gelöscht.
      </section>
    </section>
  </Card>
</template>
