<template>
  <AdminLayout title="Predloga">
    <div class="flex flex-col lg:flex-row gap-6 items-start">
      <div class="flex-1 min-w-[320px] space-y-6">
        <div class="bg-white border rounded-lg shadow-sm p-5 flex flex-col gap-4">
          <div class="flex items-start justify-between gap-4">
            <div>
              <h1 class="text-2xl font-semibold tracking-tight">{{ template.name }}</h1>
              <p class="text-xs text-gray-500 mt-1 flex flex-wrap gap-3">
                <span class="inline-flex items-center gap-1"
                  ><span class="text-gray-400">Slug:</span
                  ><span class="font-medium">{{ template.slug }}</span></span
                >
                <span class="inline-flex items-center gap-1"
                  ><span class="text-gray-400">Verzija:</span
                  ><span class="font-medium">v{{ template.version }}</span></span
                >
                <span
                  class="inline-flex items-center gap-1"
                  :class="template.active ? 'text-emerald-600' : 'text-gray-400'"
                >
                  <span
                    class="w-1.5 h-1.5 rounded-full"
                    :class="template.active ? 'bg-emerald-500' : 'bg-gray-300'"
                  />
                  {{ template.active ? "Aktivna" : "Neaktivna" }}
                </span>
              </p>
            </div>
            <form @submit.prevent="toggleActive" class="flex items-center gap-2">
              <button
                type="submit"
                :class="[btnBase, template.active ? btnWarn : btnOutline]"
                :disabled="toggleForm.processing"
              >
                <span v-if="toggleForm.processing">...</span>
                <span v-else>{{ template.active ? "Deaktiviraj" : "Aktiviraj" }}</span>
              </button>
              <Link
                :href="route('admin.document-templates.edit', template.id)"
                :class="[btnBase, btnPrimary]"
                >Uredi</Link
              >
              <Link
                :href="route('admin.document-templates.index')"
                :class="[btnBase, btnOutline]"
                >Nazaj</Link
              >
            </form>
          </div>
          <div class="grid md:grid-cols-3 gap-6 text-xs">
            <div class="space-y-2">
              <h3 class="uppercase font-semibold tracking-wide text-gray-600">
                Datoteka
              </h3>
              <ul class="space-y-1 text-gray-600">
                <li>
                  <span class="text-gray-400">Velikost:</span>
                  <span class="font-medium"
                    >{{ (template.file_size / 1024).toFixed(1) }} KB</span
                  >
                </li>
                <li>
                  <span class="text-gray-400">Hash:</span>
                  <span class="font-mono"
                    >{{ template.file_hash?.substring(0, 12) }}…</span
                  >
                </li>
                <li>
                  <span class="text-gray-400">Engine:</span>
                  <span class="font-medium">{{ template.engine }}</span>
                </li>
              </ul>
              <a
                :href="'/storage/' + template.file_path"
                target="_blank"
                class="text-[11px] inline-flex items-center gap-1 text-indigo-600 hover:underline"
                >Prenesi DOCX →</a
              >
            </div>
            <div class="space-y-2">
              <h3 class="uppercase font-semibold tracking-wide text-gray-600">
                Formatiranje
              </h3>
              <ul class="space-y-1 text-gray-600">
                <li>
                  <span class="text-gray-400">Datum:</span>
                  {{ template.settings?.date_format || "d.m.Y" }}
                </li>
                <li>
                  <span class="text-gray-400">Decimalna mesta:</span>
                  {{ template.settings?.number_decimals ?? "-" }}
                </li>
                <li>
                  <span class="text-gray-400">Separators:</span>
                  {{ template.settings?.decimal_separator || "." }} /
                  {{ template.settings?.thousands_separator || " " }}
                </li>
                <li>
                  <span class="text-gray-400">Valuta:</span>
                  {{ template.settings?.currency_symbol || "€" }} ({{
                    template.settings?.currency_position || "before"
                  }})
                </li>
              </ul>
            </div>
            <div class="space-y-2">
              <h3 class="uppercase font-semibold tracking-wide text-gray-600">
                Aktivnost
              </h3>
              <ul class="space-y-1 text-gray-600">
                <li>
                  <span class="text-gray-400">Akcija:</span>
                  {{ template.action?.name || "-" }}
                </li>
                <li>
                  <span class="text-gray-400">Odločitev:</span>
                  {{ template.decision?.name || "-" }}
                </li>
                <li>
                  <span class="text-gray-400">Fail unresolved:</span>
                  {{ template.settings?.fail_on_unresolved ? "DA" : "NE" }}
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div
          v-if="template.settings?.activity_note_template"
          class="bg-white border rounded-lg shadow-sm p-5 space-y-2 text-xs"
        >
          <h2 class="uppercase font-semibold tracking-wide text-gray-600">
            Predloga opombe aktivnosti
          </h2>
          <pre
            class="bg-gray-50 p-3 rounded border text-[11px] leading-relaxed whitespace-pre-wrap"
            >{{ template.settings.activity_note_template }}</pre
          >
        </div>

        <div
          v-if="template.tokens?.length"
          class="bg-white border rounded-lg shadow-sm p-5"
        >
          <div class="flex items-center justify-between mb-2">
            <h2 class="uppercase font-semibold tracking-wide text-gray-600 text-xs">
              Tokens ({{ template.tokens.length }})
            </h2>
            <button
              type="button"
              @click="expandedTokens = !expandedTokens"
              class="text-[11px] text-indigo-600 hover:underline"
            >
              {{ expandedTokens ? "Skrij" : "Prikaži vse" }}
            </button>
          </div>
          <div
            class="flex flex-wrap gap-1.5 max-h-56 overflow-auto pr-1"
            :class="!expandedTokens && 'max-h-32'"
          >
            <span
              v-for="t in template.tokens"
              :key="t"
              class="px-1.5 py-0.5 bg-gray-100 rounded text-[11px] font-mono"
              >{{ t }}</span
            >
          </div>
        </div>
      </div>

      <aside class="w-full lg:w-72 space-y-6">
        <div class="bg-white border rounded-lg shadow-sm p-4 space-y-3 text-xs">
          <h3 class="uppercase font-semibold tracking-wide text-gray-600">
            Hitra dejanja
          </h3>
          <div class="flex flex-col gap-2">
            <Link
              :href="route('admin.document-templates.edit', template.id)"
              :class="[btnBase, btnPrimary]"
              >Uredi nastavitve</Link
            >
            <form @submit.prevent="toggleActive">
              <button
                type="submit"
                :class="[btnBase, template.active ? btnWarn : btnOutline]"
                :disabled="toggleForm.processing"
              >
                {{ template.active ? "Deaktiviraj" : "Aktiviraj" }}
              </button>
            </form>
            <Link
              :href="route('admin.document-templates.index')"
              :class="[btnBase, btnOutline]"
              >Vse predloge</Link
            >
          </div>
        </div>
        <div
          class="bg-white border rounded-lg shadow-sm p-4 space-y-2 text-[11px] text-gray-600"
        >
          <h3 class="uppercase font-semibold tracking-wide text-gray-600 text-xs">
            Opombe
          </h3>
          <p>
            Uporabi to stran za hiter pregled meta podatkov predloge ter njenih tokenov.
          </p>
        </div>
      </aside>
    </div>
  </AdminLayout>
</template>

<script setup>
import { Link } from "@inertiajs/vue3";
import AdminLayout from "@/Layouts/AdminLayout.vue";
import { useForm } from "@inertiajs/vue3";

// Button style utility classes
const btnBase =
  "inline-flex items-center justify-center gap-1 rounded-md border text-xs font-medium px-3 py-1.5 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed";
const btnPrimary = "bg-indigo-600 border-indigo-600 text-white hover:bg-indigo-500";
const btnOutline = "bg-white text-gray-700 border-gray-300 hover:bg-gray-50";
const btnWarn = "bg-amber-500 border-amber-500 text-white hover:bg-amber-400";

const props = defineProps({
  template: Object,
});

const toggleForm = useForm({});

function toggleActive() {
  toggleForm.post(route("admin.document-templates.toggle", template.id), {
    preserveScroll: true,
  });
}
</script>
