<script setup lang="ts">
import { computed, ref } from 'vue'
import { BookOpenText, CheckCircle2, ChevronDown, History, Info, Rocket, ShieldCheck, Sparkles, Tag } from '@lucide/vue'

import { buildDateLabel, buildVersion, releaseNotes, releaseVersions, semanticVersion, versionRules, type ReleaseChangeType } from '../../lib/releaseNotes'
import Button from '../ui/Button.vue'
import Card from '../ui/Card.vue'
import Modal from '../ui/Modal.vue'

const changelogOpen = ref(false)
const expandedVersions = ref<string[]>([releaseVersions[0]?.version ?? semanticVersion])

const featureCount = computed(() => releaseNotes.filter((note) => note.type === 'feature').length)
const fixCount = computed(() => releaseNotes.filter((note) => note.type === 'fix').length)
const versionCount = computed(() => releaseVersions.length)
const currentReleaseSummary = computed(() => releaseVersions[0]?.summary ?? 'Aktueller Feature-Release.')

function versionFeatureCount(version: typeof releaseVersions[number]) {
  return version.notes.filter((note) => note.type === 'feature').length
}

function versionFixCount(version: typeof releaseVersions[number]) {
  return version.notes.filter((note) => note.type === 'fix').length
}

function isVersionExpanded(version: string) {
  return expandedVersions.value.includes(version)
}

function toggleVersion(version: string) {
  if (isVersionExpanded(version)) {
    expandedVersions.value = expandedVersions.value.filter((entry) => entry !== version)
    return
  }

  expandedVersions.value = [version]
}

function changeTypeLabel(type: ReleaseChangeType) {
  if (type === 'major') return 'Major'
  if (type === 'feature') return 'Feature'
  return 'Fix'
}

function changeTypeClasses(type: ReleaseChangeType) {
  if (type === 'major') {
    return {
      badge: 'bg-rose-50 text-rose-700',
      icon: 'bg-rose-100 text-rose-700',
      panel: 'border-rose-100 bg-rose-50/45',
    }
  }

  if (type === 'feature') {
    return {
      badge: 'bg-violet-50 text-violet-700',
      icon: 'bg-violet-100 text-violet-700',
      panel: 'border-violet-100 bg-violet-50/50',
    }
  }

  return {
    badge: 'bg-emerald-50 text-emerald-700',
    icon: 'bg-emerald-100 text-emerald-700',
    panel: 'border-emerald-100 bg-emerald-50/45',
  }
}
</script>

