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

const props = defineProps({
  templates: Array,
});

// Group by slug => versions desc
const grouped = computed(() => {
  const map = {};
  props.templates.forEach((t) => {
    if (!map[t.slug]) map[t.slug] = [];
    map[t.slug].push(t);
  });
  Object.values(map).forEach((arr) => arr.sort((a, b) => b.version - a.version));
  return map;
});

// Inertia form for uploading new template version
const form = useForm({
  name: "Povzetek pogodbe",
  slug: "contract-summary",
  file: null,
});

function handleFile(e) {
  form.file = e.target.files[0];
}

function submit() {
  if (!form.file) {
    return;
  }
  form.post(route("admin.document-templates.store"), {
    forceFormData: true,
    onSuccess: () => {
      form.reset("file");
      // clear input value manually (optional)
      const fileInput = document.getElementById("template-file-input");
      if (fileInput) fileInput.value = "";
    },
  });
}

// Per-template settings forms (useForm instances) for optimistic updates
const settingsForms = reactive({});
const settingsSaved = reactive({});
props.templates.forEach(t => {
  if (!settingsForms[t.id]) {
    settingsForms[t.id] = useForm({
      output_filename_pattern: t.output_filename_pattern || '',
      date_format: t.date_format || '',
      fail_on_unresolved: t.fail_on_unresolved ? 1 : 0,
      number_decimals: t.formatting_options?.number_decimals ?? 2,
      decimal_separator: t.formatting_options?.decimal_separator ?? ',',
      thousands_separator: t.formatting_options?.thousands_separator ?? '.',
      currency_symbol: t.formatting_options?.currency_symbol ?? '€',
      currency_position: t.formatting_options?.currency_position ?? 'after',
      currency_space: t.formatting_options?.currency_space ? 1 : 0,
      default_date_format: t.formatting_options?.default_date_format || '',
    });
  }
});

// Watch for newly added templates (e.g. after uploading a new version) and lazily initialize missing settings forms
watch(
  () => props.templates,
  (list) => {
    list.forEach((t) => {
      if (!settingsForms[t.id]) {
        settingsForms[t.id] = useForm({
          output_filename_pattern: t.output_filename_pattern || '',
          date_format: t.date_format || '',
          fail_on_unresolved: t.fail_on_unresolved ? 1 : 0,
          number_decimals: t.formatting_options?.number_decimals ?? 2,
          decimal_separator: t.formatting_options?.decimal_separator ?? ',',
            thousands_separator: t.formatting_options?.thousands_separator ?? '.',
          currency_symbol: t.formatting_options?.currency_symbol ?? '€',
          currency_position: t.formatting_options?.currency_position ?? 'after',
          currency_space: t.formatting_options?.currency_space ? 1 : 0,
          default_date_format: t.formatting_options?.default_date_format || '',
        });
      }
    });
  },
  { deep: true }
);

function submitSettings(id) {
  const f = settingsForms[id];
  f.put(route('admin.document-templates.settings.update', id), {
    preserveScroll: true,
    onSuccess: () => {
      settingsSaved[id] = true;
      setTimeout(() => { settingsSaved[id] = false; }, 2000);
    },
  });
}
</script>

