<script setup lang="ts">
import { ref } from 'vue'
import {
  AlertTriangle,
  CheckCircle2,
  Clock3,
  ExternalLink,
  FileClock,
  ListChecks,
  RefreshCw,
  Search,
  ShieldAlert,
  SlidersHorizontal,
  Trash2,
  X,
} from '@lucide/vue'
import { RouterLink } from 'vue-router'

import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
import AdminRiskHistorySection from '../../components/admin/AdminRiskHistorySection.vue'
import AdminRiskRulesEditor from '../../components/admin/AdminRiskRulesEditor.vue'
import {
  riskAgeLabel,
  riskSeverityClass,
  useAdminRiskManager,
} from '../../components/admin/useAdminRiskManager'
import { watchAdminToast } from '../../composables/useAdminToast'
import Button from '../../components/ui/Button.vue'
import Card from '../../components/ui/Card.vue'
import Modal from '../../components/ui/Modal.vue'

const {
  riskSaving,
  riskLoading,
  adminMessage,
  adminError,
  riskFilter,
  severityFilter,
  historyStatusFilter,
  selectedRiskFlagId,
  selectedDecisionNote,
  selectedDecisionNoteLength,
  selectedDecisionReady,
  queuePage,
  queuePageLabel,
  queueHasPrevious,
  queueHasMore,
  historyPage,
  historyPageLabel,
  historyHasPrevious,
  historyHasMore,
  selectedBulkRiskFlagIds,
  bulkReviewNote,
  bulkSaving,
  canBulkResolve,
  riskRules,
  riskRulesLoading,
  riskRulesSaving,
  riskFlags,
  riskHistory,
  filteredRiskFlags,
  selectedRiskFlag,
  selectedRiskMetadata,
  riskStats,
  riskHistoryStats,
  recentRiskHistory,
  severityFilters,
  historyStatusFilters,
  riskLoadedLabel,
  loadRiskFlags,
  updateRiskFlagStatus,
  setQueuePage,
  setHistoryPage,
  toggleBulkRiskFlag,
  selectVisibleLowRiskFlags,
  clearBulkSelection,
  bulkResolveRiskFlags,
  updateRiskRule,
  saveRiskRules,
} = useAdminRiskManager()

watchAdminToast(adminMessage, adminError)

const activeModal = ref<'rules' | 'history' | null>(null)

function flagLeftBorderClass(severity: string) {
  const s = severity.toLowerCase()
  if (s === 'high') return 'border-l-rose-400'
  if (s === 'medium') return 'border-l-amber-400'
  return 'border-l-sky-300'
}

function statToneClass(tone: string) {
  if (tone === 'danger') return 'text-rose-700 bg-rose-50 border-rose-100'
  if (tone === 'warning') return 'text-amber-700 bg-amber-50 border-amber-100'
  if (tone === 'ok') return 'text-emerald-700 bg-emerald-50 border-emerald-100'
  return 'text-violet-700 bg-violet-50 border-violet-100'
}
</script>

