<script setup>
import AppPhoneLayout from "@/Layouts/AppPhoneLayout.vue";
import { Badge } from "@/Components/ui/badge";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/Components/ui/select";
import { Skeleton } from "@/Components/ui/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/Components/ui/tabs";
import { InfiniteScroll, router } from "@inertiajs/vue3";
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
import { useDebounceFn } from "@vueuse/core";
import { CheckCircle2, ClipboardList, SlidersHorizontal } from "lucide-vue-next";
import JobCard from "@/Pages/Phone/Partials/JobCard.vue";

const props = defineProps({
  pendingJobs: { type: Object, default: null },
  processedJobs: { type: Object, default: null },
  completedJobs: { type: Object, default: null },
  clients: { type: Array, default: () => [] },
  view_mode: { type: String, default: "assigned" },
  filters: { type: Object, default: () => ({ search: "", client: "" }) },
});

const isCompleted = computed(() => props.view_mode === "completed-today");

// ── Filters ──────────────────────────────────────────────────────────────────
const search = ref(props.filters.search || "");
const clientFilter = ref(props.filters.client || "all");
const isFiltering = ref(false);
const showFilters = ref(
  !!(props.filters.search || (props.filters.client && props.filters.client !== "all"))
);

const debouncedFilter = useDebounceFn(() => performFilter(), 500);
watch(search, () => debouncedFilter());
watch(clientFilter, () => performFilter());

function performFilter() {
  isFiltering.value = true;
  const targetRoute = isCompleted.value ? "phone.completed" : "phone.index";
  const only = isCompleted.value
    ? ["completedJobs", "filters"]
    : ["pendingJobs", "processedJobs", "filters"];

  router.get(
    route(targetRoute),
    {
      search: search.value || undefined,
      client: clientFilter.value !== "all" ? clientFilter.value : undefined,
    },
    {
      preserveState: true,
      preserveScroll: false,
      only,
      reset: isCompleted.value ? ["completedJobs"] : ["pendingJobs", "processedJobs"],
      onSuccess: () => {
        isFiltering.value = false;
      },
      onError: () => {
        isFiltering.value = false;
      },
    }
  );
}

function clearFilters() {
  search.value = "";
  clientFilter.value = "all";
}

// ── Scroll-hide title ────────────────────────────────────────────────────────
const scrolled = ref(false);
let stopNavigateListener = null;
function onScroll() {
  if (!scrolled.value && window.scrollY > 50) {
    scrolled.value = true;
  } else if (scrolled.value && window.scrollY < 10) {
    scrolled.value = false;
  }
}
onMounted(() => {
  let trackedPath = window.location.pathname;
  stopNavigateListener = router.on("navigate", (event) => {
    const newPath = new URL(event.detail.page.url, window.location.origin).pathname;
    if (newPath !== trackedPath) {
      scrolled.value = false;
      trackedPath = newPath;
    }
  });
  window.addEventListener("scroll", onScroll, { passive: true });
});

onUnmounted(() => {
  if (stopNavigateListener) stopNavigateListener();
  window.removeEventListener("scroll", onScroll);
});

// ── Counts ───────────────────────────────────────────────────────────────────
const pendingCount = computed(() => props.pendingJobs?.total ?? 0);
const processedCount = computed(() => props.processedJobs?.total ?? 0);

// ── Helpers ──────────────────────────────────────────────────────────────────
function getCaseUuid(job) {
  return (
    job?.contract?.client_case?.uuid || job?.client_case?.uuid || job?.case_uuid || null
  );
}

function jobHref(job) {
  const uuid = getCaseUuid(job);
  if (!uuid) return null;
  return route("phone.case", {
    client_case: uuid,
    completed: isCompleted.value ? 1 : undefined,
  });
}
</script>

