<template>
  <div
    class="relative overflow-hidden rounded-2xl bg-white dark:bg-gray-900 shadow-lg ring-1 ring-gray-100 dark:ring-gray-800 p-6"
  >
    <div class="flex items-start gap-5">
      <div
        class="shrink-0 w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-800 dark:to-gray-700 flex items-center justify-center"
      >
        <UIcon
          :name="deviceIcon"
          class="w-8 h-8 text-[var(--rebreak-primary)]"
        />
      </div>

      <div class="flex-1 min-w-0">
        <div class="flex items-start justify-between gap-3">
          <div>
            <h2 class="text-xl font-extrabold text-gray-900 dark:text-white truncate">
              {{ deviceName }}
            </h2>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
              {{ platformLabel }}
              <span v-if="device.osVersion">· {{ device.osVersion }}</span>
            </p>
          </div>

          <div class="shrink-0 flex flex-col items-end gap-1">
            <UBadge
              :color="statusColor"
              :variant="statusVariant"
              size="sm"
              class="font-bold"
            >
              {{ statusLabel }}
            </UBadge>
            <CooldownCountdown
              v-if="device.status === 'cooldown' && device.cooldownUntil"
              :until="device.cooldownUntil"
            />
          </div>
        </div>

        <div
          v-if="showIosStars && iosStars"
          class="mt-4 flex items-center gap-3"
        >
          <IosStarRating
            :enrollment="iosStars.enrollment"
            :sideload="iosStars.sideload"
            :app="iosStars.app"
          />
          <span class="text-xs text-gray-500 dark:text-gray-400">
            Enrollment · Sideload · App
          </span>
        </div>

        <div class="mt-5 flex items-center gap-3">
          <UButton
            v-if="isCurrent && device.status === 'unprotected'"
            color="primary"
            variant="solid"
            size="sm"
            icon="i-heroicons-shield-check"
            @click="emit('toggle-protection', device)"
          >
            Protect this device
          </UButton>

          <UButton
            color="neutral"
            variant="ghost"
            size="sm"
            trailing-icon="i-heroicons-chevron-right"
            @click="emit('open', device)"
          >
            Details
          </UButton>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ComputedDevice, DeviceStatus } from "~/composables/useDeviceStatus";

const props = defineProps<{
  device: ComputedDevice;
  isCurrent: boolean;
  iosStars?: {
    enrollment: boolean;
    sideload: boolean;
    app: boolean;
  } | null;
}>();

const emit = defineEmits<{
  (e: "open", device: ComputedDevice): void;
  (e: "toggle-protection", device: ComputedDevice): void;
}>();

const deviceName = computed(() => {
  if (props.device.name) return props.device.name;
  return props.device.platform === "ios" ? "iPhone" : "This Mac";
});

const deviceIcon = computed(() => {
  if (props.device.platform === "ios" || props.device.platform === "android") {
    return "i-heroicons-device-phone-mobile";
  }
  return "i-heroicons-computer-desktop";
});

const platformLabel = computed(() => {
  const labels: Record<ComputedDevice["platform"], string> = {
    mac: "macOS",
    windows: "Windows",
    ios: "iOS",
    android: "Android",
    unknown: "Unknown",
  };
  return labels[props.device.platform];
});

const showIosStars = computed(() => props.isCurrent && props.device.platform === "ios");

const statusConfig: Record<
  DeviceStatus,
  { label: string; color: "success" | "warning" | "error" | "neutral"; variant: "subtle" | "outline" }
> = {
  active: { label: "Active", color: "success", variant: "subtle" },
  cooldown: { label: "Cooldown", color: "warning", variant: "subtle" },
  revoked: { label: "Revoked", color: "error", variant: "subtle" },
  pending: { label: "Pending", color: "neutral", variant: "subtle" },
  unprotected: { label: "Unprotected", color: "neutral", variant: "outline" },
};

const statusLabel = computed(() => statusConfig[props.device.status].label);
const statusColor = computed(() => statusConfig[props.device.status].color);
const statusVariant = computed(() => statusConfig[props.device.status].variant);
</script>
