<template>
  <div class="min-h-screen flex flex-col items-center justify-center bg-gray-50 p-6">
    <div class="max-w-md w-full space-y-6">
      <div class="text-center">
        <h1 class="text-2xl font-bold text-gray-900">Schutz aktivieren</h1>
        <p class="text-gray-600 mt-2">
          Aktiviere den ReBreak-DNS-Schutz auf diesem Computer.
        </p>
      </div>

      <UCard>
        <div class="space-y-4">
          <div class="text-sm text-gray-600">
            <p v-if="platform === 'MacOS'">
              Das Schutz-Profil wird in den Systemeinstellungen geöffnet. Bestätige die Installation mit deinem Admin-Passwort.
            </p>
            <p v-else-if="platform === 'Windows'">
              Der DoH-Schutz wird auf System-Ebene konfiguriert. Administratorrechte erforderlich.
            </p>
            <p v-else>
              Plattform nicht erkannt.
            </p>
          </div>

          <UButton
            color="primary"
            block
            size="lg"
            :loading="activating"
            :disabled="!canActivate"
            @click="activate"
          >
            Schutz aktivieren
          </UButton>

          <p v-if="result" class="text-sm text-center" :class="result.success ? 'text-green-600' : 'text-red-600'">
            {{ result.success ? '✅ ' + result.message : '❌ ' + result.message }}
          </p>
        </div>
      </UCard>

      <div class="flex justify-between">
        <UButton to="/status" variant="ghost" color="neutral">
          Zurück
        </UButton>
        <UButton to="/status" variant="solid" color="primary">
          Weiter
        </UButton>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useTauri, type PlatformInfo } from "~/composables/useTauri";
import { useMagicSession } from "~/composables/useMagicState";

const { getPlatform, activateProtection, downloadProfile, setDesktopProtectionStatus } = useTauri();
const session = useMagicSession();

const platform = ref<string>("");
const activating = ref(false);
const canActivate = ref(false);
const result = ref<{ success: boolean; message: string } | null>(null);

onMounted(async () => {
  const info: PlatformInfo = await getPlatform();
  platform.value = info.platform;
  canActivate.value = info.platform === "MacOS" || info.platform === "Windows";
});

async function activate() {
  if (!session.value?.profileUrl) {
    result.value = { success: false, message: "Kein Profil verfügbar. Bitte zuerst koppeln." };
    return;
  }

  activating.value = true;
  result.value = null;

  try {
    let path: string;
    if (platform.value === "MacOS") {
      path = await downloadProfile(session.value.profileUrl);
    } else {
      path = session.value.dnsToken;
    }

    await activateProtection(path);
    try {
      await setDesktopProtectionStatus(true, platform.value);
    } catch (e: any) {
      console.warn("Could not persist desktop protection status:", e);
    }
    result.value = {
      success: true,
      message: platform.value === "MacOS"
        ? "Systemeinstellungen geöffnet. Bitte Profil manuell installieren."
        : "DoH-Schutz aktiviert.",
    };
  } catch (e: any) {
    result.value = { success: false, message: e?.message ?? "Aktivierung fehlgeschlagen" };
  } finally {
    activating.value = false;
  }
}
</script>
