<script setup lang="ts">
import { ref, watch } from "vue";
import {
  DialogRoot,
  DialogTrigger,
  DialogPortal,
  DialogOverlay,
  DialogContent,
  DialogTitle,
  DialogDescription,
  DialogClose,
} from "radix-vue";
import { Plus, X, Loader2 } from "lucide-vue-next";
import { usePeersStore } from "@/stores/peers";

const peersStore = usePeersStore();

const open = ref(false);
const value = ref("");
const submitting = ref(false);
const error = ref<string | null>(null);

const ENDPOINT_RE = /^(tcp|quic):\/\/.+:\d+$/i;

watch(open, (v) => {
  if (!v) {
    value.value = "";
    error.value = null;
    submitting.value = false;
  }
});

async function submit() {
  const ep = value.value.trim();
  if (!ENDPOINT_RE.test(ep)) {
    error.value = "Format: tcp://host:port or quic://host:port";
    return;
  }
  submitting.value = true;
  error.value = null;
  try {
    await peersStore.add(ep);
    open.value = false;
  } catch (e) {
    error.value = String(e);
  } finally {
    submitting.value = false;
  }
}
</script>

<template>
  <DialogRoot v-model:open="open">
    <DialogTrigger
      class="inline-flex items-center gap-2 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90"
    >
      <Plus class="h-4 w-4" />
      Add peer
    </DialogTrigger>
    <DialogPortal>
      <DialogOverlay
        class="fixed inset-0 z-50 bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out"
      />
      <DialogContent
        class="fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-card p-6 shadow-lg"
      >
        <div class="flex items-start justify-between gap-4">
          <div>
            <DialogTitle class="text-lg font-semibold">
              Add a peer
            </DialogTitle>
            <DialogDescription class="mt-1 text-sm text-muted-foreground">
              Enter a TCP or QUIC endpoint. The daemon will attempt to connect
              and propagate routes from this peer.
            </DialogDescription>
          </div>
          <DialogClose class="text-muted-foreground hover:text-foreground">
            <X class="h-4 w-4" />
          </DialogClose>
        </div>

        <form class="mt-4 space-y-3" @submit.prevent="submit">
          <input
            v-model="value"
            type="text"
            spellcheck="false"
            autocomplete="off"
            placeholder="tcp://188.40.132.242:9651"
            class="w-full rounded-md border border-input bg-background px-3 py-2 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-ring"
            :disabled="submitting"
          />
          <p v-if="error" class="text-xs text-destructive">{{ error }}</p>
          <div class="flex justify-end gap-2 pt-2">
            <DialogClose
              class="rounded-md border border-border px-3 py-1.5 text-sm hover:bg-secondary"
              :disabled="submitting"
            >
              Cancel
            </DialogClose>
            <button
              type="submit"
              class="inline-flex items-center gap-2 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-60"
              :disabled="submitting"
            >
              <Loader2 v-if="submitting" class="h-3 w-3 animate-spin" />
              Add
            </button>
          </div>
        </form>
      </DialogContent>
    </DialogPortal>
  </DialogRoot>
</template>
