<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">Pre-Flight Check</h1>
        <p class="text-gray-600 mt-2">
          Bevor wir dein iPhone supervisieren, müssen ein paar Apple-Sicherheitschecks erledigt sein.
        </p>
      </div>

      <UCard>
        <div class="space-y-3">
          <PreflightItem
            v-model="checks.fmi"
            title="Find My iPhone deaktiviert"
            detail="Settings → [Apple-ID] → Wo ist? → Mein iPhone suchen → AUS. Ohne das blockiert Apple das Supervisieren."
            :auto="iphone?.findMyEnabled === false"
          />
          <PreflightItem
            v-model="checks.sdp"
            title="Stolen Device Protection ausgeschaltet"
            detail="Settings → Face ID & Code → Schutz für gestohlene Geräte → AUS. SDP zwingt FMI an."
          />
          <PreflightItem
            v-model="checks.appleId"
            title="Apple-ID-Passwort griffbereit"
            detail="Apple fragt evtl. dein Apple-ID-PW während des FMI-Toggles ab."
          />
          <PreflightItem
            v-model="checks.appInstalled"
            title="ReBreak-App ist auf dem iPhone installiert"
            detail="Über TestFlight. Erst danach kann der Wizard die App in den Managed-State versetzen."
            :auto="hasReBreakApp"
          />
        </div>
      </UCard>

      <div class="flex justify-between">
        <UButton to="/detect" variant="ghost" color="neutral">
          Zurück
        </UButton>
        <UButton
          to="/supervise"
          variant="solid"
          color="primary"
          :disabled="!allChecked"
        >
          Supervisieren starten →
        </UButton>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useIphoneDevice } from "~/composables/useMagicState";
import PreflightItem from "~/components/PreflightItem.vue";

const iphone = useIphoneDevice();

const checks = ref({
  fmi: false,
  sdp: false,
  appleId: false,
  appInstalled: false,
});

const hasReBreakApp = computed(() =>
  iphone.value?.installedAppBundleIDs?.includes("org.rebreak.app") ?? false,
);

const allChecked = computed(() =>
  (checks.value.fmi || iphone.value?.findMyEnabled === false) &&
  checks.value.sdp &&
  checks.value.appleId &&
  (checks.value.appInstalled || hasReBreakApp.value),
);
</script>
