<script setup lang="ts">
import { computed, ref } from 'vue'
import { ExternalLink, Film, PlayCircle, Search, Tags, Trash2, TriangleAlert, Users } from '@lucide/vue'

import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
import AdminSeasonToolbar from '../../components/admin/AdminSeasonToolbar.vue'
import Button from '../../components/ui/Button.vue'
import Card from '../../components/ui/Card.vue'
import Modal from '../../components/ui/Modal.vue'
import { useAwardsStore } from '../../stores/awards'
import type { AdminClipSubmissionItem } from '../../types/awards'

const store = useAwardsStore()
const query = ref('')
const deleting = ref(false)
const adminMessage = ref('')
const adminError = ref('')
const clipToDelete = ref<AdminClipSubmissionItem | null>(null)

const seasonDetail = computed(() => store.adminSeasonDetail)
const selectedSeasonId = computed(() => store.adminSelectedSeasonId)
const categoryName = computed(() =>
  Object.fromEntries(seasonDetail.value.categories.map((category) => [category.id, category.name])),
)

const clips = computed(() => {
  const search = query.value.trim().toLowerCase()
  if (!search) return seasonDetail.value.clipSubmissions
  return seasonDetail.value.clipSubmissions.filter((clip) =>
    [clip.title, clip.creator, clip.platform, clip.submittedByTwitchId, clip.clipUrl].join(' ').toLowerCase().includes(search),
  )
})

const stats = computed(() => [
  { label: 'Einreichungen', value: seasonDetail.value.clipSubmissions.length, icon: Film },
  { label: 'Offen', value: seasonDetail.value.clipSubmissions.filter((clip) => clip.status === 'pending').length, icon: PlayCircle },
  { label: 'Clip-Kategorien', value: seasonDetail.value.categories.filter((category) => `${category.groupName} ${category.name}`.toLowerCase().includes('clip')).length, icon: Tags },
])

function platformClass(platform: string) {
  if (platform === 'Twitch') return 'border-violet-200 bg-violet-50 text-violet-700'
  if (platform === 'YouTube') return 'border-rose-200 bg-rose-50 text-rose-600'
  return 'border-slate-200 bg-slate-50 text-slate-600'
}

async function confirmDelete() {
  if (!clipToDelete.value || !selectedSeasonId.value) return
  deleting.value = true
  adminError.value = ''
  try {
    await store.deleteAdminClip(clipToDelete.value.id, selectedSeasonId.value)
    adminMessage.value = 'Clip-Einreichung wurde entfernt.'
    clipToDelete.value = null
  } catch (error) {
    adminError.value = error instanceof Error ? error.message : 'Löschen fehlgeschlagen.'
  } finally {
    deleting.value = false
  }
}
</script>

<template>
  <div class="space-y-6">
    <AdminPageHeader
      eyebrow="Clips"
      title="Clip-Einreichungen moderieren"
      description="Alle von der Community eingereichten Clips laufen hier auf. Sieh sie dir an, prüfe die Links und entferne Spam oder Duplikate."
      :icon="Film"
    />

    <AdminSeasonToolbar />

    <section class="grid gap-4 lg:grid-cols-3">
      <Card v-for="stat in stats" :key="stat.label" class="p-5">
        <div class="flex items-start justify-between gap-4">
          <div>
            <p class="text-xs font-semibold uppercase tracking-[0.18em] text-violet-500">{{ stat.label }}</p>
            <strong class="mt-3 block text-3xl text-violet-900">{{ stat.value }}</strong>
          </div>
          <div class="grid h-10 w-10 place-items-center rounded-2xl bg-violet-100 text-violet-700">
            <component :is="stat.icon" class="h-5 w-5" />
          </div>
        </div>
      </Card>
    </section>

    <Card class="overflow-hidden">
      <div class="border-b border-violet-100 p-5">
        <label class="relative block">
          <Search class="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-violet-400" />
          <input
            v-model="query"
            class="h-12 w-full rounded-2xl border border-violet-200 bg-white pl-11 pr-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
            placeholder="Titel, Creator, Plattform oder User suchen …"
          />
        </label>
      </div>

      <p v-if="adminMessage" class="border-b border-emerald-100 bg-emerald-50 px-5 py-3 text-sm text-emerald-700">{{ adminMessage }}</p>
      <p v-if="adminError" class="border-b border-rose-100 bg-rose-50 px-5 py-3 text-sm text-rose-700">{{ adminError }}</p>

      <div class="divide-y divide-violet-50">
        <div v-for="clip in clips" :key="clip.id" class="flex flex-col gap-3 px-5 py-4 lg:flex-row lg:items-center lg:gap-4">
          <div class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-[linear-gradient(135deg,#ece2ff,#fff2dd)] text-violet-600">
            <Film class="h-5 w-5" />
          </div>
          <div class="min-w-0 flex-1">
            <p class="truncate font-semibold text-slate-900">{{ clip.title || 'Ohne Titel' }}</p>
            <p class="truncate text-sm text-slate-500">
              {{ clip.creator || 'Unbekannt' }}
              <span v-if="clip.categoryId"> · {{ categoryName[clip.categoryId] }}</span>
              · von {{ clip.submittedByTwitchId }}
            </p>
          </div>
          <span :class="['shrink-0 rounded-full border px-3 py-1 text-xs font-semibold', platformClass(clip.platform)]">{{ clip.platform }}</span>
          <a
            :href="clip.clipUrl"
            target="_blank"
            rel="noopener"
            class="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-violet-200 px-3 py-1.5 text-xs font-semibold text-violet-700 transition hover:bg-violet-50"
          >
            <ExternalLink class="h-3.5 w-3.5" /> Clip öffnen
          </a>
          <button
            class="grid h-9 w-9 shrink-0 place-items-center rounded-full border border-rose-200 text-rose-500 transition hover:bg-rose-50"
            title="Einreichung entfernen"
            @click="clipToDelete = clip"
          >
            <Trash2 class="h-4 w-4" />
          </button>
        </div>

        <div v-if="clips.length === 0" class="px-5 py-12 text-center">
          <Users class="mx-auto h-6 w-6 text-violet-300" />
          <p class="mt-2 text-sm text-slate-500">
            {{ seasonDetail.clipSubmissions.length === 0 ? 'Noch keine Clip-Einreichungen in diesem Jahr.' : 'Keine Treffer für den aktuellen Filter.' }}
          </p>
        </div>
      </div>
    </Card>

    <Modal :open="!!clipToDelete" title="Clip entfernen?" @close="clipToDelete = null">
      <div class="flex items-start gap-4">
        <span class="grid h-12 w-12 shrink-0 place-items-center rounded-full bg-rose-50 text-rose-500">
          <TriangleAlert class="h-6 w-6" />
        </span>
        <p class="text-sm leading-7 text-slate-600">
          Die Einreichung „<strong class="text-slate-800">{{ clipToDelete?.title || clipToDelete?.clipUrl }}</strong>" wird entfernt.
          Das lässt sich nicht rückgängig machen.
        </p>
      </div>
      <template #footer>
        <Button variant="ghost" @click="clipToDelete = null">Abbrechen</Button>
        <Button class="!bg-rose-600 hover:!bg-rose-500" :disabled="deleting" @click="confirmDelete">
          {{ deleting ? 'Entfernt …' : 'Entfernen' }}
        </Button>
      </template>
    </Modal>
  </div>
</template>
