<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { Link, router } from "@inertiajs/vue3";
import { ref, computed, watch } from "vue";
import axios from "axios";
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
import DialogModal from "@/Components/DialogModal.vue";

const props = defineProps({
  segment: Object,
  contracts: Object, // LengthAwarePaginator payload from Laravel
  clients: Array, // Full list of clients with contracts in this segment
});

// Initialize search and client filter from current URL so inputs reflect server filters
const urlParams = new URLSearchParams(window.location.search);
const search = ref(urlParams.get("search") || "");
const initialClient = urlParams.get("client") || urlParams.get("client_id") || "";
const selectedClient = ref(initialClient);

// Column definitions for the server-driven table
const columns = [
  { key: "reference", label: "Pogodba", sortable: true },
  { key: "client_case", label: "Primer" },
  { key: "address", label: "Naslov" },
  { 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" },
];

const exportDialogOpen = ref(false);
const exportScope = ref("current");
const exportColumns = ref(columns.map((col) => col.key));
const exportError = ref("");
const isExporting = ref(false);

const contractsCurrentPage = computed(() => props.contracts?.current_page ?? 1);
const contractsPerPage = computed(() => props.contracts?.per_page ?? 15);
const totalContracts = computed(
  () => props.contracts?.total ?? props.contracts?.data?.length ?? 0
);
const currentPageCount = computed(() => props.contracts?.data?.length ?? 0);

const allColumnsSelected = computed(() => exportColumns.value.length === columns.length);
const exportDisabled = computed(
  () => exportColumns.value.length === 0 || isExporting.value
);

function toggleAllColumns(checked) {
  exportColumns.value = checked ? columns.map((col) => col.key) : [];
}

function openExportDialog() {
  exportDialogOpen.value = true;
  exportError.value = "";
}

function closeExportDialog() {
  exportDialogOpen.value = false;
}

async function submitExport() {
  if (exportColumns.value.length === 0) {
    exportError.value = "Izberi vsaj en stolpec.";
    return;
  }

  try {
    exportError.value = "";
    isExporting.value = true;

    const payload = {
      scope: exportScope.value,
      columns: [...exportColumns.value],
      search: search.value || "",
      client: selectedClient.value || "",
      page: contractsCurrentPage.value,
      per_page: contractsPerPage.value,
    };

    const response = await axios.post(
      route("segments.export", { segment: props.segment?.id ?? props.segment }),
      payload,
      { responseType: "blob" }
    );

    const blob = new Blob([response.data], {
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    });
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    const filename =
      extractFilenameFromHeaders(response.headers) || buildDefaultFilename();
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);

    exportDialogOpen.value = false;
  } catch (error) {
    exportError.value = "Izvoz je spodletel. Poskusi znova.";
  } finally {
    isExporting.value = false;
  }
}

// Build client options from the full list provided by the server, so the dropdown isn't limited by current filters
const clientOptions = computed(() => {
  const list = Array.isArray(props.clients) ? props.clients : [];
  const opts = list.map((c) => ({
    value: c.uuid || "",
    label: c.name || "(neznana stranka)",
  }));
  return opts.sort((a, b) => (a.label || "").localeCompare(b.label || ""));
});

const selectedClientName = computed(() => {
  if (!selectedClient.value) {
    return "";
  }

  const options = clientOptions.value || [];
  const match = options.find((opt) => opt.value === selectedClient.value);

  return match?.label || "";
});

// React to client selection changes by visiting the same route with updated query
watch(selectedClient, (val) => {
  const query = { search: search.value };
  if (val) {
    query.client = val;
  }
  router.get(
    route("segments.show", { segment: props.segment?.id ?? props.segment }),
    query,
    { preserveState: true, preserveScroll: true, only: ["contracts"], replace: true }
  );
});

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 }) +
    " €"
  );
}

function slugify(value) {
  if (!value) {
    return "data";
  }
  const slug = value.replace(/[^a-z0-9]+/gi, "-").replace(/^-+|-+$/g, "");
  return slug || "data";
}

function buildDefaultFilename() {
  const now = new Date();
  const dd = String(now.getDate()).padStart(2, "0");
  const mm = String(now.getMonth() + 1).padStart(2, "0");
  const yy = String(now.getFullYear()).slice(-2);
  let base = `${dd}${mm}${yy}_${slugify(props.segment?.name || "segment")}-Pogodbe`;
  const clientName = selectedClientName.value;
  if (clientName) {
    base += `_${slugify(clientName)}`;
  }
  return `${base}.xlsx`;
}

