<script setup lang="ts">
import { computed } from 'vue'
import { LogOut, Shield, Trash2, X } from '@lucide/vue'

import type { AuthSession } from '../../types/awards'

const props = defineProps<{
  privacyModalOpen: boolean
  privacyContentHtml: string
  onClosePrivacy: () => void
  privacyModalStop: (event: Event) => void
  accountModalOpen: boolean
  session: AuthSession | null
  twitchUser: string
  role: string
  deleteNotConfirm: boolean
  deleteConfirm: boolean
  accountActionError: string
  authLoading: boolean
  onCloseAccount: () => void
  accountModalStop: (event: Event) => void
  onOpenPrivacy: () => void
  onLogout: () => Promise<void> | void
  onRequestDelete: () => void
  onCancelDelete: () => void
  onConfirmDelete: () => Promise<void> | void
}>()

const isTeamPasswordSession = computed(() => Boolean(props.session?.teamLogin && props.session.twitchUserId.startsWith('team:')))
const isTeamSession = computed(() => Boolean(props.session?.teamLogin))
const isParticipantSession = computed(() => !isTeamSession.value)
const profileHandle = computed(() => props.session?.teamLogin ?? props.session?.twitchUserId ?? props.twitchUser)
const displayInitial = computed(() => (props.session?.displayName ?? profileHandle.value).charAt(0).toUpperCase())
const showTeamLoginDetail = computed(() => Boolean(props.session?.teamLogin && !isTeamSession.value))
const authStatusLabel = computed(() => {
  if (isTeamPasswordSession.value) return 'Angemeldet mit Team-Login'
  if (isTeamSession.value) return 'Admin-Login über Twitch'
  return 'Angemeldet über Twitch'
})
const authStatusText = computed(() => {
  if (isTeamPasswordSession.value) return 'Diese Session läuft über deinen Team-Login.'
  if (isTeamSession.value) return 'Diese Admin-Session nutzt deinen verknüpften Twitch-Account.'
  return 'Diese Session nutzt deinen Twitch-Account.'
})
const primaryIdentityLabel = computed(() => isTeamSession.value ? 'Team-Login' : 'Twitch-ID')
const logoutLabel = computed(() => !isTeamSession.value ? 'Von Twitch abmelden' : 'Abmelden')
</script>

