<script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Link, router } from "@inertiajs/vue3";
import { onMounted, onUnmounted, ref, computed } from "vue";

const props = defineProps({
  package: { type: Object, required: true },
  items: { type: Object, required: true },
  preview: { type: [Object, null], default: null },
});

const refreshing = ref(false);
let timer = null;

const isRunning = computed(() => ["queued", "running"].includes(props.package.status));

// Derive a summary of payload/template/body from the first item on the page.
// Assumption: payload is the same across items in a package (both flows use a common payload).
const firstItem = computed(() => (props.items?.data && props.items.data.length ? props.items.data[0] : null));
const firstPayload = computed(() => (firstItem.value ? firstItem.value.payload_json || {} : {}));
const messageBody = computed(() => {
  const b = firstPayload.value?.body;
  if (typeof b === 'string') {
    const t = b.trim();
    return t.length ? t : null;
  }
  return null;
});
const payloadSummary = computed(() => ({
  profile_id: firstPayload.value?.profile_id ?? null,
  sender_id: firstPayload.value?.sender_id ?? null,
  template_id: firstPayload.value?.template_id ?? null,
  delivery_report: !!firstPayload.value?.delivery_report,
}));

function reload() {
  refreshing.value = true;
  router.reload({
    only: ["package", "items"],
    onFinish: () => (refreshing.value = false),
    preserveScroll: true,
    preserveState: true,
  });
}

function dispatchPkg() {
  router.post(
    route("admin.packages.dispatch", props.package.id),
    {},
    { onSuccess: reload }
  );
}
function cancelPkg() {
  router.post(
    route("admin.packages.cancel", props.package.id),
    {},
    { onSuccess: reload }
  );
}

onMounted(() => {
  if (isRunning.value) {
    timer = setInterval(reload, 3000);
  }
});
onUnmounted(() => {
  if (timer) clearInterval(timer);
});

async function copyText(text) {
  if (!text) return;
  try {
    await navigator.clipboard.writeText(text);
  } catch (e) {
    // Fallback for older browsers
    const ta = document.createElement('textarea');
    ta.value = text;
    ta.style.position = 'fixed';
    ta.style.opacity = '0';
    document.body.appendChild(ta);
    ta.focus();
    ta.select();
    try { document.execCommand('copy'); } catch (_) {}
    document.body.removeChild(ta);
  }
}
</script>