<template>
  <AppPhoneLayout title="Phone">
    <template #header>
      <h2
        class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight overflow-hidden transition-all duration-200 ease-in-out"
        :class="scrolled ? 'max-h-0 opacity-0 mb-0' : 'max-h-12 opacity-100 mb-0'"
      >
        {{ isCompleted ? "Zaključeno danes" : "Terenska opravila" }}
      </h2>

      <!-- Filter bar -->
      <div class="pt-2 space-y-2">
        <div class="flex items-center gap-2">
          <div class="relative flex-1">
            <Input
              v-model="search"
              type="text"
              placeholder="Išči po referenci ali imenu..."
              class="pr-10"
            />
            <span
              v-if="isFiltering"
              class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin"
            />
          </div>
          <Button
            variant="outline"
            size="icon"
            class="shrink-0"
            :class="
              showFilters || clientFilter !== 'all' ? 'bg-primary/10 border-primary' : ''
            "
            title="Filter po naročniku"
            @click="showFilters = !showFilters"
          >
            <SlidersHorizontal class="w-4 h-4" />
          </Button>
          <Button
            v-if="search || clientFilter !== 'all'"
            variant="ghost"
            size="sm"
            class="shrink-0 text-muted-foreground"
            @click="clearFilters"
          >
            Počisti
          </Button>
        </div>

        <div v-if="showFilters || clientFilter !== 'all'">
          <Select v-model="clientFilter">
            <SelectTrigger class="w-full">
              <SelectValue placeholder="Vsi naročniki" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Vsi naročniki</SelectItem>
              <SelectItem
                v-for="client in props.clients"
                :key="client.uuid"
                :value="client.uuid"
              >
                {{ client.name }}
              </SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>
    </template>

    <div class="pb-8">
      <!-- Assigned mode: two tabs (Novo / Obdelano) -->
      <div v-if="!isCompleted" class="px-4 pt-4">
        <Tabs default-value="pending" class="w-full">
          <TabsList class="w-full grid grid-cols-2 bg-zinc-200/50">
            <TabsTrigger value="pending">
              <div class="flex flex-row items-center gap-1 p-1">
                <ClipboardList :size="16" />
                <span>Novo</span>
                <Badge
                  v-if="pendingCount"
                  variant="outline"
                  class="text-blue-500 font-bold text-sm"
                >
                  {{ pendingCount }}
                </Badge>
              </div>
            </TabsTrigger>
            <TabsTrigger value="processed">
              <div class="flex flex-row items-center gap-1 p-1">
                <CheckCircle2 :size="16" />
                Obdelano
                <Badge
                  v-if="processedCount"
                  variant="outline"
                  class="text-green-500 font-bold text-sm"
                >
                  {{ processedCount }}
                </Badge>
              </div>
            </TabsTrigger>
          </TabsList>

          <!-- Pending tab -->
          <TabsContent value="pending" class="space-y-3">
            <InfiniteScroll data="pendingJobs" class="space-y-2" only-next>
              <template #default="{ loading }">
                <template v-if="props.pendingJobs?.data?.length">
                  <JobCard
                    v-for="job in props.pendingJobs.data"
                    :key="job.id"
                    :job="job"
                    :href="jobHref(job)"
                    accent-class="border-blue-500"
                  />
                </template>
                <div
                  v-else-if="!loading"
                  class="py-16 text-center text-gray-500 dark:text-gray-400 space-y-2"
                >
                  <ClipboardList
                    class="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto"
                  />
                  <p class="text-sm">
                    {{
                      search || clientFilter !== "all"
                        ? "Ni zadetkov"
                        : "Ni novih opravil"
                    }}
                  </p>
                </div>
              </template>
              <template #loading>
                <div class="space-y-3">
                  <Skeleton v-for="i in 3" :key="i" class="h-36 rounded-xl" />
                </div>
              </template>
            </InfiniteScroll>
          </TabsContent>

          <!-- Processed tab -->
          <TabsContent value="processed" class="space-y-3">
            <InfiniteScroll data="processedJobs" class="space-y-2" only-next>
              <template #default="{ loading }">
                <template v-if="props.processedJobs?.data?.length">
                  <JobCard
                    v-for="job in props.processedJobs.data"
                    :key="job.id"
                    :job="job"
                    :href="jobHref(job)"
                    accent-class="border-green-500"
                    :show-last-activity="true"
                  />
                </template>
                <div
                  v-else-if="!loading"
                  class="py-16 text-center text-gray-500 dark:text-gray-400 space-y-2"
                >
                  <CheckCircle2
                    class="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto"
                  />
                  <p class="text-sm">
                    {{
                      search || clientFilter !== "all"
                        ? "Ni zadetkov"
                        : "Ni obdelanih opravil"
                    }}
                  </p>
                </div>
              </template>
              <template #loading>
                <div class="space-y-3">
                  <Skeleton v-for="i in 3" :key="i" class="h-36 rounded-xl" />
                </div>
              </template>
            </InfiniteScroll>
          </TabsContent>
        </Tabs>
      </div>

      <!-- Completed-today mode: single scroll list -->
      <div v-else class="px-4 pt-4 space-y-3">
        <InfiniteScroll data="completedJobs" only-next>
          <template #default="{ loading }">
            <template v-if="props.completedJobs?.data?.length">
              <JobCard
                v-for="job in props.completedJobs.data"
                :key="job.id"
                :job="job"
                :href="jobHref(job)"
                accent-class="border-secondary-500"
                :show-last-activity="true"
              />
            </template>
            <div
              v-else-if="!loading"
              class="py-16 text-center text-gray-500 dark:text-gray-400 space-y-2"
            >
              <CheckCircle2 class="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto" />
              <p class="text-sm">
                {{
                  search || clientFilter !== "all"
                    ? "Ni zadetkov"
                    : "Danes ni zaključenih opravil"
                }}
              </p>
            </div>
          </template>
          <template #loading>
            <div class="space-y-3">
              <Skeleton v-for="i in 3" :key="i" class="h-36 rounded-xl" />
            </div>
          </template>
        </InfiniteScroll>
      </div>
    </div>
  </AppPhoneLayout>
</template>
