<template>
  <div
    class="relative overflow-hidden rounded-2xl bg-amber-50 dark:bg-amber-900/20 border border-amber-100 dark:border-amber-800 p-5"
  >
    <div class="flex items-start gap-4">
      <div
        class="shrink-0 w-12 h-12 rounded-xl bg-amber-100 dark:bg-amber-800/50 flex items-center justify-center"
      >
        <UIcon
          name="i-heroicons-exclamation-triangle"
          class="w-6 h-6 text-amber-600 dark:text-amber-400"
        />
      </div>

      <div class="flex-1 min-w-0">
        <h3 class="text-base font-bold text-gray-900 dark:text-white">
          Dieses iPhone ist nicht erkennbar
        </h3>
        <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">
          Mit keinem ReBreak-Konto verbunden.
        </p>

        <div class="mt-3 text-sm text-gray-700 dark:text-gray-200 space-y-1">
          <p><span class="font-medium">Modell:</span> {{ displayModel(iphone.productType) }}</p>
          <p><span class="font-medium">iOS:</span> {{ iphone.productVersion }}</p>
          <p class="truncate"><span class="font-medium">UDID:</span> {{ iphone.udid }}</p>
        </div>

        <div class="mt-4 text-sm text-gray-600 dark:text-gray-300 bg-white/60 dark:bg-black/20 rounded-lg p-3">
          <p class="font-medium mb-1">So kannst du es verwalten:</p>
          <ol class="list-decimal list-inside space-y-0.5">
            <li>ReBreak-App auf diesem Gerät installieren</li>
            <li>Mit deinem Konto anmelden</li>
            <li>Das Gerät in der App registrieren</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { IphoneDeviceState } from "~/composables/useTauri";

const props = defineProps<{
  iphone: IphoneDeviceState;
}>();

const productTypeMap: Record<string, string> = {
  "iPhone18,4": "iPhone Air",
  "iPhone17,1": "iPhone 16 Pro",
  "iPhone17,2": "iPhone 16 Pro Max",
  "iPhone17,3": "iPhone 16",
  "iPhone17,4": "iPhone 16 Plus",
  "iPhone16,1": "iPhone 15 Pro",
  "iPhone16,2": "iPhone 15 Pro Max",
  "iPhone15,4": "iPhone 15",
  "iPhone15,5": "iPhone 15 Plus",
};

function displayModel(productType: string): string {
  return productTypeMap[productType] ?? productType;
}
</script>
