<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { useForm, router } from "@inertiajs/vue3";
import { ref, computed } from "vue";
import Multiselect from "vue-multiselect";
import axios from "axios";

// Props: provided by controller (clients + templates collections)
const props = defineProps({
  templates: Array,
  clients: Array,
});

// Basic create form (rest of workflow handled on the Continue page)
const form = useForm({
  client_uuid: null,
  import_template_id: null,
  has_header: true,
  file: null,
});

// Multiselect bridge: client
const selectedClientOption = computed({
  get() {
    if (!form.client_uuid) return null;
    return (props.clients || []).find((c) => c.uuid === form.client_uuid) || null;
  },
  set(val) {
    form.client_uuid = val ? val.uuid : null;
  },
});

// Multiselect bridge: template
const selectedTemplateOption = computed({
  get() {
    if (form.import_template_id == null) return null;
    return (props.templates || []).find((t) => t.id === form.import_template_id) || null;
  },
  set(val) {
    form.import_template_id = val ? val.id : null;
  },
});

// Filter templates: show globals when no client; when client selected show only that client's templates (no mixing to avoid confusion)
const filteredTemplates = computed(() => {
  const cuuid = form.client_uuid;
  const list = props.templates || [];
  if (!cuuid) {
    return list.filter((t) => t.client_id == null);
  }
  return list.filter((t) => t.client_uuid === cuuid);
});

const uploading = ref(false);
const dragActive = ref(false);
const uploadError = ref(null);

function onFileChange(e) {
  const files = e.target.files;
  if (files && files.length) {
    form.file = files[0];
    uploadError.value = null;
  }
}

function onFileDrop(e) {
  const files = e.dataTransfer?.files;
  if (files && files.length) {
    form.file = files[0];
    uploadError.value = null;
  }
  dragActive.value = false;
}

async function startImport() {
  uploadError.value = null;
  if (!form.file) {
    uploadError.value = "Najprej izberite datoteko."; // "Select a file first."
    return;
  }
  uploading.value = true;
  try {
    const fd = new FormData();
    fd.append("file", form.file);
    if (form.import_template_id != null) {
      fd.append("import_template_id", String(form.import_template_id));
    }
    if (form.client_uuid) {
      fd.append("client_uuid", form.client_uuid);
    }
    fd.append("has_header", form.has_header ? "1" : "0");
    const { data } = await axios.post(route("imports.store"), fd, {
      headers: { Accept: "application/json" },
      withCredentials: true,
    });
    if (data?.uuid) {
      router.visit(route("imports.continue", { import: data.uuid }));
      return;
    }
    if (data?.id) {
      // Fallback if only numeric id returned
      router.visit(route("imports.continue", { import: data.id }));
      return;
    }
    uploadError.value = "Nepričakovan odgovor strežnika."; // Unexpected server response.
  } catch (e) {
    if (e.response?.data?.message) {
      uploadError.value = e.response.data.message;
    } else {
      uploadError.value = "Nalaganje ni uspelo."; // Upload failed.
    }
    console.error("Import upload failed", e.response?.status, e.response?.data || e);
  } finally {
    uploading.value = false;
  }
}
</script>

