<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { ref } from "vue";
import { Link, router, useForm } from "@inertiajs/vue3";
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
import PersonInfoGrid from "@/Components/PersonInfoGrid.vue";
import SectionTitle from "@/Components/SectionTitle.vue";
import Multiselect from "vue-multiselect";
import Dropdown from "@/Components/Dropdown.vue";
import DialogModal from "@/Components/DialogModal.vue";
import InputLabel from "@/Components/InputLabel.vue";

const props = defineProps({
  client: Object,
  contracts: Object,
  filters: Object,
  segments: Object,
  types: Object,
});

const fromDate = ref(props.filters?.from || "");
const toDate = ref(props.filters?.to || "");
const search = ref(props.filters?.search || "");
const selectedSegments = ref(
  props.filters?.segments
    ? props.segments.filter((s) => props.filters.segments.includes(s.id.toString()))
    : []
);
const selectedRows = ref([]);
const showSegmentModal = ref(false);
const targetSegmentId = ref(null);
const segmentForm = useForm({ segment_id: null, contracts: [] });

function toggleSelectAll() {
  if (selectedRows.value.length === props.contracts.data.length) {
    selectedRows.value = [];
  } else {
    selectedRows.value = props.contracts.data.map((row) => row.uuid);
  }
}

function toggleRowSelection(uuid) {
  const index = selectedRows.value.indexOf(uuid);
  if (index > -1) {
    selectedRows.value.splice(index, 1);
  } else {
    selectedRows.value.push(uuid);
  }
}

function isRowSelected(uuid) {
  return selectedRows.value.includes(uuid);
}

function isAllSelected() {
  return (
    props.contracts.data.length > 0 &&
    selectedRows.value.length === props.contracts.data.length
  );
}

function isIndeterminate() {
  return (
    selectedRows.value.length > 0 &&
    selectedRows.value.length < props.contracts.data.length
  );
}

function openSegmentModal() {
  if (!selectedRows.value.length) return;
  targetSegmentId.value = null;
  showSegmentModal.value = true;
}

function submitSegment() {
  if (!targetSegmentId.value || !selectedRows.value.length) return;
  segmentForm.segment_id = targetSegmentId.value;
  segmentForm.contracts = [...selectedRows.value];
  segmentForm.patch(route("contracts.segment"), {
    preserveScroll: true,
    onSuccess: () => {
      showSegmentModal.value = false;
      selectedRows.value = [];
      router.reload({ only: ["contracts"] });
    },
  });
}
function applyDateFilter() {
  const params = Object.fromEntries(
    new URLSearchParams(window.location.search).entries()
  );
  if (fromDate.value) {
    params.from = fromDate.value;
  } else {
    delete params.from;
  }
  if (toDate.value) {
    params.to = toDate.value;
  } else {
    delete params.to;
  }
  if (search.value && search.value.trim() !== "") {
    params.search = search.value.trim();
  } else {
    delete params.search;
  }
  if (selectedSegments.value && selectedSegments.value.length > 0) {
    params.segments = selectedSegments.value.map((s) => s.id).join(",");
  } else {
    delete params.segments;
  }
  delete params.page;
  router.get(route("client.contracts", { uuid: props.client.uuid }), params, {
    preserveState: true,
    replace: true,
    preserveScroll: true,
  });
}

function clearDateFilter() {
  fromDate.value = "";
  toDate.value = "";
  selectedSegments.value = [];
  applyDateFilter();
}

// Search handled by DataTableServer toolbar; keep date filter applying

// Build params for navigating to client case show, including active segment if available
function caseShowParams(contract) {
  const params = { client_case: contract?.client_case?.uuid };
  const segId = contract?.segments?.[0]?.id;
  if (segId) {
    params.segment = segId;
  }
  return params;
}

// Format YYYY-MM-DD (or ISO date) to dd.mm.yyyy
function formatDate(value) {
  if (!value) return "-";
  try {
    const iso = String(value).split("T")[0];
    const parts = iso.split("-");
    if (parts.length !== 3) return value;
    const [y, m, d] = parts;
    return `${d.padStart(2, "0")}.${m.padStart(2, "0")}.${y}`;
  } catch (e) {
    return value;
  }
}
</script>

