<script setup lang="ts">
import { Loader2, ShieldAlert, Power } from "lucide-vue-next";
import type { Phase } from "@/stores/node";

defineProps<{
  phase: Exclude<Phase, "ready">;
  error?: string | null;
}>();

defineEmits<{
  (e: "start"): void;
  (e: "retry"): void;
}>();
</script>

<template>
  <div
    class="absolute inset-0 z-50 flex items-center justify-center bg-background/95 backdrop-blur-sm"
  >
    <div class="w-full max-w-md rounded-lg border border-border bg-card p-8 shadow-lg">
      <template v-if="phase === 'starting'">
        <div class="flex flex-col items-center gap-4 text-center">
          <Loader2 class="h-10 w-10 animate-spin text-primary" />
          <div>
            <h2 class="text-lg font-semibold">Starting Mycelium daemon…</h2>
            <p class="mt-1 text-sm text-muted-foreground">
              Authenticate in the polkit dialog to allow the daemon to create
              the TUN interface.
            </p>
          </div>
        </div>
      </template>

      <template v-else-if="phase === 'idle'">
        <div class="flex flex-col items-center gap-4 text-center">
          <Power class="h-10 w-10 text-primary" />
          <div>
            <h2 class="text-lg font-semibold">Daemon is offline</h2>
            <p class="mt-1 text-sm text-muted-foreground">
              Click below to start the Mycelium daemon. Root privileges are
              required to create the TUN interface.
            </p>
          </div>
          <button
            class="rounded-md bg-primary px-6 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"
            @click="$emit('start')"
          >
            Start daemon
          </button>
        </div>
      </template>

      <template v-else-if="phase === 'error'">
        <div class="flex flex-col items-center gap-4 text-center">
          <ShieldAlert class="h-10 w-10 text-destructive" />
          <div>
            <h2 class="text-lg font-semibold">Daemon failed to start</h2>
            <p
              class="mt-2 max-h-32 overflow-auto rounded bg-muted p-2 text-left font-mono text-xs"
            >
              {{ error || "unknown error" }}
            </p>
          </div>
          <button
            class="rounded-md bg-primary px-6 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"
            @click="$emit('retry')"
          >
            Try again
          </button>
        </div>
      </template>
    </div>
  </div>
</template>