<template>
  <AppLayout title="Nov uvoz">
    <template #header>
      <h2 class="font-semibold text-xl text-gray-800 leading-tight">Nov uvoz</h2>
    </template>
    <div class="py-6">
      <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white shadow sm:rounded-lg p-6 space-y-8">
          <!-- Intro / guidance -->
          <div class="text-sm text-gray-600 leading-relaxed">
            <p class="mb-2">
              1) Izberite stranko (opcijsko) in predlogo (če obstaja), 2) izberite
              datoteko (CSV, TXT, XLSX*) in 3) kliknite Začni uvoz. Nadaljnje preslikave
              in simulacija bodo na naslednji strani.
            </p>
            <p class="text-xs text-gray-500">
              * XLSX podpora je odvisna od konfiguracije strežnika.
            </p>
          </div>

          <!-- Client & Template selection -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">Stranka</label>
              <Multiselect
                v-model="selectedClientOption"
                :options="clients"
                track-by="uuid"
                label="name"
                placeholder="Poišči stranko..."
                :searchable="true"
                :allow-empty="true"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">Predloga</label>
              <Multiselect
                v-model="selectedTemplateOption"
                :options="filteredTemplates"
                track-by="id"
                label="name"
                placeholder="Poišči predlogo..."
                :searchable="true"
                :allow-empty="true"
              >
                <template #option="{ option }">
                  <div class="flex items-center justify-between w-full">
                    <span class="truncate">{{ option.name }}</span>
                    <span
                      class="ml-2 text-[10px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-600"
                      >{{ option.client_id ? "Client" : "Global" }}</span
                    >
                  </div>
                </template>
              </Multiselect>
              <p class="text-xs text-gray-500 mt-1" v-if="!form.client_uuid">
                Prikazane so samo globalne predloge dokler ne izberete stranke.
              </p>
            </div>
          </div>

          <!-- File + Header -->
          <div class="grid grid-cols-1 gap-6 items-start">
            <div class="md:col-span-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">Datoteka</label>
              <div
                class="border-2 border-dashed rounded-md p-6 text-center cursor-pointer transition-colors"
                :class="{
                  'border-indigo-400 bg-indigo-50': dragActive,
                  'border-gray-300 hover:border-gray-400': !dragActive,
                }"
                @dragover.prevent="dragActive = true"
                @dragleave.prevent="dragActive = false"
                @drop.prevent="onFileDrop"
              >
                <input
                  type="file"
                  class="hidden"
                  id="import-file-input"
                  @change="onFileChange"
                />
                <label for="import-file-input" class="block cursor-pointer select-none">
                  <div v-if="!form.file" class="text-sm text-gray-600">
                    Povlecite datoteko sem ali
                    <span class="text-indigo-600 underline">kliknite za izbiro</span>
                  </div>
                  <div v-else class="text-sm text-gray-800 flex flex-col gap-1">
                    <span class="font-medium">{{ form.file.name }}</span>
                    <span class="text-xs text-gray-500"
                      >{{ (form.file.size / 1024).toFixed(1) }} kB</span
                    >
                    <span
                      class="text-[10px] inline-block bg-gray-100 px-1.5 py-0.5 rounded"
                      >Zamenjaj</span
                    >
                  </div>
                </label>
              </div>
            </div>
            <div class="space-y-2">
              <label class="flex items-center gap-2 text-sm font-medium text-gray-700">
                <input type="checkbox" v-model="form.has_header" class="rounded" />
                <span>Prva vrstica je glava</span>
              </label>
              <div class="text-xs text-gray-500 leading-relaxed">
                Če ni označeno, bodo stolpci poimenovani po zaporedju (A, B, C ...).
              </div>
            </div>
          </div>

          <!-- Errors -->
          <div v-if="uploadError" class="text-sm text-red-600">
            {{ uploadError }}
          </div>

          <!-- Actions -->
          <div class="flex flex-wrap gap-3 pt-2">
            <button
              type="button"
              @click="startImport"
              :disabled="uploading"
              class="inline-flex items-center gap-2 px-5 py-2.5 rounded bg-indigo-600 disabled:bg-indigo-300 text-white text-sm font-medium shadow-sm"
            >
              <span
                v-if="uploading"
                class="h-4 w-4 border-2 border-white/60 border-t-transparent rounded-full animate-spin"
              ></span>
              <span>{{ uploading ? "Nalagam..." : "Začni uvoz" }}</span>
            </button>
            <button
              type="button"
              @click="
                () => {
                  form.file = null;
                  uploadError = null;
                }
              "
              :disabled="uploading || !form.file"
              class="px-4 py-2 text-sm rounded border bg-white disabled:opacity-50"
            >
              Počisti
            </button>
          </div>

          <div class="text-xs text-gray-400 pt-4 border-t">
            Po nalaganju boste preusmerjeni na nadaljevanje uvoza, kjer lahko izvedete
            preslikave, simulacijo in končno obdelavo.
          </div>
        </div>
      </div>
    </div>
  </AppLayout>
</template>