<template>
  <Card class="overflow-hidden">
    <div class="border-b border-violet-100 bg-gradient-to-br from-white via-violet-50/70 to-emerald-50/55 p-6">
      <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div class="flex items-start gap-3">
          <div class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-violet-100 text-violet-700">
            <Rocket class="h-5 w-5" />
          </div>
          <div>
            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Build Version</p>
            <h2 class="mt-1 text-xl font-bold text-slate-900">Version {{ buildVersion }}</h2>
            <p class="mt-2 max-w-3xl text-sm leading-6 text-slate-500">
              Release vom {{ buildDateLabel }}: {{ currentReleaseSummary }}
            </p>
          </div>
        </div>

        <Button type="button" variant="ghost" class="gap-2 rounded-2xl px-5" @click="changelogOpen = true">
          <BookOpenText class="h-4 w-4" />
          Changelog ansehen
        </Button>
      </div>
    </div>

    <div class="grid gap-3 p-5 md:grid-cols-3">
      <div class="rounded-2xl border border-violet-100 bg-violet-50/55 px-4 py-3">
        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Release-Typ</p>
        <strong class="mt-1 block text-lg text-violet-700">Feature</strong>
        <p class="mt-1 text-xs leading-5 text-slate-600">Nach deiner Regel: 0.x.0.</p>
      </div>
      <div class="rounded-2xl border border-emerald-100 bg-emerald-50/55 px-4 py-3">
        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Neue Features</p>
        <strong class="mt-1 block text-lg text-emerald-700">{{ featureCount }}</strong>
        <p class="mt-1 text-xs leading-5 text-slate-600">Sichtbare neue Funktionen und bessere Workflows.</p>
      </div>
      <div class="rounded-2xl border border-amber-100 bg-amber-50/65 px-4 py-3">
        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Fixes & Polish</p>
        <strong class="mt-1 block text-lg text-amber-700">{{ fixCount }}</strong>
        <p class="mt-1 text-xs leading-5 text-slate-600">Stabilitaet, UI-Feedback und Backend-Hygiene.</p>
      </div>
      <div class="rounded-2xl border border-slate-200 bg-slate-50/70 px-4 py-3 md:col-span-3">
        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Versionen im Verlauf</p>
        <strong class="mt-1 block text-lg text-slate-800">{{ versionCount }}</strong>
        <p class="mt-1 text-xs leading-5 text-slate-600">Neueste Builds lassen sich im Changelog einzeln auf- und zuklappen.</p>
      </div>
    </div>
  </Card>

  <Modal
    :open="changelogOpen"
    title="Changelog"
    :subtitle="`Build ${buildVersion} · ${buildDateLabel}`"
    size="lg"
    @close="changelogOpen = false"
  >
    <div class="space-y-6">
      <section>
        <div class="flex items-center gap-2">
          <Tag class="h-4 w-4 text-violet-600" />
          <h3 class="text-sm font-bold text-slate-900">Versionsschema</h3>
        </div>
        <div class="mt-3 grid gap-3 md:grid-cols-3">
          <div
            v-for="rule in versionRules"
            :key="rule.pattern"
            class="rounded-2xl border border-violet-100 bg-white px-4 py-3"
          >
            <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-violet-500">{{ rule.pattern }}</p>
            <strong class="mt-1 block text-sm text-slate-900">{{ rule.label }}</strong>
            <p class="mt-1 text-xs leading-5 text-slate-500">{{ rule.description }}</p>
          </div>
        </div>
      </section>

      <section>
        <div class="flex items-center gap-2">
          <History class="h-4 w-4 text-violet-600" />
          <h3 class="text-sm font-bold text-slate-900">Versionen & Aenderungen</h3>
        </div>
        <div class="mt-3 space-y-3">
          <section
            v-for="version in releaseVersions"
            :key="version.version"
            class="overflow-hidden rounded-[24px] border border-violet-100 bg-white/95 shadow-[0_16px_36px_rgba(124,92,255,0.08)]"
          >
            <button
              type="button"
              class="flex w-full items-start justify-between gap-4 bg-gradient-to-r from-white via-violet-50/50 to-white px-5 py-4 text-left transition hover:bg-violet-50/70"
              @click="toggleVersion(version.version)"
            >
              <div class="min-w-0">
                <div class="flex flex-wrap items-center gap-2">
                  <span class="rounded-full bg-slate-900 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-white">
                    {{ version.version }}
                  </span>
                  <span class="rounded-full px-2.5 py-1 text-[11px] font-semibold" :class="changeTypeClasses(version.releaseType).badge">
                    {{ changeTypeLabel(version.releaseType) }}
                  </span>
                  <span class="text-xs font-semibold text-slate-500">
                    {{ version.buildVersion ?? version.version }} · {{ version.buildDateLabel }}
                  </span>
                </div>
                <h4 class="mt-3 text-base font-bold text-slate-900">{{ version.summary }}</h4>
                <div class="mt-3 flex flex-wrap gap-2 text-xs font-semibold">
                  <span class="rounded-full border border-violet-100 bg-violet-50 px-3 py-1 text-violet-700">
                    {{ versionFeatureCount(version) }} Features
                  </span>
                  <span class="rounded-full border border-emerald-100 bg-emerald-50 px-3 py-1 text-emerald-700">
                    {{ versionFixCount(version) }} Fixes
                  </span>
                  <span class="rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-slate-600">
                    {{ version.notes.length }} Eintraege
                  </span>
                </div>
              </div>
              <span
                class="grid h-10 w-10 shrink-0 place-items-center rounded-2xl border border-violet-100 bg-white text-violet-700 transition"
                :class="{ 'rotate-180': isVersionExpanded(version.version) }"
              >
                <ChevronDown class="h-4 w-4" />
              </span>
            </button>

            <div v-if="isVersionExpanded(version.version)" class="border-t border-violet-100 bg-white px-5 py-4">
              <div class="space-y-3">
                <article
                  v-for="note in version.notes"
                  :key="`${version.version}-${note.title}`"
                  class="rounded-2xl border p-4"
                  :class="changeTypeClasses(note.type).panel"
                >
                  <div class="flex items-start gap-3">
                    <div class="grid h-9 w-9 shrink-0 place-items-center rounded-xl" :class="changeTypeClasses(note.type).icon">
                      <Sparkles v-if="note.type === 'feature'" class="h-4 w-4" />
                      <ShieldCheck v-else-if="note.type === 'major'" class="h-4 w-4" />
                      <CheckCircle2 v-else class="h-4 w-4" />
                    </div>
                    <div class="min-w-0">
                      <div class="flex flex-wrap items-center gap-2">
                        <h4 class="text-sm font-bold text-slate-900">{{ note.title }}</h4>
                        <span class="rounded-full px-2.5 py-1 text-[11px] font-semibold" :class="changeTypeClasses(note.type).badge">
                          {{ changeTypeLabel(note.type) }}
                        </span>
                      </div>
                      <p class="mt-1 text-sm leading-6 text-slate-600">{{ note.description }}</p>
                    </div>
                  </div>
                </article>
              </div>
            </div>
          </section>
        </div>
      </section>

      <div class="flex items-start gap-3 rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm leading-6 text-violet-900">
        <Info class="mt-0.5 h-4 w-4 shrink-0" />
        <p>Diese Version ist als <strong>{{ semanticVersion }}</strong> gesetzt, weil der Schwerpunkt auf neuen Features und groesseren UX-Verbesserungen liegt. Die Pipeline darf Build-Metadaten ergaenzen, aber nicht selbst Major, Feature oder Fix entscheiden.</p>
      </div>
    </div>

    <template #footer>
      <Button type="button" variant="ghost" @click="changelogOpen = false">Schließen</Button>
    </template>
  </Modal>
</template>