<template>
  <AppLayout title="Pogodbe">
    <template #header></template>
    <!-- Header card (matches Client/Show header style) -->
    <div class="pt-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div
          class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-blue-400"
        >
          <div class="mx-auto max-w-4x1 p-3">
            <div class="flex items-center justify-between">
              <SectionTitle>
                <template #title>
                  {{ client.person.full_name }}
                </template>
              </SectionTitle>
            </div>
            <nav class="mt-2 border-b border-gray-200">
              <ul class="flex gap-6 -mb-px">
                <li>
                  <Link
                    :href="route('client.show', { uuid: client.uuid })"
                    :class="[
                      'inline-flex items-center px-3 py-2 text-sm font-medium border-b-2',
                      route().current('client.show')
                        ? 'text-indigo-600 border-indigo-600'
                        : 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300',
                    ]"
                  >
                    Primeri
                  </Link>
                </li>
                <li>
                  <Link
                    :href="route('client.contracts', { uuid: client.uuid })"
                    :class="[
                      'inline-flex items-center px-3 py-2 text-sm font-medium border-b-2',
                      route().current('client.contracts')
                        ? 'text-indigo-600 border-indigo-600'
                        : 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300',
                    ]"
                  >
                    Pogodbe
                  </Link>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>

    <!-- Client details card (separate container) -->
    <div class="pt-1">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div
          class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-blue-400"
        >
          <div class="mx-auto max-w-4x1 px-2">
            <PersonInfoGrid :types="types" :person="client.person" />
          </div>
        </div>
      </div>
    </div>

    <!-- Contracts list card -->
    <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">
            <!-- Filters Section -->
            <div class="bg-gray-50 rounded-lg border border-gray-200 p-3 mb-4">
              <div class="flex flex-wrap items-center gap-x-6 gap-y-3">
                <!-- Date Range -->
                <div class="flex flex-col gap-3">
                  <InputLabel value="Datum začetka" />
                  <div class="flex items-center gap-2">
                    <span class="text-xs text-gray-500">Od</span>
                    <input
                      type="date"
                      v-model="fromDate"
                      @change="applyDateFilter"
                      class="rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm py-1.5"
                    />
                    <span class="text-xs text-gray-500">Do</span>
                    <input
                      type="date"
                      v-model="toDate"
                      @change="applyDateFilter"
                      class="rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm py-1.5"
                    />
                  </div>
                </div>

                <!-- Segments -->
                <div class="flex flex-col gap-3">
                  <InputLabel for="segmentSelect" value="Segmenti" />
                  <Multiselect
                    v-model="selectedSegments"
                    :options="segments"
                    :multiple="true"
                    :close-on-select="false"
                    :clear-on-select="false"
                    :preserve-search="true"
                    :taggable="true"
                    :append-to-body="true"
                    placeholder="Izberi segmente"
                    label="name"
                    track-by="id"
                    id="segmentSelect"
                    :preselect-first="false"
                    @update:modelValue="applyDateFilter"
                    class="w-80"
                  >
                  </Multiselect>
                </div>

                <!-- Clear Button -->
                <button
                  type="button"
                  class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition ml-auto"
                  :disabled="!fromDate && !toDate && selectedSegments.length === 0"
                  @click="clearDateFilter"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-4 w-4 mr-1.5"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M6 18L18 6M6 6l12 12"
                    />
                  </svg>
                  Počisti filtre
                </button>
              </div>
            </div>
            <DataTableServer
              class="mt-3"
              :columns="[
                { key: 'select', label: '', sortable: false, width: '50px' },
                { key: 'reference', label: 'Referenca', sortable: false },
                { key: 'customer', label: 'Stranka', sortable: false },
                { key: 'start', label: 'Začetek', sortable: false },
                { key: 'segment', label: 'Segment', sortable: false },
                { key: 'balance', label: 'Stanje', sortable: false, align: 'right' },
              ]"
              :rows="contracts.data || []"
              :meta="{
                current_page: contracts.current_page,
                per_page: contracts.per_page,
                total: contracts.total,
                last_page: contracts.last_page,
              }"
              route-name="client.contracts"
              :route-params="{ uuid: client.uuid }"
              :query="{
                from: fromDate || undefined,
                to: toDate || undefined,
                segments:
                  selectedSegments.length > 0
                    ? selectedSegments.map((s) => s.id).join(',')
                    : undefined,
              }"
              :search="search"
              row-key="uuid"
              :only-props="['contracts']"
            >
              <template #toolbar-extra>
                <div v-if="selectedRows.length" class="flex items-center gap-2">
                  <div class="text-sm text-gray-700">
                    Izbrano: <span class="font-medium">{{ selectedRows.length }}</span>
                  </div>
                  <Dropdown width="48" align="left">
                    <template #trigger>
                      <button
                        type="button"
                        class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md border border-gray-300 text-gray-700 bg-white hover:bg-gray-50"
                      >
                        Akcije
                        <svg
                          class="ml-1 h-4 w-4"
                          viewBox="0 0 20 20"
                          fill="currentColor"
                          aria-hidden="true"
                        >
                          <path
                            fill-rule="evenodd"
                            d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z"
                            clip-rule="evenodd"
                          />
                        </svg>
                      </button>
                    </template>
                    <template #content>
                      <button
                        type="button"
                        class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                        @click="openSegmentModal"
                      >
                        Preusmeri v segment
                      </button>
                    </template>
                  </Dropdown>
                </div>
              </template>
              <template #header-select>
                <input
                  type="checkbox"
                  :checked="isAllSelected()"
                  :indeterminate="isIndeterminate()"
                  @change="toggleSelectAll"
                  class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                />
              </template>
              <template #cell-select="{ row }">
                <input
                  type="checkbox"
                  :checked="isRowSelected(row.uuid)"
                  @change="toggleRowSelection(row.uuid)"
                  class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                />
              </template>
              <template #cell-reference="{ row }">
                <Link
                  :href="route('clientCase.show', caseShowParams(row))"
                  class="text-indigo-600 hover:underline"
                >
                  {{ row.reference }}
                </Link>
              </template>
              <template #cell-customer="{ row }">
                {{ row.client_case?.person?.full_name || "-" }}
              </template>
              <template #cell-start="{ row }">
                {{ formatDate(row.start_date) }}
              </template>
              <template #cell-segment="{ row }">
                {{ row.segments?.[0]?.name || "-" }}
              </template>
              <template #cell-balance="{ row }">
                <div class="text-right">
                  {{
                    new Intl.NumberFormat("sl-SI", {
                      style: "currency",
                      currency: "EUR",
                    }).format(Number(row.account?.balance_amount ?? 0))
                  }}
                </div>
              </template>
              <template #empty>
                <div class="p-6 text-center text-gray-500">Ni zadetkov.</div>
              </template>
            </DataTableServer>

            <!-- Segment Reassignment Modal -->
            <DialogModal :show="showSegmentModal" @close="showSegmentModal = false">
              <template #title> Preusmeri v segment </template>
              <template #content>
                <div class="space-y-3">
                  <div class="text-sm text-gray-600">
                    Število izbranih pogodb:
                    <span class="font-medium">{{ selectedRows.length }}</span>
                  </div>
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1"
                      >Ciljni segment</label
                    >
                    <select
                      v-model="targetSegmentId"
                      class="w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm"
                    >
                      <option :value="null" disabled>Izberi segment</option>
                      <option v-for="seg in segments" :key="seg.id" :value="seg.id">
                        {{ seg.name }}
                      </option>
                    </select>
                    <div
                      v-if="segmentForm.errors.segment_id"
                      class="mt-1 text-sm text-red-600"
                    >
                      {{ segmentForm.errors.segment_id }}
                    </div>
                  </div>
                </div>
              </template>
              <template #footer>
                <button
                  type="button"
                  class="px-3 py-1.5 text-sm rounded-md border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 mr-2"
                  @click="showSegmentModal = false"
                >
                  Prekliči
                </button>
                <button
                  type="button"
                  class="px-3 py-1.5 text-sm rounded-md bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50"
                  :disabled="
                    !targetSegmentId || !selectedRows.length || segmentForm.processing
                  "
                  @click="submitSegment"
                >
                  Potrdi
                </button>
              </template>
            </DialogModal>
          </div>
          <!-- Pagination handled by DataTableServer -->
        </div>
      </div>
    </div>
  </AppLayout>
</template>
