<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { Link } from "@inertiajs/vue3";
import { ref } from "vue";
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";

const props = defineProps({
  segment: Object,
  contracts: Object, // LengthAwarePaginator payload from Laravel
});

// Initialize search from current URL so input reflects server filter
const search = ref(new URLSearchParams(window.location.search).get("search") || "");

// Column definitions for the server-driven table
const columns = [
  { key: "reference", label: "Pogodba", sortable: true },
  { key: "client_case", label: "Primer" },
  { key: "client", label: "Stranka" },
  { key: "type", label: "Vrsta" },
  { key: "start_date", label: "Začetek", sortable: true },
  { key: "end_date", label: "Konec", sortable: true },
  { key: "account", label: "Stanje", align: "right" },
];

function formatDate(value) {
  if (!value) {
    return "-";
  }
  const d = new Date(value);
  if (isNaN(d)) return value;
  return `${String(d.getDate()).padStart(2, "0")}.${String(d.getMonth() + 1).padStart(
    2,
    "0"
  )}.${d.getFullYear()}`;
}

function formatCurrency(value) {
  if (value === null || value === undefined) return "-";
  const n = Number(value);
  if (isNaN(n)) return String(value);
  return (
    n.toLocaleString("sl-SI", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) +
    " €"
  );
}
</script>

<template>
  <AppLayout :title="`Segment: ${segment?.name || ''}`">
    <template #header> </template>
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
      <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-4">
        <h2 class="text-lg">{{ segment.name }}</h2>
        <div class="text-sm text-gray-600 mb-4">{{ segment?.description }}</div>

        <DataTableServer
          :columns="columns"
          :rows="contracts?.data || []"
          :meta="contracts || {}"
          v-model:search="search"
          route-name="segments.show"
          :route-params="{ segment: segment?.id ?? segment }"
          :only-props="['contracts']"
          :page-size-options="[10, 25, 50]"
          empty-text="Ni pogodb v tem segmentu."
          row-key="uuid"
        >
          <!-- Primer (client_case) cell with link when available -->
          <template #cell-client_case="{ row }">
            <Link
              v-if="row.client_case?.uuid"
              :href="
                route('clientCase.show', {
                  client_case: row.client_case.uuid,
                  segment: segment?.id ?? segment,
                })
              "
              class="text-indigo-600 hover:underline"
            >
              {{ row.client_case?.person?.full_name || "Primer stranke" }}
            </Link>
            <span v-else>{{ row.client_case?.person?.full_name || "-" }}</span>
          </template>

          <!-- Stranka (client) name -->
          <template #cell-client="{ row }">
            {{ row.client?.person?.full_name || "-" }}
          </template>

          <!-- Vrsta (type) -->
          <template #cell-type="{ row }">
            {{ row.type?.name || "-" }}
          </template>

          <!-- Dates formatted -->
          <template #cell-start_date="{ row }">
            {{ formatDate(row.start_date) }}
          </template>
          <template #cell-end_date="{ row }">
            {{ formatDate(row.end_date) }}
          </template>

          <!-- Account balance formatted -->
          <template #cell-account="{ row }">
            <div class="text-right">
              {{ formatCurrency(row.account?.balance_amount) }}
            </div>
          </template>
        </DataTableServer>
      </div>
    </div>
  </AppLayout>
</template>
