<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { Link, router } from "@inertiajs/vue3";
import { ref, computed } from "vue";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/Components/ui/alert-dialog";
import DataTable from "@/Components/DataTable/DataTableNew2.vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import {
  faEllipsisVertical,
  faEye,
  faPlay,
  faTrash,
  faCircleCheck,
} from "@fortawesome/free-solid-svg-icons";
import TableActions from "@/Components/DataTable/TableActions.vue";
import ActionMenuItem from "@/Components/DataTable/ActionMenuItem.vue";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import AppCard from "@/Components/app/ui/card/AppCard.vue";
import { ImportIcon } from "lucide-vue-next";
import { CardTitle } from "@/Components/ui/card";

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") || "");

const rows = computed(() => props.imports?.data || []);

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";
}

function applySearch() {
  const params = {};
  const currentParams = new URLSearchParams(window.location.search);
  for (const [key, value] of currentParams.entries()) {
    if (key !== "search" && key !== "page") {
      params[key] = value;
    }
  }
  const term = (search.value || "").trim();
  if (term) {
    params.search = term;
  }
  router.get(route("imports.index"), params, {
    preserveState: true,
    replace: true,
    preserveScroll: true,
    only: ["imports"],
  });
}

const columns = [
  { key: "created_at", label: "Datum", sortable: false },
  { key: "original_name", label: "Datoteka", sortable: false },
  { key: "status", label: "Status", sortable: false },
  { key: "client", label: "Naročnik", sortable: false },
  { key: "template", label: "Predloga", sortable: false },
  { key: "actions", label: "", sortable: false, hideable: false, align: "center" },
];

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> </template>

    <div class="py-6">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <AppCard
          title=""
          padding="none"
          class="p-0! gap-0"
          header-class="py-3! px-4 gap-0 text-muted-foreground"
          body-class=""
        >
          <template #header>
            <div class="flex items-center gap-2">
              <ImportIcon size="18" />
              <CardTitle class="uppercase">Uvozi</CardTitle>
            </div>
          </template>
          <DataTable
            :columns="columns"
            :data="rows"
            :meta="{
              current_page: imports?.meta?.current_page,
              per_page: imports?.meta?.per_page,
              total: imports?.meta?.total,
              last_page: imports?.meta?.last_page,
              from: imports?.meta?.from,
              to: imports?.meta?.to,
              links: imports?.meta?.links,
            }"
            route-name="imports.index"
            :only-props="['imports']"
            :page-size="25"
            :page-size-options="[10, 15, 25, 50, 100]"
            :show-pagination="true"
            :show-toolbar="true"
            :hoverable="true"
            row-key="uuid"
            empty-text="Ni uvozov."
          >
            <template #toolbar-actions>
              <Button size="sm" variant="default" as-child>
                <Link :href="route('imports.create')">Novi uvoz</Link>
              </Button>
            </template>
            <template #toolbar-filters>
              <div class="flex items-center gap-2">
                <Input
                  v-model="search"
                  placeholder="Išči uvoz..."
                  class="w-65"
                  @keydown.enter="applySearch"
                />
                <Button size="sm" variant="outline" @click="applySearch">Išči</Button>
              </div>
            </template>
            <!-- 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 }">
              <TableActions align="right">
                <template #default>
                  <ActionMenuItem
                    :icon="faEye"
                    label="Poglej"
                    @click="
                      $inertia.visit(route('imports.continue', { import: row.uuid }))
                    "
                  />
                  <ActionMenuItem
                    v-if="row.status !== 'completed'"
                    :icon="faPlay"
                    label="Nadaljuj"
                    @click="
                      $inertia.visit(route('imports.continue', { import: row.uuid }))
                    "
                  />
                  <ActionMenuItem
                    v-if="canDelete(row.status)"
                    :icon="faTrash"
                    label="Izbriši"
                    danger
                    @click="confirmDelete(row)"
                  />
                  <ActionMenuItem
                    v-if="!canDelete(row.status)"
                    :icon="faCircleCheck"
                    label="Zaključen"
                    disabled
                  />
                </template>
              </TableActions>
            </template>
          </DataTable>
        </AppCard>
      </div>
    </div>

    <!-- Delete Confirmation Dialog -->
    <AlertDialog
      :open="confirming"
      @update:open="
        (val) => {
          if (!val) {
            confirming = false;
            deletingId = null;
          }
        }
      "
    >
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Potrditev brisanja</AlertDialogTitle>
          <AlertDialogDescription>
            Ste prepričani, da želite izbrisati ta uvoz? Datoteka bo odstranjena iz
            shrambe, če je še prisotna.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <p v-if="errorMsg" class="text-sm text-red-600">{{ errorMsg }}</p>
        <AlertDialogFooter>
          <AlertDialogCancel
            @click="
              confirming = false;
              deletingId = null;
            "
          >
            Prekliči
          </AlertDialogCancel>
          <Button @click="performDelete" class="bg-destructive hover:bg-destructive/90">
            Izbriši
          </Button>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  </AppLayout>
</template>
