<script setup lang="ts">
import { Loader2, LockKeyhole, Save, Settings } from '@lucide/vue'
import { ref } from 'vue'

import type { AdminOperationalSettingsForm } from './adminSettingsTypes'
import Button from '../ui/Button.vue'
import Modal from '../ui/Modal.vue'
import PasswordField from '../ui/PasswordField.vue'

defineProps<{
  form: AdminOperationalSettingsForm
  saving: boolean
  canManage: boolean
  twitchClientSecret: string
  twitchSecretHint: string
  twitchClientSecretSet: boolean
  twitchAuthConfigured: boolean
  twitchAuthManagedByDatabase: boolean
  twitchAuthComplete: boolean
}>()

const emit = defineEmits<{
  save: []
  'update:twitchClientSecret': [value: string]
}>()

const twitchModalOpen = ref(false)

function defaultRedirectUri() {
  if (typeof window === 'undefined') {
    return 'https://deine-domain.de/api/auth/twitch/callback'
  }

  return `${window.location.origin.replace(/:\d+$/, ':5084')}/api/auth/twitch/callback`
}
</script>

<template>
  <section class="rounded-[26px] border border-violet-100 bg-white/85 p-5 shadow-[0_18px_46px_rgba(168,145,214,0.08)]">
    <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
      <div class="flex gap-3">
        <div class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-violet-100 text-violet-700">
          <Settings class="h-5 w-5" />
        </div>
        <div>
          <p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">Twitch OAuth</p>
          <h3 class="mt-1 text-xl font-bold text-slate-900">Offiziellen Twitch Login konfigurieren</h3>
          <p class="mt-1 text-sm leading-6 text-slate-500">
            Einmal mit Client-ID, Client Secret und Redirect URI verbinden. Danach verwenden Login und Account-Verknüpfung den offiziellen Twitch-Flow.
          </p>
          <div class="mt-3 flex flex-wrap gap-2 text-xs font-semibold">
            <span class="rounded-full px-3 py-1" :class="twitchAuthConfigured ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700'">
              {{ twitchAuthConfigured ? 'OAuth bereit' : 'OAuth fehlt' }}
            </span>
            <span class="rounded-full bg-violet-50 px-3 py-1 text-violet-700">
              {{ twitchAuthManagedByDatabase ? 'Quelle: Datenbank' : 'Quelle: Config' }}
            </span>
            <span class="rounded-full px-3 py-1" :class="twitchClientSecretSet ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700'">
              {{ twitchClientSecretSet ? 'Secret vorhanden' : 'Secret fehlt' }}
            </span>
          </div>
        </div>
      </div>

      <Button
        type="button"
        variant="secondary"
        class="gap-2 rounded-2xl px-5"
        :disabled="saving || !canManage"
        @click="twitchModalOpen = true"
      >
        <LockKeyhole v-if="!canManage" class="h-4 w-4" />
        <Settings v-else class="h-4 w-4" />
        {{ !canManage ? 'Nur Owner' : 'Twitch konfigurieren' }}
      </Button>
    </div>
  </section>

  <Modal
    :open="twitchModalOpen"
    title="Twitch OAuth"
    subtitle="Client-Daten aus der Twitch Developer Console. Das Secret wird gespeichert, aber nie wieder angezeigt."
    @close="twitchModalOpen = false"
  >
    <div class="space-y-5">
      <div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm leading-6 text-violet-900">
        In Twitch muss dieselbe Redirect URI eingetragen sein, die hier gespeichert ist. Ohne eigene Redirect URI nutzt das Backend automatisch den Callback deiner API.
      </div>

      <label class="block">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Client-ID</span>
        <input
          v-model="form.twitchClientId"
          :disabled="saving || !canManage"
          type="text"
          autocomplete="off"
          placeholder="Twitch Client-ID"
          class="mt-2 h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm font-semibold text-slate-800 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100 disabled:bg-slate-50 disabled:text-slate-400"
        />
      </label>

      <label class="block">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Client Secret</span>
        <PasswordField
          :model-value="twitchClientSecret"
          :disabled="saving || !canManage"
          autocomplete="new-password"
          placeholder="Leer lassen = behalten"
          root-class="mt-2"
          input-class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm font-semibold text-slate-800 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100 disabled:bg-slate-50 disabled:text-slate-400"
          @update:model-value="emit('update:twitchClientSecret', $event)"
        />
        <span class="mt-2 block text-xs leading-5 text-slate-500">{{ twitchSecretHint }}</span>
      </label>

      <label class="block">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Redirect URI</span>
        <input
          v-model="form.twitchRedirectUri"
          :disabled="saving || !canManage"
          type="url"
          autocomplete="off"
          :placeholder="defaultRedirectUri()"
          class="mt-2 h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm font-semibold text-slate-800 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100 disabled:bg-slate-50 disabled:text-slate-400"
        />
        <span class="mt-2 block text-xs leading-5 text-slate-500">Muss exakt in deiner Twitch-App unter OAuth Redirect URLs eingetragen sein.</span>
      </label>

      <label class="block">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Scopes</span>
        <input
          v-model="form.twitchScope"
          :disabled="saving || !canManage"
          type="text"
          autocomplete="off"
          placeholder="Optional, z.B. user:read:email"
          class="mt-2 h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm font-semibold text-slate-800 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100 disabled:bg-slate-50 disabled:text-slate-400"
        />
        <span class="mt-2 block text-xs leading-5 text-slate-500">Für reines Login/Profil bleibt das Feld normalerweise leer.</span>
      </label>

      <p
        v-if="form.twitchClientId && !twitchAuthComplete"
        class="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-semibold text-amber-800"
      >
        Zum Aktivieren fehlt noch ein Client Secret.
      </p>
    </div>

    <template #footer>
      <Button type="button" variant="ghost" :disabled="saving" @click="twitchModalOpen = false">Schließen</Button>
      <Button type="button" class="gap-2" :disabled="saving || !canManage" @click="emit('save')">
        <Loader2 v-if="saving" class="h-4 w-4 animate-spin" />
        <Save v-else class="h-4 w-4" />
        {{ saving ? 'Speichert ...' : 'Twitch speichern' }}
      </Button>
    </template>
  </Modal>
</template>
