<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { Link, router } from "@inertiajs/vue3";
import { ref } from "vue";
import ConfirmationModal from "@/Components/ConfirmationModal.vue";
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
import Dropdown from "@/Components/Dropdown.vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import {
  faEllipsisVertical,
  faEye,
  faPlay,
  faTrash,
  faCircleCheck,
} from "@fortawesome/free-solid-svg-icons";

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

const deletingId = ref(null);
const confirming = ref(false);
const errorMsg = ref(null);
const search = ref(new URLSearchParams(window.location.search).get("search") || "");

function canDelete(status) {
  return !["completed", "processing"].includes(status);
}

function confirmDelete(imp) {
  if (!canDelete(imp.status)) return;
  deletingId.value = imp.id;
  confirming.value = true;
  errorMsg.value = null;
}

function performDelete() {
  if (!deletingId.value) return;
  router.delete(route("imports.destroy", { import: deletingId.value }), {
    preserveScroll: true,
    onFinish: () => {
      confirming.value = false;
      deletingId.value = null;
    },
    onError: (errs) => {
      errorMsg.value = errs?.message || "Brisanje ni uspelo.";
    },
  });
}

function statusBadge(status) {
  const map = {
    uploaded: "bg-gray-200 text-gray-700",
    parsed: "bg-blue-100 text-blue-800",
    validating: "bg-amber-100 text-amber-800",
    completed: "bg-emerald-100 text-emerald-800",
    failed: "bg-red-100 text-red-800",
  };
  return map[status] || "bg-gray-100 text-gray-800";
}

const columns = [
  { key: "created_at", label: "Datum" },
  { key: "original_name", label: "Datoteka" },
  { key: "status", label: "Status" },
  { key: "client", label: "Naročnik" },
  { key: "template", label: "Predloga" },
  { key: "actions", label: "Akcije", class: "w-px" },
];

function formatDateTimeNoSeconds(value) {
  if (!value) return "-";
  const d = new Date(value);
  if (isNaN(d)) return String(value);
  return d.toLocaleString("sl-SI", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  });
}
</script>

<template>
  <AppLayout title="Uvozi">
    <template #header>
      <div class="flex items-center justify-between">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">Uvozi</h2>
      </div>
    </template>

    <div class="py-6">
      <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
        <div class="flex flex-col gap-3 bg-white shadow sm:rounded-lg p-4">
          <div class="flex justify-end">
            <Link
              :href="route('imports.create')"
              class="px-3 py-2 rounded bg-blue-600 text-white text-sm"
              >Novi uvoz</Link
            >
          </div>
          <DataTableServer
            :columns="columns"
            :rows="imports?.data || []"
            :meta="
              imports?.meta
                ? {
                    current_page: imports.meta.current_page,
                    per_page: imports.meta.per_page,
                    total: imports.meta.total,
                    last_page: imports.meta.last_page,
                  }
                : {}
            "
            v-model:search="search"
            route-name="imports.index"
            :only-props="['imports']"
            row-key="uuid"
            empty-text="Ni uvozov."
          >
            <!-- Datum column formatted -->
            <template #cell-created_at="{ row }">
              {{ formatDateTimeNoSeconds(row.created_at) }}
            </template>

            <!-- Status badge -->
            <template #cell-status="{ row }">
              <span :class="['px-2 py-0.5 rounded text-xs', statusBadge(row.status)]">
                {{ row.status }}
              </span>
            </template>

            <!-- Client name -->
            <template #cell-client="{ row }">
              {{ row.client?.person?.full_name ?? "—" }}
            </template>

            <!-- Template name -->
            <template #cell-template="{ row }">
              {{ row.template?.name ?? "—" }}
            </template>

            <!-- Actions -->
            <template #cell-actions="{ row }">
              <Dropdown width="48" :close-on-content-click="true">
                <template #trigger>
                  <button
                    type="button"
                    class="inline-flex items-center justify-center w-8 h-8 rounded hover:bg-gray-100"
                    aria-label="Akcije"
                  >
                    <FontAwesomeIcon
                      :icon="faEllipsisVertical"
                      class="w-4 h-4 text-gray-600"
                    />
                  </button>
                </template>
                <template #content>
                  <div class="py-1">
                    <Link
                      :href="route('imports.continue', { import: row.uuid })"
                      class="flex items-center w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                    >
                      <FontAwesomeIcon :icon="faEye" class="w-4 h-4 me-2 text-gray-500" />
                      <span>Poglej</span>
                    </Link>
                    <Link
                      v-if="row.status !== 'completed'"
                      :href="route('imports.continue', { import: row.uuid })"
                      class="flex items-center w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                    >
                      <FontAwesomeIcon
                        :icon="faPlay"
                        class="w-4 h-4 me-2 text-gray-500"
                      />
                      <span>Nadaljuj</span>
                    </Link>
                    <button
                      v-if="canDelete(row.status)"
                      type="button"
                      class="flex items-center w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50"
                      @click="confirmDelete(row)"
                    >
                      <FontAwesomeIcon :icon="faTrash" class="w-4 h-4 me-2" />
                      <span>Izbriši</span>
                    </button>
                    <div
                      v-else
                      class="flex items-center px-4 py-2 text-sm text-gray-400 cursor-default"
                    >
                      <FontAwesomeIcon :icon="faCircleCheck" class="w-4 h-4 me-2" />
                      <span>Zaključen</span>
                    </div>
                  </div>
                </template>
              </Dropdown>
            </template>
          </DataTableServer>
          <ConfirmationModal
            :show="confirming"
            @close="
              confirming = false;
              deletingId = null;
            "
          >
            <template #title>Potrditev brisanja</template>
            <template #content>
              <p class="text-sm">
                Ste prepričani, da želite izbrisati ta uvoz? Datoteka bo odstranjena iz
                shrambe, če je še prisotna.
              </p>
              <p v-if="errorMsg" class="text-sm text-red-600 mt-2">{{ errorMsg }}</p>
            </template>
            <template #footer>
              <button
                class="px-3 py-1.5 text-sm border rounded me-2"
                @click="
                  confirming = false;
                  deletingId = null;
                "
              >
                Prekliči
              </button>
              <button
                class="px-3 py-1.5 text-sm rounded bg-red-600 text-white"
                @click="performDelete"
              >
                Izbriši
              </button>
            </template>
          </ConfirmationModal>
        </div>
      </div>
    </div>
  </AppLayout>
</template>