function extractFilenameFromHeaders(headers) {
  if (!headers) {
    return null;
  }
  const disposition =
    headers["content-disposition"] || headers["Content-Disposition"] || "";
  if (!disposition) {
    return null;
  }
  const utf8Match = disposition.match(/filename\*=UTF-8''([^;]+)/i);
  if (utf8Match?.[1]) {
    try {
      return decodeURIComponent(utf8Match[1]);
    } catch (error) {
      return utf8Match[1];
    }
  }
  const asciiMatch = disposition.match(/filename="?([^";]+)"?/i);
  return asciiMatch?.[1] || null;
}
</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>

        <!-- Filters -->
        <div class="mb-4 flex flex-col sm:flex-row sm:items-end gap-3">
          <div class="flex-1">
            <label class="block text-sm font-medium text-gray-700 mb-1">Stranka</label>
            <div class="flex items-center gap-2">
              <select
                v-model="selectedClient"
                class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
              >
                <option value="">Vse stranke</option>
                <option
                  v-for="opt in clientOptions"
                  :key="opt.value || opt.label"
                  :value="opt.value"
                >
                  {{ opt.label }}
                </option>
              </select>
              <button
                type="button"
                class="text-sm text-gray-600 hover:text-gray-900"
                @click="selectedClient = ''"
                v-if="selectedClient"
              >
                Počisti
              </button>
            </div>
          </div>
        </div>

        <DataTableServer
          :columns="columns"
          :rows="contracts?.data || []"
          :meta="contracts || {}"
          v-model:search="search"
          route-name="segments.show"
          :route-params="{ segment: segment?.id ?? segment }"
          :query="{ client: selectedClient || undefined }"
          :only-props="['contracts']"
          :page-size-options="[10, 25, 50]"
          empty-text="Ni pogodb v tem segmentu."
          row-key="uuid"
        >
          <template #toolbar-extra>
            <button
              type="button"
              class="inline-flex items-center rounded-md border border-indigo-200 bg-white px-3 py-2 text-sm font-medium text-indigo-700 shadow-sm hover:bg-indigo-50"
              @click="openExportDialog"
            >
              Izvozi v Excel
            </button>
          </template>
          <!-- 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>

          <!-- Client case address -->
          <template #cell-address="{ row }">
            {{ row.client_case?.person?.address?.address || "-" }}
          </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>

    <DialogModal :show="exportDialogOpen" max-width="3xl" @close="closeExportDialog">
      <template #title>
        <div>
          <h3 class="text-lg font-semibold">Izvoz v Excel</h3>
          <p class="text-sm text-gray-500">Izberi stolpce in obseg podatkov za izvoz.</p>
        </div>
      </template>
      <template #content>
        <form id="segment-export-form" class="space-y-6" @submit.prevent="submitExport">
          <div>
            <span class="text-sm font-semibold text-gray-700">Obseg podatkov</span>
            <div class="mt-2 space-y-2">
              <label class="flex items-center gap-2 text-sm text-gray-700">
                <input
                  type="radio"
                  name="scope"
                  value="current"
                  class="text-indigo-600"
                  v-model="exportScope"
                />
                Trenutna stran ({{ currentPageCount }} zapisov)
              </label>
              <label class="flex items-center gap-2 text-sm text-gray-700">
                <input
                  type="radio"
                  name="scope"
                  value="all"
                  class="text-indigo-600"
                  v-model="exportScope"
                />
                Celoten segment ({{ totalContracts }} zapisov)
              </label>
            </div>
          </div>

          <div>
            <div class="flex items-center justify-between">
              <span class="text-sm font-semibold text-gray-700">Stolpci</span>
              <label class="flex items-center gap-2 text-xs text-gray-600">
                <input
                  type="checkbox"
                  :checked="allColumnsSelected"
                  @change="toggleAllColumns($event.target.checked)"
                />
                Označi vse
              </label>
            </div>
            <div class="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2">
              <label
                v-for="col in columns"
                :key="col.key"
                class="flex items-center gap-2 rounded border border-gray-200 px-3 py-2 text-sm"
              >
                <input
                  type="checkbox"
                  name="columns[]"
                  :value="col.key"
                  v-model="exportColumns"
                  class="text-indigo-600"
                />
                {{ col.label }}
              </label>
            </div>
            <p v-if="exportError" class="mt-2 text-sm text-red-600">{{ exportError }}</p>
          </div>
        </form>
      </template>
      <template #footer>
        <div class="flex flex-row gap-2">
          <button
            type="button"
            class="text-sm text-gray-600 hover:text-gray-900"
            @click="closeExportDialog"
          >
            Prekliči
          </button>
          <button
            type="submit"
            form="segment-export-form"
            class="inline-flex items-center rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-60"
            :disabled="exportDisabled"
          >
            <span v-if="!isExporting">Prenesi Excel</span>
            <span v-else>Pripravljam ...</span>
          </button>
        </div>
      </template>
    </DialogModal>
  </AppLayout>
</template>