<template>
  <AdminLayout title="Dokumentne predloge">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
      <div>
        <h1 class="text-2xl font-semibold mb-1">Dokumentne predloge</h1>
        <p class="text-sm text-gray-500">
          Upravljanje verzij DOCX predlog za generiranje dokumentov.
        </p>
      </div>
      <form
        @submit.prevent="submit"
        class="flex items-center gap-3 text-sm bg-white p-2 rounded border"
      >
        <input type="text" v-model="form.name" class="hidden" />
        <input type="text" v-model="form.slug" class="hidden" />
        <input
          id="template-file-input"
          type="file"
          required
          accept=".docx"
          class="text-xs"
          @change="handleFile"
        />
        <button
          type="submit"
          :disabled="form.processing || !form.file"
          class="px-3 py-1.5 rounded bg-emerald-600 text-white disabled:opacity-50"
        >
          Nova verzija
        </button>
        <div v-if="form.progress" class="w-28 h-1 bg-gray-200 rounded overflow-hidden">
          <div
            class="h-full bg-emerald-500 transition-all"
            :style="{ width: form.progress.percentage + '%' }"
          ></div>
        </div>
        <div v-if="form.errors.file" class="text-xs text-rose-600">
          {{ form.errors.file }}
        </div>
      </form>
    </div>

    <div class="space-y-6">
      <div
        v-for="(versions, slug) in grouped"
        :key="slug"
        class="bg-white border rounded"
      >
        <div class="px-4 py-3 border-b flex items-center justify-between">
          <div class="font-medium">
            {{ versions[0].name }} <span class="text-xs text-gray-500">({{ slug }})</span>
          </div>
          <div class="flex items-center gap-2">
            <form
              v-if="versions[0]"
              method="post"
              :action="route('admin.document-templates.toggle', versions[0].id)"
            >
              <input type="hidden" name="_method" value="POST" />
              <button
                class="px-2 py-1 rounded text-xs"
                :class="
                  versions[0].active
                    ? 'bg-amber-500 text-white'
                    : 'bg-gray-200 text-gray-700'
                "
              >
                {{ versions[0].active ? "Deaktiviraj" : "Aktiviraj" }}
              </button>
            </form>
          </div>
        </div>
        <div class="divide-y">
          <div
            v-for="v in versions"
            :key="v.id"
            class="px-4 py-3 text-sm flex items-center justify-between"
          >
            <div class="flex flex-col">
              <span
                >Verzija v{{ v.version }}
                <span
                  v-if="v.id === versions[0].id"
                  class="text-emerald-600 text-xs font-semibold"
                  >zadnja</span
                ></span
              >
              <span class="text-xs text-gray-500"
                >Hash: {{ v.file_hash?.substring(0, 10) }}… | Velikost:
                {{ (v.file_size / 1024).toFixed(1) }} KB</span
              >
              <a
                class="text-xs text-indigo-600 hover:underline"
                :href="'/storage/' + v.file_path"
                target="_blank"
                >Prenesi</a
              >
              <div v-if="v.id === versions[0].id" class="mt-3 pt-3 border-t space-y-2">
                <form @submit.prevent="submitSettings(v.id)" class="grid gap-2 md:grid-cols-4 text-xs items-end">
                  <label class="flex flex-col gap-1 md:col-span-2">
                    <span class="font-medium">Vzorec imena</span>
                    <input name="output_filename_pattern" v-model="settingsForms[v.id].output_filename_pattern" placeholder="{slug}_{generation.date}.docx" class="border rounded px-2 py-1" />
                    <span v-if="settingsForms[v.id].errors.output_filename_pattern" class="text-rose-600">{{ settingsForms[v.id].errors.output_filename_pattern }}</span>
                  </label>
                  <label class="flex flex-col gap-1">
                    <span class="font-medium">Format datuma</span>
                    <input name="date_format" v-model="settingsForms[v.id].date_format" placeholder="Y-m-d" class="border rounded px-2 py-1" />
                    <span v-if="settingsForms[v.id].errors.date_format" class="text-rose-600">{{ settingsForms[v.id].errors.date_format }}</span>
                  </label>
                  <label class="flex items-center gap-2 mt-5">
                    <input type="checkbox" name="fail_on_unresolved" true-value="1" false-value="0" v-model="settingsForms[v.id].fail_on_unresolved" />
                    <span>Fail na nerešene</span>
                  </label>
                  <div class="md:col-span-4 mt-2 p-3 bg-gray-50 rounded border border-gray-200 grid gap-2 md:grid-cols-6">
                    <div class="col-span-6 text-[10px] uppercase tracking-wide text-gray-500 font-semibold">Formatiranje števil / valute</div>
                    <label class="flex flex-col gap-1">
                      <span>Decimale</span>
                      <input type="number" min="0" max="6" name="number_decimals" v-model="settingsForms[v.id].number_decimals" class="border rounded px-2 py-1" />
                    </label>
                    <label class="flex flex-col gap-1">
                      <span>Decimalno</span>
                      <input name="decimal_separator" v-model="settingsForms[v.id].decimal_separator" class="border rounded px-2 py-1" />
                    </label>
                    <label class="flex flex-col gap-1">
                      <span>Tisočice</span>
                      <input name="thousands_separator" v-model="settingsForms[v.id].thousands_separator" class="border rounded px-2 py-1" />
                    </label>
                    <label class="flex flex-col gap-1">
                      <span>Simbol</span>
                      <input name="currency_symbol" v-model="settingsForms[v.id].currency_symbol" class="border rounded px-2 py-1" />
                    </label>
                    <label class="flex flex-col gap-1">
                      <span>Pozicija</span>
                      <select name="currency_position" v-model="settingsForms[v.id].currency_position" class="border rounded px-2 py-1">
                        <option value="before">Pred</option>
                        <option value="after">Za</option>
                      </select>
                    </label>
                    <label class="flex items-center gap-2 mt-5">
                      <input type="checkbox" name="currency_space" true-value="1" false-value="0" v-model="settingsForms[v.id].currency_space" />
                      <span>Presledek</span>
                    </label>
                    <div class="col-span-6 border-t my-1"></div>
                    <div class="col-span-6 text-[10px] uppercase tracking-wide text-gray-500 font-semibold mt-1">Datumi</div>
                    <label class="flex flex-col gap-1 md:col-span-2">
                      <span>Privzeti datum</span>
                      <input name="default_date_format" v-model="settingsForms[v.id].default_date_format" placeholder="d.m.Y" class="border rounded px-2 py-1" />
                    </label>
                    <div class="md:col-span-4 text-xs text-gray-500 flex items-center">Uporabi npr. d.m.Y ali Y-m-d. Posamezni tokeni lahko dobijo specifičen format (nadgradnja kasneje).</div>
                  </div>
                  <div class="md:col-span-4 flex gap-2 items-center">
                    <button :disabled="settingsForms[v.id].processing" class="px-3 py-1.5 bg-indigo-600 text-white rounded disabled:opacity-50">{{ settingsForms[v.id].processing ? 'Shranjevanje...' : 'Shrani' }}</button>
                    <span v-if="settingsSaved[v.id]" class="text-emerald-600">Shranjeno</span>
                    <span class="text-gray-400">Placeholders: {slug} {version} {generation.date} {generation.timestamp}</span>
                  </div>
                </form>
              </div>
            </div>
            <span
              class="text-xs"
              :class="v.active ? 'text-emerald-600' : 'text-gray-400'"
              >{{ v.active ? "Aktivno" : "Neaktivno" }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </AdminLayout>
</template>
