<script setup lang="ts">
import { computed } from 'vue'

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

const props = defineProps<{
  accountOpen: boolean
  privacyOpen: boolean
  deleteConfirm: boolean
  session: AuthSession | null
  privacyContentHtml: string
  privacyEmail: string
  accountActionError: string
  accountActionSuccess: string
  authLoading: boolean
}>()

defineEmits<{
  'close-account': []
  'close-privacy': []
  'open-privacy': []
  'request-delete': []
  'cancel-delete': []
  logout: []
  'bind-team-twitch': []
  'confirm-delete': []
}>()

const twitchUserId = computed(() => props.session?.twitchUserId ?? '')
const role = computed(() => props.session?.role ?? 'viewer')
const isTeamSession = computed(() => Boolean(props.session?.teamLogin))
const canBindTwitch = computed(() => isTeamSession.value && !props.session?.mustChangePassword)
</script>

<template>
  <Teleport to="body">
    <div
      v-if="accountOpen"
      style="position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,24,70,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);"
      @click.self="$emit('close-account')"
    >
      <div style="position:relative;width:100%;max-width:480px;background:#fff;border-radius:24px;box-shadow:0 40px 90px rgba(40,24,70,.4);overflow:hidden;">
        <div style="display:flex;align-items:center;justify-content:space-between;padding:24px 28px 18px;border-bottom:1px solid #f1ecfb;">
          <div>
            <div style="font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8b6cdb;margin-bottom:4px;">Mein Profil</div>
            <h2 style="font-family:'Cormorant Garamond',serif;font-weight:700;font-size:24px;margin:0;color:#3f3556;">@{{ twitchUserId }}</h2>
          </div>
          <button
            style="width:34px;height:34px;border-radius:50%;border:none;background:#f1ecfb;color:#8b6cdb;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;"
            @click="$emit('close-account')"
          >
            ✕
          </button>
        </div>
        <div style="padding:24px 28px;display:flex;flex-direction:column;gap:16px;">
          <div style="display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:14px;background:#f6f1fd;border:1px solid #ede4fb;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="#9146FF">
              <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>
            <span style="font-size:14px;color:#5f44ad;font-weight:500;">Angemeldet über Twitch</span>
          </div>
          <div style="padding:16px;border-radius:14px;background:#fafafa;border:1px solid #f0eafc;">
            <p style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#a99fc0;margin:0 0 10px;">Gespeicherte Daten</p>
            <div style="display:flex;flex-direction:column;gap:7px;">
              <div style="display:flex;justify-content:space-between;font-size:13.5px;">
                <span style="color:#6f6685;">Twitch-ID</span>
                <span style="font-weight:600;color:#3f3556;">@{{ twitchUserId }}</span>
              </div>
              <div style="display:flex;justify-content:space-between;font-size:13.5px;">
                <span style="color:#6f6685;">Rolle</span>
                <span style="font-weight:700;color:#8b6cdb;text-transform:uppercase;font-size:11px;letter-spacing:1px;">{{ role }}</span>
              </div>
              <div v-if="session?.teamLogin" style="display:flex;justify-content:space-between;font-size:13.5px;">
                <span style="color:#6f6685;">Team-Login</span>
                <span style="font-weight:600;color:#3f3556;">@{{ session.teamLogin }}</span>
              </div>
              <div v-if="session?.boundTwitchUserId" style="display:flex;justify-content:space-between;font-size:13.5px;">
                <span style="color:#6f6685;">Gebundenes Twitch</span>
                <span style="font-weight:600;color:#3f3556;">@{{ session.boundTwitchUserId }}</span>
              </div>
              <div style="display:flex;justify-content:space-between;font-size:13.5px;">
                <span style="color:#6f6685;">Einreichungen</span>
                <span style="font-weight:600;color:#3f3556;">Clips, Votes, Nominierungen</span>
              </div>
              <div style="display:flex;justify-content:space-between;font-size:13.5px;">
                <span style="color:#6f6685;">Löschfrist</span>
                <span style="font-weight:600;color:#059669;">März 2027 (auto.)</span>
              </div>
            </div>
          </div>
          <form
            v-if="isTeamSession"
            style="padding:16px;border-radius:14px;background:#f8f5ff;border:1px solid #ede4fb;display:grid;gap:12px;"
            @submit.prevent="$emit('bind-team-twitch')"
          >
            <div>
              <p style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#8b6cdb;margin:0 0 4px;">Twitch verbinden</p>
              <p style="font-size:12.5px;color:#6f6685;margin:0;line-height:1.45;">Verbinde deinen privaten Twitch-Account über den offiziellen Twitch Login. Danach kannst du dich im Admin-Panel per Twitch anmelden.</p>
            </div>
            <div v-if="session?.boundTwitchUserId" style="display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border-radius:12px;background:white;border:1px solid #ede4fb;font-size:13px;">
              <span style="color:#6f6685;">Aktuell verbunden</span>
              <span style="font-weight:800;color:#3f3556;">@{{ session.boundTwitchUserId }}</span>
            </div>
            <p v-if="session?.mustChangePassword" style="font-size:12.5px;color:#b45309;margin:0;font-weight:700;">Bitte ändere zuerst dein temporäres Passwort.</p>
            <p v-if="accountActionError" style="font-size:12.5px;color:#be123c;margin:0;font-weight:700;">{{ accountActionError }}</p>
            <p v-if="accountActionSuccess" style="font-size:12.5px;color:#047857;margin:0;font-weight:700;">{{ accountActionSuccess }}</p>
            <button
              :disabled="authLoading || !canBindTwitch"
              type="submit"
              style="display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-radius:12px;border:none;background:#6f4fd1;color:white;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:800;cursor:pointer;disabled:opacity:.6;"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" 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>
              {{ authLoading ? 'Twitch wird geöffnet...' : session?.boundTwitchUserId ? 'Twitch neu verbinden' : 'Mit Twitch verbinden' }}
            </button>
          </form>
          <button
            style="display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #ede4fb;background:#f9f6ff;color:#6a4fb8;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;width:100%;"
            @click="$emit('open-privacy')"
          >
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
            </svg>
            Datenschutzerklärung lesen
          </button>
          <button
            style="display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #e2e8f0;background:#f8fafc;color:#64748b;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;width:100%;"
            @click="$emit('logout')"
          >
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
              <polyline points="16 17 21 12 16 7" />
              <line x1="21" y1="12" x2="9" y2="12" />
            </svg>
            Abmelden
          </button>
          <template v-if="!deleteConfirm">
            <button
              style="display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #fecdd3;background:#fff5f5;color:#e11d48;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;width:100%;"
              @click="$emit('request-delete')"
            >
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="3 6 5 6 21 6" />
                <path d="M19 6l-1 14H6L5 6" />
                <path d="M10 11v6M14 11v6" />
              </svg>
              Meine Daten löschen (Löschrecht Art. 17 DSGVO)
            </button>
          </template>
          <template v-else>
            <div style="padding:16px;border-radius:14px;background:#fff5f5;border:1.5px solid #fecdd3;">
              <p style="font-size:13.5px;color:#9f1239;font-weight:600;margin:0 0 6px;">Alle deine Daten werden sofort gelöscht.</p>
              <p style="font-size:12.5px;color:#e11d48;margin:0 0 14px;line-height:1.5;">Das umfasst deine Votes, Nominierungen und Clip-Einreichungen. Diese Aktion kann nicht rückgängig gemacht werden.</p>
              <p v-if="accountActionError" style="font-size:12.5px;color:#be123c;margin:0 0 12px;line-height:1.5;font-weight:600;">{{ accountActionError }}</p>
              <div style="display:flex;gap:8px;">
                <button :disabled="authLoading" style="flex:1;padding:10px;border-radius:10px;border:1px solid #e6dcf6;background:white;color:#6f6685;font-family:'Outfit',sans-serif;font-weight:600;font-size:13px;cursor:pointer;" @click="$emit('cancel-delete')">Abbrechen</button>
                <button :disabled="authLoading" style="flex:1;padding:10px;border-radius:10px;border:none;background:#e11d48;color:white;font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;cursor:pointer;" @click="$emit('confirm-delete')">
                  {{ authLoading ? 'Löscht …' : 'Jetzt löschen' }}
                </button>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </Teleport>

  <Teleport to="body">
    <div
      v-if="privacyOpen"
      style="position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,24,70,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);"
      @click.self="$emit('close-privacy')"
    >
      <div style="position:relative;width:100%;max-width:680px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;background:#fff;border-radius:24px;box-shadow:0 40px 90px rgba(40,24,70,.4);">
        <div style="display:flex;align-items:center;justify-content:space-between;padding:24px 32px 18px;border-bottom:1px solid #f1ecfb;flex:none;">
          <div>
            <div style="font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8b6cdb;margin-bottom:4px;">Rechtliches</div>
            <h2 style="font-family:'Cormorant Garamond',serif;font-weight:700;font-size:26px;margin:0;color:#3f3556;">Datenschutzerklärung</h2>
          </div>
          <button style="width:34px;height:34px;border-radius:50%;border:none;background:#f1ecfb;color:#8b6cdb;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;" @click="$emit('close-privacy')">✕</button>
        </div>
        <div style="overflow-y:auto;padding:28px 32px;flex:1;font-family:'Outfit',sans-serif;font-size:14px;line-height:1.65;color:#6f6685;">
          <template v-if="privacyContentHtml">
            <div class="app-shell-privacy-content" v-html="privacyContentHtml" />
          </template>
          <template v-else>
            <div style="background:#f9f6ff;border:1px solid #ede4fb;border-radius:14px;padding:16px;">
              <h3 style="font-size:15px;font-weight:700;color:#3f3556;margin:0 0 8px;">Datenschutztext wird geladen</h3>
              <p style="margin:0;">Die Datenschutzerklärung wird aus der Landingpage-Konfiguration geladen.</p>
            </div>
          </template>
          <p v-if="privacyEmail" style="font-size:12px;color:#a99fc0;margin:18px 0 0;">Kontakt: {{ privacyEmail }}</p>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<style scoped>
.app-shell-privacy-content :deep(p) {
  margin: 0 0 14px;
}

.app-shell-privacy-content :deep(p:last-child),
.app-shell-privacy-content :deep(ul:last-child),
.app-shell-privacy-content :deep(ol:last-child) {
  margin-bottom: 0;
}

.app-shell-privacy-content :deep(ul),
.app-shell-privacy-content :deep(ol) {
  margin: 0 0 14px 20px;
  padding-left: 16px;
}

.app-shell-privacy-content :deep(li) {
  margin: 3px 0;
}
</style>
