<script setup lang="ts">
import { computed, ref } from "vue";
import { Send, Loader2 } from "lucide-vue-next";
import { useMessagesStore } from "@/stores/messages";
import { utf8ToBase64 } from "@/lib/utils";
import type { MessageDestination } from "@/lib/api";

const messages = useMessagesStore();

const destKind = ref<"ip" | "pk">("ip");
const destValue = ref("");
const topic = ref("");
const payload = ref("");
const submitting = ref(false);
const result = ref<{ kind: "ok" | "err"; text: string } | null>(null);

const canSubmit = computed(
  () =>
    destValue.value.trim().length > 0 &&
    payload.value.length > 0 &&
    !submitting.value,
);

async function submit() {
  result.value = null;
  if (!canSubmit.value) return;
  submitting.value = true;
  try {
    const dest: MessageDestination =
      destKind.value === "ip"
        ? { ip: destValue.value.trim() }
        : { pk: destValue.value.trim() };
    const topicB64 = topic.value ? utf8ToBase64(topic.value) : "";
    const payloadB64 = utf8ToBase64(payload.value);
    const receipt = await messages.send(dest, topicB64, payloadB64);
    result.value = { kind: "ok", text: `Sent — id ${receipt.id}` };
    payload.value = "";
  } catch (e) {
    result.value = { kind: "err", text: String(e) };
  } finally {
    submitting.value = false;
  }
}
</script>

<template>
  <form class="space-y-3 rounded-lg border border-border bg-card p-4" @submit.prevent="submit">
    <div class="flex flex-col gap-1">
      <label class="text-xs uppercase tracking-wide text-muted-foreground">
        Destination
      </label>
      <div class="flex gap-2">
        <select
          v-model="destKind"
          class="rounded-md border border-input bg-background px-2 py-1.5 text-sm"
        >
          <option value="ip">IP</option>
          <option value="pk">Public key</option>
        </select>
        <input
          v-model="destValue"
          type="text"
          spellcheck="false"
          class="flex-1 rounded-md border border-input bg-background px-3 py-1.5 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-ring"
          :placeholder="destKind === 'ip' ? '503:5478:df06:d79a::1' : 'hex public key'"
        />
      </div>
    </div>

    <div class="flex flex-col gap-1">
      <label class="text-xs uppercase tracking-wide text-muted-foreground">
        Topic (optional, plain text — encoded as base64)
      </label>
      <input
        v-model="topic"
        type="text"
        spellcheck="false"
        class="rounded-md border border-input bg-background px-3 py-1.5 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-ring"
        placeholder="my-topic"
      />
    </div>

    <div class="flex flex-col gap-1">
      <label class="text-xs uppercase tracking-wide text-muted-foreground">
        Payload (UTF-8 — encoded as base64)
      </label>
      <textarea
        v-model="payload"
        rows="4"
        class="resize-y rounded-md border border-input bg-background px-3 py-1.5 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-ring"
        placeholder="Hello, mycelium!"
      />
    </div>

    <div class="flex items-center justify-between">
      <p
        v-if="result"
        class="text-xs"
        :class="result.kind === 'ok' ? 'text-emerald-500' : 'text-destructive'"
      >
        {{ result.text }}
      </p>
      <span v-else />
      <button
        type="submit"
        class="inline-flex items-center gap-2 rounded-md bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
        :disabled="!canSubmit"
      >
        <Loader2 v-if="submitting" class="h-3.5 w-3.5 animate-spin" />
        <Send v-else class="h-3.5 w-3.5" />
        Send
      </button>
    </div>
  </form>
</template>