<template>
  <AdminLayout :title="`Paket #${package.id}`">
    <div class="flex items-center justify-between mb-4">
      <div>
        <h2 class="text-base font-semibold text-gray-800">Paket #{{ package.id }}</h2>
        <p class="text-xs text-gray-500">
          UUID: <span class="font-mono">{{ package.uuid }}</span>
        </p>
      </div>
      <div class="flex items-center gap-2">
        <Link
          :href="route('admin.packages.index')"
          class="text-sm text-gray-600 hover:underline"
          >← Nazaj</Link
        >
        <button
          v-if="['draft', 'failed'].includes(package.status)"
          @click="dispatchPkg"
          class="px-3 py-1.5 rounded bg-indigo-600 text-white text-sm"
        >
          Zaženi
        </button>
        <button
          v-if="isRunning"
          @click="cancelPkg"
          class="px-3 py-1.5 rounded bg-rose-600 text-white text-sm"
        >
          Prekliči
        </button>
        <button
          v-if="!isRunning"
          @click="reload"
          class="px-3 py-1.5 rounded border text-sm"
        >
          Osveži
        </button>
      </div>
    </div>

    <div class="grid sm:grid-cols-4 gap-3 mb-4">
      <div class="rounded border bg-white p-3">
        <p class="text-xs text-gray-500">Status</p>
        <p class="text-sm font-semibold mt-1 uppercase">{{ package.status }}</p>
      </div>
      <div class="rounded border bg-white p-3">
        <p class="text-xs text-gray-500">Skupaj</p>
        <p class="text-sm font-semibold mt-1">{{ package.total_items }}</p>
      </div>
      <div class="rounded border bg-white p-3">
        <p class="text-xs text-gray-500">Poslano</p>
        <p class="text-sm font-semibold mt-1 text-emerald-700">
          {{ package.sent_count }}
        </p>
      </div>
      <div class="rounded border bg-white p-3">
        <p class="text-xs text-gray-500">Neuspešno</p>
        <p class="text-sm font-semibold mt-1 text-rose-700">{{ package.failed_count }}</p>
      </div>
    </div>

    <!-- Payload / Message preview -->
    <div class="mb-4 grid gap-3 sm:grid-cols-2">
      <div class="rounded border bg-white p-3">
        <p class="text-xs text-gray-500 mb-2">Sporočilo</p>
        <template v-if="preview && preview.content">
          <div class="text-sm whitespace-pre-wrap text-gray-800">{{ preview.content }}</div>
          <div class="mt-2">
            <button @click="copyText(preview.content)" class="px-2 py-1 rounded border text-xs">Kopiraj</button>
          </div>
          <div v-if="preview.source === 'template' && preview.template" class="mt-2 text-xs text-gray-500">
            Predloga: {{ preview.template.name }} (#{{ preview.template.id }})
          </div>
        </template>
        <template v-else>
          <div v-if="messageBody" class="text-sm whitespace-pre-wrap text-gray-800">
            {{ messageBody }}
          </div>
          <div v-else class="text-sm text-gray-600">
            <template v-if="payloadSummary.template_id">
              Uporabljena bo predloga #{{ payloadSummary.template_id }}.
            </template>
            <template v-else>
              Vsebina sporočila ni določena.
            </template>
          </div>
        </template>
      </div>
      <div class="rounded border bg-white p-3">
        <p class="text-xs text-gray-500 mb-2">Meta / Nastavitve pošiljanja</p>
        <dl class="text-sm text-gray-700 grid grid-cols-3 gap-y-1">
          <dt class="col-span-1 text-gray-500">Profil</dt>
          <dd class="col-span-2">{{ payloadSummary.profile_id ?? '—' }}</dd>
          <dt class="col-span-1 text-gray-500">Pošiljatelj</dt>
          <dd class="col-span-2">{{ payloadSummary.sender_id ?? '—' }}</dd>
          <dt class="col-span-1 text-gray-500">Predloga</dt>
          <dd class="col-span-2">{{ payloadSummary.template_id ?? '—' }}</dd>
          <dt class="col-span-1 text-gray-500">Delivery report</dt>
          <dd class="col-span-2">{{ payloadSummary.delivery_report ? 'da' : 'ne' }}</dd>
        </dl>
        <div v-if="package.meta && (package.meta.source || package.meta.skipped !== undefined)" class="mt-2 text-xs text-gray-500">
          <span v-if="package.meta.source" class="mr-3">Vir: {{ package.meta.source }}</span>
          <span v-if="package.meta.skipped !== undefined">Preskočeno: {{ package.meta.skipped }}</span>
        </div>
      </div>
    </div>

    <div class="overflow-hidden rounded-md border bg-white">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr class="text-xs text-gray-500">
            <th class="px-3 py-2 text-left font-medium">ID</th>
            <th class="px-3 py-2 text-left font-medium">Prejemnik</th>
            <th class="px-3 py-2 text-left font-medium">Sporočilo</th>
            <th class="px-3 py-2 text-left font-medium">Status</th>
            <th class="px-3 py-2 text-left font-medium">Napaka</th>
            <th class="px-3 py-2 text-left font-medium">Provider ID</th>
            <th class="px-3 py-2 text-left font-medium">Cena</th>
            <th class="px-3 py-2 text-left font-medium">Valuta</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-200 text-sm">
          <tr v-for="it in items.data" :key="it.id">
            <td class="px-3 py-2">{{ it.id }}</td>
            <td class="px-3 py-2">
              {{ (it.target_json && it.target_json.number) || "—" }}
            </td>
            <td class="px-3 py-2">
              <div class="flex items-start gap-2">
                <div class="text-xs text-gray-800 max-w-[420px] line-clamp-2 whitespace-pre-wrap">{{ it.rendered_preview || '—' }}</div>
                <button v-if="it.rendered_preview" @click="copyText(it.rendered_preview)" class="px-2 py-0.5 rounded border text-xs">Kopiraj</button>
              </div>
            </td>
            <td class="px-3 py-2">
              <span
                class="inline-flex items-center px-2 py-0.5 rounded text-xs"
                :class="{
                  'bg-yellow-50 text-yellow-700': ['queued', 'processing'].includes(
                    it.status
                  ),
                  'bg-emerald-50 text-emerald-700': it.status === 'sent',
                  'bg-rose-50 text-rose-700': it.status === 'failed',
                  'bg-gray-100 text-gray-600':
                    it.status === 'canceled' || it.status === 'skipped',
                }"
                >{{ it.status }}</span
              >
            </td>
            <td class="px-3 py-2 text-xs text-rose-700">{{ it.last_error ?? "—" }}</td>
            <td class="px-3 py-2 text-xs text-gray-500 font-mono">
              {{ it.provider_message_id ?? "—" }}
            </td>
            <td class="px-3 py-2">{{ it.cost ?? "—" }}</td>
            <td class="px-3 py-2">{{ it.currency ?? "—" }}</td>
          </tr>
          <tr v-if="!items.data?.length">
            <td colspan="8" class="px-3 py-8 text-center text-sm text-gray-500">
              Ni elementov za prikaz.
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="mt-4 flex items-center justify-between text-sm">
      <div class="text-gray-600">
        Prikazano {{ items.from || 0 }}–{{ items.to || 0 }} od {{ items.total || 0 }}
      </div>
      <div class="space-x-2">
        <Link
          :href="items.prev_page_url || '#'"
          :class="[
            'px-3 py-1.5 rounded border',
            items.prev_page_url
              ? 'text-gray-700 hover:bg-gray-50'
              : 'text-gray-400 cursor-not-allowed',
          ]"
          >Nazaj</Link
        >
        <Link
          :href="items.next_page_url || '#'"
          :class="[
            'px-3 py-1.5 rounded border',
            items.next_page_url
              ? 'text-gray-700 hover:bg-gray-50'
              : 'text-gray-400 cursor-not-allowed',
          ]"
          >Naprej</Link
        >
      </div>
    </div>

    <div v-if="refreshing" class="mt-2 text-xs text-gray-500">Osveževanje ...</div>
  </AdminLayout>
</template>
