<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import Pagination from "@/Components/Pagination.vue";
import SectionTitle from "@/Components/SectionTitle.vue";
import { Link, router } from "@inertiajs/vue3";
import { debounce } from "lodash";
import { ref, watch, onUnmounted } from "vue";

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

// Search state (initialize from server-provided filters)
const search = ref(props.filters?.search || "");
const applySearch = debounce((term) => {
  const params = Object.fromEntries(
    new URLSearchParams(window.location.search).entries()
  );
  if (term) {
    params.search = term;
  } else {
    delete params.search;
  }
  // Reset paginator key used by backend: 'client-cases-page'
  delete params["client-cases-page"];
  delete params.page;
  router.get(route("clientCase"), params, {
    preserveState: true,
    replace: true,
    preserveScroll: true,
  });
}, 300);
watch(search, (v) => applySearch(v));
onUnmounted(() => applySearch.cancel && applySearch.cancel());

// Format helpers
const fmtCurrency = (v) => {
  const n = Number(v ?? 0);
  try {
    return new Intl.NumberFormat("sl-SI", { style: "currency", currency: "EUR" }).format(
      n
    );
  } catch (e) {
    return `${n.toFixed(2)} €`;
  }
};
</script>
<template>
  <AppLayout title="Client cases">
    <template #header> </template>
    <div class="py-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="px-3 bg-white overflow-hidden shadow-xl sm:rounded-lg">
          <div class="mx-auto max-w-4x1 py-3">
            <div class="flex items-center justify-between gap-3 pb-3">
              <SectionTitle>
                <template #title>Primeri</template>
              </SectionTitle>
              <input
                v-model="search"
                type="text"
                placeholder="Iskanje po imenu"
                class="w-full sm:w-80 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
              />
            </div>
            <div class="overflow-x-auto">
              <table class="min-w-full text-left text-sm">
                <thead>
                  <tr class="border-b">
                    <th class="py-2 pr-4">Št.</th>
                    <th class="py-2 pr-4">Primer</th>
                    <th class="py-2 pr-4">Stranka</th>
                    <th class="py-2 pr-4">Davčna</th>
                    <th class="py-2 pr-4 text-right">Aktivne pogodbe</th>
                    <th class="py-2 pr-4 text-right">Skupaj stanje</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="c in client_cases.data"
                    :key="c.uuid"
                    class="border-b last:border-0"
                  >
                    <td class="py-2 pr-4">{{ c.person?.nu || "-" }}</td>
                    <td class="py-2 pr-4">
                      <Link
                        :href="route('clientCase.show', { client_case: c.uuid })"
                        class="text-indigo-600 hover:underline"
                      >
                        {{ c.person?.full_name || "-" }}
                      </Link>
                    </td>
                    <td class="py-2 pr-4">{{ c.client?.person?.full_name || "-" }}</td>

                    <td class="py-2 pr-4">{{ c.person?.tax_number || "-" }}</td>
                    <td class="py-2 pr-4 text-right">
                      {{ c.active_contracts_count ?? 0 }}
                    </td>
                    <td class="py-2 pr-4 text-right">
                      {{ fmtCurrency(c.active_contracts_balance_sum) }}
                    </td>
                  </tr>
                  <tr v-if="!client_cases.data || client_cases.data.length === 0">
                    <td colspan="6" class="py-4 text-gray-500">Ni zadetkov.</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <Pagination
            :links="client_cases.links"
            :from="client_cases.from"
            :to="client_cases.to"
            :total="client_cases.total"
          />
        </div>
      </div>
    </div>
  </AppLayout>
</template>
