<script setup>
import { Input } from "@/Components/ui/input";
import axios from "axios";
import { debounce } from "lodash";
import { SearchIcon } from "@/Utilities/Icons";
import { onMounted, onUnmounted, ref, watch } from "vue";
import { Link } from "@inertiajs/vue3";

const props = defineProps({
  open: { type: Boolean, default: false },
});
const emit = defineEmits(["update:open"]);

const query = ref("");
const result = ref({ clients: [], client_cases: [] });
const isOpen = ref(props.open);

watch(
  () => props.open,
  (v) => {
    isOpen.value = v;
    if (v) focusInput();
  }
);
watch(isOpen, (v) => emit("update:open", v));

const searching = debounce((value) => {
  if (!value || !value.trim()) {
    result.value = { clients: [], client_cases: [] };
    return;
  }
  axios
    .get(route("search"), { params: { query: value, limit: 8, tag: "" } })
    .then((res) => {
      result.value = res.data;
    })
    .catch(() => {});
}, 250);

watch(
  () => query.value,
  (val) => searching(val)
);

const inputWrap = ref(null);
const focusInput = () =>
  setTimeout(() => inputWrap.value?.querySelector("input")?.focus(), 0);

function onKeydown(e) {
  if (e.key === "Escape") {
    isOpen.value = false;
  }
}
onMounted(() => window.addEventListener("keydown", onKeydown));
onUnmounted(() => window.removeEventListener("keydown", onKeydown));
</script>
<template>
  <teleport to="body">
    <transition name="fade">
      <div v-if="isOpen" class="fixed inset-0 z-50">
        <div
          class="absolute inset-0 bg-gradient-to-br from-slate-900/60 to-slate-800/60 backdrop-blur-sm"
          @click="isOpen = false"
        ></div>
        <div
          class="absolute inset-0 flex items-start justify-center p-4 pt-20 sm:pt-28"
          @click.self="isOpen = false"
        >
          <div
            class="w-full max-w-3xl rounded-2xl border border-white/10 bg-white/80 backdrop-blur-xl shadow-2xl ring-1 ring-black/5 overflow-hidden"
            role="dialog"
            aria-modal="true"
          >
            <div
              class="p-4 border-b border-slate-200/60"
              ref="inputWrap"
            >
              <div class="relative">
                <div class="relative">
                  <div class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500">
                    <SearchIcon />
                  </div>
                  <Input
                    v-model="query"
                    placeholder="Išči po naročnikih ali primerih (Ctrl+K za zapiranje)"
                    class="w-full pl-10 pr-16 rounded-xl"
                  />
                  <button
                    v-if="query"
                    @click="query = ''"
                    class="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-slate-500 hover:text-slate-700"
                  >
                    ESC
                  </button>
                </div>
              </div>
            </div>
            <div
              class="max-h-[65vh] overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-300"
            >
              <div
                v-if="!query"
                class="p-8 text-sm text-slate-500 text-center space-y-2"
              >
                <p>Začni tipkati za iskanje.</p>
                <p class="text-xs">
                  Namig: uporabi
                  <kbd
                    class="px-1.5 py-0.5 bg-slate-100 rounded font-mono text-[10px]"
                    >Ctrl</kbd
                  >
                  +
                  <kbd
                    class="px-1.5 py-0.5 bg-slate-100 rounded font-mono text-[10px]"
                    >K</kbd
                  >
                </p>
              </div>
              <div v-else class="divide-y divide-slate-200/70">
                <div v-if="result.clients.length" class="py-3">
                  <div
                    class="flex items-center justify-between px-5 pb-1 text-[11px] font-semibold tracking-wide uppercase text-slate-500"
                  >
                    <span>Naročniki</span>
                    <span
                      class="rounded bg-slate-100 text-slate-600 px-2 py-0.5 text-[10px]"
                      >{{ result.clients.length }}</span
                    >
                  </div>
                  <ul role="list" class="px-2 space-y-1">
                    <li v-for="client in result.clients" :key="client.client_uuid">
                      <Link
                        :href="route('client.show', { uuid: client.client_uuid })"
                        class="group flex items-center gap-3 w-full rounded-lg px-3 py-2 text-sm hover:bg-indigo-50/70 transition"
                        @click="isOpen = false"
                      >
                        <span
                          class="shrink-0 w-6 h-6 rounded bg-indigo-100 text-indigo-600 flex items-center justify-center text-[11px] font-semibold group-hover:bg-indigo-200"
                          >C</span
                        >
                        <span
                          class="text-slate-700 group-hover:text-slate-900"
                          >{{ client.full_name }}</span
                        >
                      </Link>
                    </li>
                  </ul>
                </div>
                <div v-if="result.client_cases.length" class="py-3">
                  <div
                    class="flex items-center justify-between px-5 pb-1 text-[11px] font-semibold tracking-wide uppercase text-slate-500"
                  >
                    <span>Primeri</span>
                    <span
                      class="rounded bg-slate-100 text-slate-600 px-2 py-0.5 text-[10px]"
                      >{{ result.client_cases.length }}</span
                    >
                  </div>
                  <ul role="list" class="px-2 space-y-1">
                    <li
                      v-for="clientcase in result.client_cases"
                      :key="clientcase.case_uuid"
                      class="rounded-xl border border-slate-200/70 bg-white/70 px-4 py-3 shadow-sm hover:shadow-md transition flex flex-col gap-1"
                    >
                      <div class="flex items-center gap-2">
                        <Link
                          :href="
                            route('clientCase.show', {
                              client_case: clientcase.case_uuid,
                            })
                          "
                          class="text-left font-medium hover:underline leading-tight text-slate-800"
                          @click="isOpen = false"
                        >
                          {{ clientcase.full_name }}
                        </Link>
                        <template v-if="clientcase.contract_reference">
                          <span
                            class="font-mono text-[11px] tracking-tight text-indigo-600 bg-indigo-50 border border-indigo-200 rounded px-1.5 py-0.5 whitespace-nowrap shadow-sm"
                          >
                            {{ clientcase.contract_reference }}
                          </span>
                        </template>
                      </div>
                      <div
                        v-if="
                          clientcase.contract_segments &&
                          clientcase.contract_segments.length
                        "
                        class="flex flex-wrap gap-1 mt-1"
                      >
                        <Link
                          v-for="seg in clientcase.contract_segments"
                          :key="seg.id || seg.name || seg"
                          :href="
                            route('clientCase.show', {
                              client_case: clientcase.case_uuid,
                            }) +
                            '?segment=' +
                            (seg.id || seg)
                          "
                          class="group/seg text-[10px] uppercase tracking-wide bg-gradient-to-br from-purple-50 to-purple-100 text-purple-700 border border-purple-200 px-1.5 py-0.5 rounded hover:from-purple-100 hover:to-purple-200 hover:border-purple-300 transition"
                          @click="isOpen = false"
                        >
                          {{ seg.name || seg }}
                        </Link>
                      </div>
                      <div
                        v-else-if="
                          clientcase.case_segments && clientcase.case_segments.length
                        "
                        class="flex flex-wrap gap-1 mt-1"
                      >
                        <Link
                          v-for="seg in clientcase.case_segments"
                          :key="seg.id || seg.name"
                          :href="
                            route('clientCase.show', {
                              client_case: clientcase.case_uuid,
                            }) +
                            '?segment=' +
                            (seg.id || seg)
                          "
                          class="text-[10px] uppercase tracking-wide bg-slate-100 text-slate-600 border border-slate-200 px-1.5 py-0.5 rounded hover:bg-slate-200 hover:text-slate-700 transition"
                          @click="isOpen = false"
                        >
                          {{ seg.name }}
                        </Link>
                      </div>
                    </li>
                  </ul>
                </div>
                <div
                  v-if="!result.clients.length && !result.client_cases.length"
                  class="p-8 text-center text-sm text-slate-500"
                >
                  Ni rezultatov.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </teleport>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.15s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