<template>
  <div class="space-y-6">
    <AdminPageHeader
      eyebrow="Risiko"
      description="Auffällige Voting-, Login- und Einreichungsmuster prüfen."
      :icon="ShieldAlert"
    />

    <!-- Filter + Action bar -->
    <Card class="p-4">
      <div class="flex flex-col gap-3 xl:flex-row xl:items-center">
        <label class="relative flex-1">
          <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="riskFilter"
            type="text"
            class="h-11 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="Typ, User, IP, Summary oder Metadaten filtern"
          />
        </label>

        <div class="flex flex-wrap gap-1.5">
          <button
            v-for="filter in severityFilters"
            :key="filter.key"
            type="button"
            class="rounded-full border px-3 py-1.5 text-xs font-semibold transition"
            :class="severityFilter === filter.key
              ? 'border-violet-200 bg-violet-100 text-violet-800'
              : 'border-violet-100 bg-white text-slate-600 hover:bg-violet-50'"
            @click="severityFilter = filter.key"
          >
            {{ filter.label }} · {{ filter.count }}
          </button>
        </div>

        <div class="flex shrink-0 flex-wrap gap-2">
          <Button
            variant="ghost"
            size="sm"
            class="gap-2 border border-violet-200 bg-violet-50 text-violet-700 shadow-none hover:bg-violet-100"
            :disabled="riskLoading"
            @click="loadRiskFlags"
          >
            <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': riskLoading }" />
            {{ riskLoading ? 'Lädt …' : 'Aktualisieren' }}
          </Button>
          <Button
            variant="ghost"
            size="sm"
            class="gap-2 border border-violet-100 shadow-none hover:bg-violet-50"
            @click="activeModal = 'rules'"
          >
            <SlidersHorizontal class="h-4 w-4" />
            Regeln
            <span class="rounded-full bg-violet-100 px-1.5 py-0.5 text-[10px] font-bold text-violet-700">
              {{ riskRules.length }}
            </span>
          </Button>
          <Button
            variant="ghost"
            size="sm"
            class="gap-2 border border-violet-100 shadow-none hover:bg-violet-50"
            @click="activeModal = 'history'"
          >
            <FileClock class="h-4 w-4" />
            Protokoll
            <span class="rounded-full bg-violet-100 px-1.5 py-0.5 text-[10px] font-bold text-violet-700">
              {{ riskHistory.length }}
            </span>
          </Button>
        </div>
      </div>
    </Card>

    <!-- Stat cards -->
    <section class="grid grid-cols-2 gap-4 xl:grid-cols-4">
      <Card
        v-for="stat in riskStats"
        :key="stat.label"
        class="flex items-center gap-4 p-5"
      >
        <span
          class="grid h-11 w-11 shrink-0 place-items-center rounded-2xl border text-lg font-black"
          :class="statToneClass(stat.tone)"
        >
          {{ stat.value }}
        </span>
        <span class="text-sm font-semibold text-slate-600">{{ stat.label }}</span>
      </Card>
    </section>

    <!-- Main: Queue (left) + Decision Panel (right) -->
    <section class="grid gap-6 xl:grid-cols-[minmax(320px,0.78fr)_minmax(0,1.22fr)]">

      <!-- ═══ Queue Card ═══ -->
      <Card class="flex flex-col overflow-hidden">
        <!-- Queue header -->
        <div class="flex items-center justify-between gap-3 border-b border-violet-100 px-5 py-3.5">
          <div>
            <h2 class="text-base font-bold text-slate-900">Offene Queue</h2>
            <p class="text-xs text-slate-400">{{ riskLoadedLabel }}</p>
          </div>
          <span class="rounded-full border border-violet-100 bg-violet-50 px-3 py-1 text-xs font-semibold text-violet-700">
            {{ queuePageLabel }}
          </span>
        </div>

        <!-- Flag list -->
        <div class="flex-1 divide-y divide-violet-50 overflow-y-auto xl:max-h-[640px]">
          <button
            v-for="flag in filteredRiskFlags"
            :key="flag.id"
            type="button"
            class="group relative w-full border-l-[3px] p-4 text-left transition"
            :class="[
              flagLeftBorderClass(flag.severity),
              selectedRiskFlagId === flag.id
                ? 'bg-[linear-gradient(135deg,#ece2ff20,#fff2dd10)]'
                : 'hover:bg-violet-50/30',
            ]"
            @click="selectedRiskFlagId = flag.id"
          >
            <!-- Bulk checkbox — only for Low severity, tucked to top-right -->
            <label
              v-if="flag.severity.toLowerCase() === 'low'"
              class="absolute right-4 top-4 z-10 cursor-pointer"
              :title="'Für Bulk auswählen'"
              @click.stop
            >
              <input
                type="checkbox"
                class="h-4 w-4 accent-violet-600"
                :checked="selectedBulkRiskFlagIds.includes(flag.id)"
                @change="toggleBulkRiskFlag(flag.id)"
              />
            </label>

            <div class="flex flex-wrap items-center gap-1.5 pr-6">
              <span
                class="inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-semibold"
                :class="riskSeverityClass(flag.severity)"
              >
                <AlertTriangle class="h-3 w-3" />
                {{ flag.severity }}
              </span>
              <span class="inline-flex items-center gap-1 rounded-full bg-slate-50 px-2 py-0.5 text-[10px] font-semibold text-slate-500">
                <Clock3 class="h-3 w-3" />
                {{ riskAgeLabel(flag) }}
              </span>
              <span class="rounded-full bg-violet-50 px-2 py-0.5 text-[10px] font-semibold text-violet-700">
                {{ flag.type }}
              </span>
            </div>
            <h3 class="mt-2 line-clamp-2 pr-6 text-sm font-semibold text-slate-900">{{ flag.summary }}</h3>
            <p class="mt-1 truncate text-xs text-slate-400">
              {{ flag.twitchUserId || 'unbekannter User' }} · {{ flag.source }}
            </p>
          </button>

          <p
            v-if="riskFlags.length === 0"
            class="px-5 py-10 text-center text-sm text-slate-400"
          >
            Keine offenen Risikohinweise vorhanden.
          </p>
          <p
            v-else-if="filteredRiskFlags.length === 0"
            class="px-5 py-10 text-center text-sm text-slate-400"
          >
            Keine Hinweise passen zum aktuellen Filter.
          </p>
        </div>

        <!-- Pagination footer -->
        <div class="flex items-center justify-between gap-2 border-t border-violet-100 bg-white px-3 py-2">
          <Button
            variant="ghost"
            size="sm"
            class="border border-violet-100 shadow-none"
            :disabled="!queueHasPrevious"
            @click="setQueuePage(queuePage - 1)"
          >
            Zurück
          </Button>
          <span class="text-xs font-semibold text-slate-400">{{ queuePageLabel }}</span>
          <Button
            variant="ghost"
            size="sm"
            class="border border-violet-100 shadow-none"
            :disabled="!queueHasMore"
            @click="setQueuePage(queuePage + 1)"
          >
            Weiter
          </Button>
        </div>

        <!-- Bulk tray — slides in when items are selected -->
        <Transition
          enter-active-class="transition-all duration-200 ease-out"
          enter-from-class="opacity-0 max-h-0"
          enter-to-class="opacity-100 max-h-64"
          leave-active-class="transition-all duration-150 ease-in"
          leave-from-class="opacity-100 max-h-64"
          leave-to-class="opacity-0 max-h-0"
        >
          <div
            v-if="selectedBulkRiskFlagIds.length > 0"
            class="overflow-hidden border-t border-amber-100 bg-amber-50/80 p-4"
          >
            <div class="mb-3 flex items-center justify-between gap-3">
              <span class="text-xs font-bold text-amber-800">
                {{ selectedBulkRiskFlagIds.length }} Low-Hinweise ausgewählt
              </span>
              <div class="flex gap-1.5">
                <button
                  type="button"
                  class="inline-flex items-center gap-1 rounded-lg border border-amber-200 bg-white px-2.5 py-1 text-[11px] font-semibold text-amber-700 transition hover:bg-amber-50"
                  @click="selectVisibleLowRiskFlags"
                >
                  <ListChecks class="h-3.5 w-3.5" />
                  Alle Low
                </button>
                <button
                  type="button"
                  class="inline-flex items-center gap-1 rounded-lg border border-amber-200 bg-white px-2.5 py-1 text-[11px] font-semibold text-amber-700 transition hover:bg-amber-50"
                  @click="clearBulkSelection"
                >
                  <X class="h-3.5 w-3.5" />
                  Leeren
                </button>
              </div>
            </div>
            <input
              v-model="bulkReviewNote"
              class="mb-3 h-10 w-full rounded-xl border border-amber-200 bg-white px-3 text-sm outline-none transition focus:border-amber-400 focus:ring-4 focus:ring-amber-100/60"
              placeholder="Bulk-Notiz eingeben (mind. 3 Zeichen)"
            />
            <div class="flex gap-2">
              <Button
                size="sm"
                variant="secondary"
                class="flex-1 gap-2"
                :disabled="!canBulkResolve || bulkSaving"
                @click="bulkResolveRiskFlags('dismissed')"
              >
                <Trash2 class="h-3.5 w-3.5" />
                {{ bulkSaving ? '…' : 'Alle verwerfen' }}
              </Button>
              <Button
                size="sm"
                class="flex-1 gap-2"
                :disabled="!canBulkResolve || bulkSaving"
                @click="bulkResolveRiskFlags('resolved')"
              >
                <CheckCircle2 class="h-3.5 w-3.5" />
                {{ bulkSaving ? '…' : 'Alle erledigen' }}
              </Button>
            </div>
          </div>
        </Transition>
      </Card>

      <!-- ═══ Decision Panel ═══ -->
      <div>
        <Card v-if="selectedRiskFlag" class="overflow-hidden">
          <!-- Gradient header -->
          <div class="border-b border-violet-100 bg-[linear-gradient(135deg,#f7f2ff,#fff7ed)] px-6 py-5">
            <div class="flex flex-wrap items-start justify-between gap-3">
              <div class="flex flex-wrap items-center gap-2">
                <span
                  class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-semibold"
                  :class="riskSeverityClass(selectedRiskFlag.severity)"
                >
                  <AlertTriangle class="h-3.5 w-3.5" />
                  {{ selectedRiskFlag.severity }}
                </span>
                <span class="inline-flex items-center gap-1.5 rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600">
                  <Clock3 class="h-3.5 w-3.5" />
                  {{ riskAgeLabel(selectedRiskFlag) }}
                </span>
                <span class="rounded-full bg-violet-100 px-3 py-1 text-xs font-semibold text-violet-800">
                  {{ selectedRiskFlag.source }} · {{ selectedRiskFlag.type }}
                </span>
              </div>
              <span class="shrink-0 rounded-2xl border border-violet-100 bg-white/70 px-3 py-1.5 text-xs font-bold text-violet-700">
                #{{ selectedRiskFlag.id }}
              </span>
            </div>
            <h2 class="mt-4 text-xl font-bold text-slate-900">{{ selectedRiskFlag.summary }}</h2>
            <p class="mt-2 text-sm text-slate-500">
              {{ selectedRiskFlag.twitchUserId || 'unbekannter User' }}
              · {{ selectedRiskFlag.createdFromIp }}
              · {{ new Date(selectedRiskFlag.createdAt).toLocaleString('de-DE') }}
            </p>
          </div>

          <div class="space-y-5 p-5">
            <!-- Metadata + Entity links -->
            <div class="grid gap-4 md:grid-cols-2">
              <!-- Metadata -->
              <div>
                <p class="mb-3 text-[10px] font-bold uppercase tracking-[0.18em] text-slate-400">Metadaten</p>
                <dl v-if="selectedRiskMetadata.length" class="space-y-2">
                  <div
                    v-for="item in selectedRiskMetadata"
                    :key="item.key"
                    class="rounded-xl border border-violet-100 bg-violet-50/50 px-3 py-2"
                  >
                    <dt class="text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-400">{{ item.key }}</dt>
                    <dd class="mt-1 break-words text-sm text-slate-700">{{ item.value }}</dd>
                  </div>
                </dl>
                <p
                  v-else
                  class="rounded-xl border border-dashed border-violet-100 px-3 py-5 text-sm text-slate-400"
                >
                  Keine zusätzlichen Metadaten.
                </p>
              </div>

              <!-- Entity links -->
              <div>
                <p class="mb-3 text-[10px] font-bold uppercase tracking-[0.18em] text-slate-400">Betroffene Bereiche</p>
                <div v-if="selectedRiskFlag.entityLinks.length" class="flex flex-wrap gap-2">
                  <RouterLink
                    v-for="link in selectedRiskFlag.entityLinks"
                    :key="`${link.entityType}-${link.entityId}`"
                    :to="link.to"
                    class="inline-flex items-center gap-2 rounded-xl border border-violet-100 bg-violet-50 px-3 py-2 text-sm font-semibold text-violet-800 transition hover:border-violet-200 hover:bg-violet-100"
                  >
                    <ExternalLink class="h-4 w-4" />
                    {{ link.label }}
                  </RouterLink>
                </div>
                <p
                  v-else
                  class="rounded-xl border border-dashed border-violet-100 px-3 py-5 text-sm text-slate-400"
                >
                  Kein direkter Zielbereich hinterlegt.
                </p>
              </div>
            </div>

            <!-- Decision area -->
            <div class="rounded-2xl border border-violet-100 bg-violet-50/30 p-4">
              <label class="block">
                <span class="text-[10px] font-bold uppercase tracking-[0.18em] text-slate-400">Entscheidungsnotiz</span>
                <textarea
                  v-model="selectedDecisionNote"
                  rows="5"
                  class="mt-2 w-full rounded-2xl border border-violet-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
                  placeholder="Kurz festhalten, was geprüft wurde und warum du so entscheidest."
                />
              </label>
              <p
                class="mt-2 text-xs"
                :class="selectedDecisionReady ? 'text-slate-400' : 'text-rose-500'"
              >
                {{ selectedDecisionNoteLength }}/500 Zeichen · mind. 3 Zeichen erforderlich
              </p>
              <div class="mt-4 flex flex-wrap gap-3">
                <Button
                  variant="secondary"
                  class="flex-1"
                  :disabled="riskSaving === selectedRiskFlag.id || !selectedDecisionReady"
                  @click="updateRiskFlagStatus(selectedRiskFlag.id, 'dismissed')"
                >
                  <Trash2 class="mr-2 h-4 w-4" />
                  {{ riskSaving === selectedRiskFlag.id ? 'Speichert …' : 'Verwerfen' }}
                </Button>
                <Button
                  class="flex-1"
                  :disabled="riskSaving === selectedRiskFlag.id || !selectedDecisionReady"
                  @click="updateRiskFlagStatus(selectedRiskFlag.id, 'resolved')"
                >
                  <CheckCircle2 class="mr-2 h-4 w-4" />
                  {{ riskSaving === selectedRiskFlag.id ? 'Speichert …' : 'Erledigt markieren' }}
                </Button>
              </div>
            </div>
          </div>
        </Card>

        <!-- Empty state -->
        <Card v-else class="flex flex-col items-center justify-center px-8 py-20 text-center">
          <span class="grid h-16 w-16 place-items-center rounded-3xl border border-violet-100 bg-violet-50">
            <ShieldAlert class="h-8 w-8 text-violet-300" />
          </span>
          <p class="mt-5 text-base font-bold text-slate-600">Kein Hinweis ausgewählt</p>
          <p class="mt-2 max-w-xs text-sm leading-6 text-slate-400">
            Wähle links einen Risikohinweis aus, um Details und Entscheidungsoptionen zu sehen.
          </p>
        </Card>
      </div>
    </section>

    <!-- Modal: Regeln -->
    <Modal
      :open="activeModal === 'rules'"
      title="Regel-Editor"
      subtitle="Thresholds, Zeitfenster und Severity zentral anpassen."
      size="xl"
      @close="activeModal = null"
    >
      <AdminRiskRulesEditor
        :rules="riskRules"
        :loading="riskRulesLoading"
        :saving="riskRulesSaving"
        @update-rule="updateRiskRule"
        @save="saveRiskRules"
      />
    </Modal>

    <!-- Modal: Protokoll -->
    <Modal
      :open="activeModal === 'history'"
      title="Entscheidungsprotokoll"
      subtitle="Entschiedene Hinweise prüfen und bei Bedarf wieder öffnen."
      size="xl"
      @close="activeModal = null"
    >
      <AdminRiskHistorySection
        v-model:history-status-filter="historyStatusFilter"
        :risk-history="recentRiskHistory"
        :total-history="riskHistory.length"
        :history-status-filters="historyStatusFilters"
        :history-stats="riskHistoryStats"
        :saving="riskSaving"
        :page="historyPage"
        :page-label="historyPageLabel"
        :has-previous="historyHasPrevious"
        :has-more="historyHasMore"
        @decide="updateRiskFlagStatus"
        @page="setHistoryPage"
      />
    </Modal>
  </div>
</template>