<template>
  <!-- ── Privacy Modal ─────────────────────────────────────── -->
  <template v-if="props.privacyModalOpen">
    <div
      class="fixed inset-0 z-[400] flex items-center justify-center p-6"
      style="background:rgba(40,24,70,0.52);backdrop-filter:blur(6px);"
      @click="props.onClosePrivacy"
    >
      <div
        class="flex max-h-[88vh] w-full max-w-[680px] flex-col overflow-hidden rounded-3xl bg-white shadow-[0_40px_90px_rgba(40,24,70,0.4)]"
        @click="props.privacyModalStop"
      >
        <div class="flex shrink-0 items-center justify-between gap-4 border-b border-[#f1ecfb] px-8 py-5">
          <div>
            <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-[#8b6cdb]">Rechtliches</p>
            <h2 class="font-['Fredoka'] text-2xl font-bold text-[#3f3556]">Datenschutzerklärung</h2>
          </div>
          <button
            type="button"
            class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-[#f1ecfb] text-[#8b6cdb] transition hover:bg-[#e6dcf6]"
            aria-label="Datenschutz schließen"
            @click="props.onClosePrivacy"
          >
            <X class="h-4 w-4" />
          </button>
        </div>
        <div class="flex-1 overflow-y-auto px-8 py-7 text-sm leading-relaxed text-[#6f6685]">
          <div v-if="props.privacyContentHtml" class="privacy-content" v-html="props.privacyContentHtml" />
          <div v-else class="rounded-2xl border border-[#f1ecfb] bg-[#fcfbff] px-4 py-3 text-sm">
            Datenschutzerklärung wird geladen.
          </div>
        </div>
      </div>
    </div>
  </template>

  <!-- ── Account Modal ─────────────────────────────────────── -->
  <template v-if="props.accountModalOpen">
    <div
      class="fixed inset-0 z-[300] flex items-end justify-center p-4 sm:items-center sm:p-6"
      style="background:rgba(40,24,70,0.52);backdrop-filter:blur(6px);"
      @click="props.onCloseAccount"
    >
      <div
        class="w-full max-w-[480px] overflow-hidden rounded-3xl bg-white shadow-[0_40px_90px_rgba(40,24,70,0.38)]"
        @click="props.accountModalStop"
      >
        <!-- Header -->
        <div class="flex items-center justify-between gap-4 border-b border-[#f1ecfb] bg-gradient-to-br from-[#f7f2ff] to-[#fff7ed] px-7 py-5">
          <div class="flex min-w-0 items-center gap-3.5">
            <div class="grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-gradient-to-br from-[#8b6cdb] to-[#7355c8] text-base font-bold text-white shadow-[0_6px_18px_rgba(124,86,196,0.3)]">
              {{ displayInitial }}
            </div>
            <div class="min-w-0">
              <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-[#8b6cdb]">Mein Profil</p>
              <h2 class="truncate font-['Fredoka'] text-2xl font-bold leading-tight text-[#3f3556]">
                @{{ profileHandle }}
              </h2>
            </div>
          </div>
          <button
            type="button"
            class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-[#f1ecfb] text-[#8b6cdb] transition hover:bg-[#e6dcf6]"
            aria-label="Profil schließen"
            @click="props.onCloseAccount"
          >
            <X class="h-4 w-4" />
          </button>
        </div>

        <!-- Scrollable body -->
        <div class="max-h-[72vh] overflow-y-auto">
          <div class="space-y-3 p-6">

            <!-- Auth status -->
            <div class="grid grid-cols-[auto_1fr] items-start gap-x-3 gap-y-1 rounded-2xl border border-[#ede4fb] bg-[#f6f1fd] px-4 py-3.5">
              <div class="mt-0.5 shrink-0">
                <svg v-if="isTeamPasswordSession" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8b6cdb" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M15 7a4 4 0 1 1-2.8-3.82"/><path d="M13 5 21 13"/><path d="M21 13 18 16"/><path d="M18 13 16 15"/>
                </svg>
                <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="#9146FF" aria-hidden="true">
                  <path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z"/>
                  <path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z"/>
                </svg>
              </div>
              <span class="text-sm font-extrabold text-[#5f44ad]">{{ authStatusLabel }}</span>
              <span class="col-start-2 text-xs leading-relaxed text-[#6f6685]">{{ authStatusText }}</span>
            </div>

            <!-- Saved data -->
            <div class="rounded-2xl border border-[#ede4fb] bg-[#fafafa] px-4 py-3.5">
              <p class="mb-3 text-[10px] font-bold uppercase tracking-[0.2em] text-[#a99fc0]">Gespeicherte Daten</p>
              <div class="space-y-2">
                <div class="flex items-center justify-between text-sm">
                  <span class="text-[#6f6685]">{{ primaryIdentityLabel }}</span>
                  <span class="font-semibold text-[#3f3556]">@{{ profileHandle }}</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                  <span class="text-[#6f6685]">Rolle</span>
                  <span class="text-[10px] font-bold uppercase tracking-[0.1em] text-[#8b6cdb]">{{ props.role }}</span>
                </div>
                <div v-if="showTeamLoginDetail" class="flex items-center justify-between text-sm">
                  <span class="text-[#6f6685]">Team-Login</span>
                  <span class="font-semibold text-[#3f3556]">@{{ props.session?.teamLogin }}</span>
                </div>
                <div v-if="props.session?.boundTwitchUserId" class="flex items-center justify-between text-sm">
                  <span class="text-[#6f6685]">Gebundenes Twitch</span>
                  <span class="font-semibold text-[#3f3556]">@{{ props.session.boundTwitchUserId }}</span>
                </div>
                <template v-if="isParticipantSession">
                  <div class="flex items-center justify-between text-sm">
                    <span class="text-[#6f6685]">Einreichungen</span>
                    <span class="font-semibold text-[#3f3556]">Clips, Votes, Nominierungen</span>
                  </div>
                </template>
                <template v-else>
                  <div class="flex items-start justify-between gap-4 text-sm">
                    <span class="shrink-0 text-[#6f6685]">Accountverwaltung</span>
                    <span class="text-right font-semibold text-[#3f3556]">Team-Accounts werden im Admin-Panel verwaltet.</span>
                  </div>
                </template>
              </div>
            </div>

            <!-- Privacy -->
            <button
              type="button"
              class="flex w-full items-center gap-3 rounded-xl border border-[#ede4fb] bg-[#f9f6ff] px-4 py-3 text-left text-sm font-semibold text-[#6a4fb8] transition hover:bg-[#f1ecfb]"
              @click="props.onOpenPrivacy"
            >
              <Shield class="h-4 w-4 shrink-0" />
              Datenschutzerklärung lesen
            </button>

            <!-- Logout -->
            <button
              type="button"
              class="flex w-full items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-left text-sm font-semibold text-slate-500 transition hover:bg-slate-100"
              @click="props.onLogout"
            >
              <LogOut class="h-4 w-4 shrink-0" />
              {{ logoutLabel }}
            </button>

            <!-- Delete request -->
            <template v-if="isParticipantSession && props.deleteNotConfirm">
              <button
                type="button"
                class="flex w-full items-center gap-3 rounded-xl border border-rose-100 bg-rose-50 px-4 py-3 text-left text-sm font-semibold text-rose-600 transition hover:bg-rose-100"
                @click="props.onRequestDelete"
              >
                <Trash2 class="h-4 w-4 shrink-0" />
                Meine Daten löschen (Löschrecht Art. 17 DSGVO)
              </button>
            </template>

            <!-- Delete confirmation -->
            <template v-if="isParticipantSession && props.deleteConfirm">
              <div class="rounded-2xl border-[1.5px] border-rose-200 bg-rose-50 p-4">
                <p class="text-sm font-semibold text-rose-800">Alle deine Daten werden sofort gelöscht.</p>
                <p class="mt-1 text-xs leading-relaxed text-rose-600">Das umfasst Votes, Nominierungen und Clip-Einreichungen. Diese Aktion kann nicht rückgängig gemacht werden.</p>
                <p v-if="props.accountActionError" class="mt-2 text-xs font-bold text-rose-700">{{ props.accountActionError }}</p>
                <div class="mt-4 flex gap-2">
                  <button
                    :disabled="props.authLoading"
                    type="button"
                    class="flex-1 rounded-xl border border-[#e6dcf6] bg-white py-2.5 text-sm font-semibold text-[#6f6685] transition hover:bg-[#f9f6ff] disabled:opacity-50"
                    @click="props.onCancelDelete"
                  >Abbrechen</button>
                  <button
                    :disabled="props.authLoading"
                    type="button"
                    class="flex-1 rounded-xl bg-rose-600 py-2.5 text-sm font-bold text-white transition hover:bg-rose-700 disabled:opacity-50"
                    @click="props.onConfirmDelete"
                  >{{ props.authLoading ? 'Löscht …' : 'Jetzt löschen' }}</button>
                </div>
              </div>
            </template>

          </div>
        </div>
      </div>
    </div>
  </template>
</template>

<style scoped>
.privacy-content :deep(p) {
  margin: 0 0 14px;
}
.privacy-content :deep(p:last-child),
.privacy-content :deep(ul:last-child),
.privacy-content :deep(ol:last-child) {
  margin-bottom: 0;
}
.privacy-content :deep(ul),
.privacy-content :deep(ol) {
  margin: 0 0 14px 20px;
  padding-left: 16px;
}
.privacy-content :deep(li) {
  margin: 3px 0;
}
</style>
