<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import SectionTitle from "@/Components/SectionTitle.vue";
import { Link, router } from "@inertiajs/vue3";
import { ref } from "vue";
import DataTable from "@/Components/DataTable/DataTableNew2.vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faFolderOpen } from "@fortawesome/free-solid-svg-icons";
import Pagination from "@/Components/Pagination.vue";
import AppCard from "@/Components/app/ui/card/AppCard.vue";
import { FolderOpenIcon } from "lucide-vue-next";
import CardTitle from "@/Components/ui/card/CardTitle.vue";

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

// Initial search for DataTable toolbar
const search = ref(props.filters?.search || "");

// 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)} €`;
  }
};

const fmtDateDMY = (v) => {
  if (!v) return "-";
  const d = new Date(v);
  if (isNaN(d)) return "-";
  const dd = String(d.getDate()).padStart(2, "0");
  const mm = String(d.getMonth() + 1).padStart(2, "0");
  const yyyy = d.getFullYear();
  return `${dd}.${mm}.${yyyy}`;
};
</script>
<template>
  <AppLayout title="Client cases">
    <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">
              <FolderOpenIcon size="18" />
              <CardTitle class="uppercase">Primeri</CardTitle>
            </div>
          </template>
          <DataTable
            :columns="[
              { key: 'nu', label: 'Št.', sortable: false },
              { key: 'case', label: 'Primer', sortable: false },
              { key: 'client', label: 'Stranka', sortable: false },
              { key: 'tax', label: 'Davčna', sortable: false },
              { key: 'created_at', label: 'Ustvarjeno', sortable: false },
              {
                key: 'active_contracts',
                label: 'Aktivne pogodbe',
                sortable: false,
                align: 'right',
              },
              {
                key: 'balance',
                label: 'Skupaj stanje',
                sortable: false,
                align: 'right',
              },
            ]"
            :data="client_cases.data || []"
            :page-size="client_cases.per_page"
            :show-pagination="false"
            :show-toolbar="true"
            :hoverable="true"
            row-key="uuid"
            empty-text="Ni najdenih primerov."
          >
            <template #cell-nu="{ row }">
              {{ row.person?.nu || "-" }}
            </template>
            <template #cell-case="{ row }">
              <Link
                :href="route('clientCase.show', { client_case: row.uuid })"
                class="text-indigo-600 hover:underline"
              >
                {{ row.person?.full_name || "-" }}
              </Link>
              <button
                v-if="!row.person"
                @click.prevent="
                  router.post(
                    route('clientCase.emergencyPerson', { client_case: row.uuid })
                  )
                "
                class="ml-2 inline-flex items-center rounded bg-red-50 px-2 py-0.5 text-xs font-semibold text-red-600 hover:bg-red-100 border border-red-200"
                title="Emergency: recreate missing person"
              >
                Add Person
              </button>
            </template>
            <template #cell-client="{ row }">
              {{ row.client?.person?.full_name || "-" }}
            </template>
            <template #cell-tax="{ row }">
              {{ row.person?.tax_number || "-" }}
            </template>
            <template #cell-created_at="{ row }">
              {{ fmtDateDMY(row.created_at) }}
            </template>
            <template #cell-active_contracts="{ row }">
              <div class="text-right">{{ row.active_contracts_count ?? 0 }}</div>
            </template>
            <template #cell-balance="{ row }">
              <div class="text-right">
                {{ fmtCurrency(row.active_contracts_balance_sum) }}
              </div>
            </template>
          </DataTable>
          <div class="border-t border-gray-200 p-4">
            <Pagination
              :links="client_cases.links"
              :from="client_cases.from"
              :to="client_cases.to"
              :total="client_cases.total"
              :per-page="client_cases.per_page || 20"
              :last-page="client_cases.last_page"
              :current-page="client_cases.current_page"
              per-page-param="perPage"
              page-param="clientCasesPage"
            />
          </div>
        </AppCard>
      </div>
      <!-- Pagination handled by DataTableServer -->
    </div>
  </AppLayout>
</template>
