<script setup>
import {
  FwbTable,
  FwbTableHead,
  FwbTableHeadCell,
  FwbTableBody,
  FwbTableRow,
  FwbTableCell,
} from "flowbite-vue";
import Dropdown from "@/Components/Dropdown.vue";
import CaseObjectCreateDialog from "./CaseObjectCreateDialog.vue";
import CaseObjectsDialog from "./CaseObjectsDialog.vue";
import PaymentDialog from "./PaymentDialog.vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import ViewPaymentsDialog from "./ViewPaymentsDialog.vue";
import {
  faCircleInfo,
  faClock,
  faEllipsisVertical,
  faPenToSquare,
  faTrash,
  faListCheck,
  faPlus,
  faBoxArchive,
  faFileWord,
  faSpinner,
  faTags,
} from "@fortawesome/free-solid-svg-icons";

const props = defineProps({
  client: { type: Object, default: null },
  client_case: Object,
  contract_types: Array,
  contracts: { type: Array, default: () => [] },
  segments: { type: Array, default: () => [] },
  all_segments: { type: Array, default: () => [] },
  templates: { type: Array, default: () => [] }, // active document templates (latest per slug)
  edit: { type: Boolean, default: () => false },
});

// Debug: log incoming contract balances (remove after fix)
try {
  console.debug(
    "Contracts received (balances):",
    props.contracts.map((c) => ({ ref: c.reference, bal: c?.account?.balance_amount }))
  );
} catch (e) {}

const emit = defineEmits(["edit", "delete", "add-activity"]);

const formatDate = (d) => {
  if (!d) return "-";
  const dt = new Date(d);
  return isNaN(dt.getTime()) ? "-" : dt.toLocaleDateString("de");
};

const hasDesc = (c) => {
  const d = c?.description;
  return typeof d === "string" && d.trim().length > 0;
};

// Meta helpers
const formatMetaDate = (v) => {
  if (!v) {
    return "-";
  }
  const d = new Date(v);
  if (isNaN(d.getTime())) {
    return String(v);
  }
  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}`;
};

const formatMetaNumber = (v) => {
  if (v === null || v === undefined || v === "") {
    return "0";
  }
  let n = typeof v === "number" ? v : parseFloat(String(v).replace(",", "."));
  if (isNaN(n)) {
    return String(v);
  }
  const hasDecimal = Math.abs(n % 1) > 0;
  return new Intl.NumberFormat("de-DE", {
    minimumFractionDigits: hasDecimal ? 2 : 0,
    maximumFractionDigits: hasDecimal ? 2 : 0,
  }).format(n);
};

const formatMetaValue = (entry) => {
  const value = entry?.value;
  const type = entry?.type;
  if (value === null || value === undefined || String(value).trim() === "") {
    return "-";
  }
  if (type === "date") {
    return formatMetaDate(value);
  }
  if (type === "number") {
    return formatMetaNumber(value);
  }
  if (typeof value === "number") {
    return formatMetaNumber(value);
  }
  return String(value);
};

const getMetaEntries = (c) => {
  const meta = c?.meta;
  const results = [];
  const visit = (node, keyName) => {
    if (node === null || node === undefined) {
      return;
    }
    if (Array.isArray(node)) {
      node.forEach((el) => visit(el));
      return;
    }
    if (typeof node === "object") {
      const hasValue = Object.prototype.hasOwnProperty.call(node, "value");
      const hasTitle = Object.prototype.hasOwnProperty.call(node, "title");
      if (hasValue || hasTitle) {
        const title =
          (node.title || keyName || "").toString().trim() || keyName || "Meta";
        results.push({ title, value: node.value, type: node.type });
        return;
      }
      for (const [k, v] of Object.entries(node)) {
        visit(v, k);
      }
      return;
    }
    if (keyName) {
      results.push({ title: keyName, value: node });
    }
  };
  visit(meta, undefined);
  return results.filter(
    (e) =>
      e.title &&
      e.value !== null &&
      e.value !== undefined &&
      String(e.value).trim() !== ""
  );
};

const hasMeta = (c) => getMetaEntries(c).length > 0;

const onEdit = (c) => emit("edit", c);
const onDelete = (c) => emit("delete", c);
const onAddActivity = (c) => emit("add-activity", c);

// CaseObject dialog state
import { ref, computed } from "vue";
import { router, useForm } from "@inertiajs/vue3";
import DialogModal from "@/Components/DialogModal.vue";
// Document generation state/dialog
const generating = ref({}); // contract_uuid => boolean
const generatedDocs = ref({}); // contract_uuid => { uuid, path }
const generationError = ref({}); // contract_uuid => message
const showGenerateDialog = ref(false);
const generateFor = ref(null); // selected contract
const selectedTemplateSlug = ref(null);
const templateTokens = ref([]);
const templateCustomDefaults = ref({});
const templateCustomTypes = ref({});
const customInputs = ref({}); // { key: value } for custom.* tokens
// Separate selectors for address overrides
const clientAddressSource = ref("client"); // for client.person.person_address.*
const personAddressSource = ref("case_person"); // for person.person_address.*

const clientAddress = computed(() => {
  const addr = props.client?.person?.addresses?.[0] || null;
  return addr
    ? {
        address: addr.address || "",
        post_code: addr.post_code || "",
        city: addr.city || "",
      }
    : { address: "", post_code: "", city: "" };
});
const casePersonAddress = computed(() => {
  const addr = props.client_case?.person?.addresses?.[0] || null;
  return addr
    ? {
        address: addr.address || "",
        post_code: addr.post_code || "",
        city: addr.city || "",
      }
    : { address: "", post_code: "", city: "" };
});

const customTokenList = computed(() =>
  (templateTokens.value || []).filter((t) => t.startsWith("custom."))
);

function openGenerateDialog(c) {
  generateFor.value = c;
  // Prefer a template that actually has tokens; fallback to the first available
  const first =
    (props.templates || []).find(
      (t) => Array.isArray(t?.tokens) && t.tokens.length > 0
    ) ||
    (props.templates || [])[0] ||
    null;
  selectedTemplateSlug.value = first?.slug || null;
  templateTokens.value = Array.isArray(first?.tokens) ? first.tokens : [];
  templateCustomDefaults.value = (first?.meta && first.meta.custom_defaults) || {};
  templateCustomTypes.value = (first?.meta && first.meta.custom_default_types) || {};
  // Prefill customs with defaults
  customInputs.value = {};
  for (const t of customTokenList.value) {
    const key = t.replace(/^custom\./, "");
    customInputs.value[key] = templateCustomDefaults.value?.[key] ?? "";
  }
  clientAddressSource.value = "client";
  personAddressSource.value = "case_person";
  showGenerateDialog.value = true;
}

function onTemplateChange() {
  const tpl = (props.templates || []).find((t) => t.slug === selectedTemplateSlug.value);
  templateTokens.value = Array.isArray(tpl?.tokens) ? tpl.tokens : [];
  templateCustomDefaults.value = (tpl?.meta && tpl.meta.custom_defaults) || {};
  templateCustomTypes.value = (tpl?.meta && tpl.meta.custom_default_types) || {};
  // reset customs
  customInputs.value = {};
  for (const t of customTokenList.value) {
    const key = t.replace(/^custom\./, "");
    customInputs.value[key] = templateCustomDefaults.value?.[key] ?? "";
  }
}

async function submitGenerate() {
  const c = generateFor.value;
  if (!c?.uuid || generating.value[c.uuid]) return;
  const tpl = (props.templates || []).find((t) => t.slug === selectedTemplateSlug.value);
  if (!tpl) return;
  generating.value[c.uuid] = true;
  generationError.value[c.uuid] = null;
  try {
    const clientAddr =
      clientAddressSource.value === "case_person"
        ? casePersonAddress.value
        : clientAddress.value;
    const personAddr =
      personAddressSource.value === "case_person"
        ? casePersonAddress.value
        : clientAddress.value;
    const token_overrides = {
      "client.person.person_address.address": clientAddr.address,
      "client.person.person_address.post_code": clientAddr.post_code,
      "client.person.person_address.city": clientAddr.city,
      "person.person_address.address": personAddr.address,
      "person.person_address.post_code": personAddr.post_code,
      "person.person_address.city": personAddr.city,
    };
    const payload = {
      template_slug: tpl.slug,
      template_version: tpl.version,
      custom: { ...customInputs.value },
      token_overrides,
      unresolved_policy: "fail",
    };
    await router.post(
      route("contracts.generate-document", { contract: c.uuid }),
      payload,
      {
        preserveScroll: true,
        onSuccess: () => {
          // Close dialog and refresh documents list
          generationError.value[c.uuid] = null;
          showGenerateDialog.value = false;
          router.reload({ only: ["documents"] });
        },
        onError: () => {
          // Typically 422 validation-like errors
          generationError.value[c.uuid] = "Manjkajoči tokeni v predlogi.";
        },
      }
    );
  } catch (e) {
    generationError.value[c.uuid] = "Neuspešno generiranje.";
  } finally {
    generating.value[c.uuid] = false;
  }
}
function closeGenerateDialog() {
  showGenerateDialog.value = false;
  generateFor.value = null;
}
const showObjectDialog = ref(false);
const showObjectsList = ref(false);
const selectedContract = ref(null);
const openObjectDialog = (c) => {
  selectedContract.value = c;
  showObjectDialog.value = true;
};
const closeObjectDialog = () => {
  showObjectDialog.value = false;
  selectedContract.value = null;
};
const openObjectsList = (c) => {
  selectedContract.value = c;
  showObjectsList.value = true;
};
const closeObjectsList = () => {
  showObjectsList.value = false;
  selectedContract.value = null;
};

// Promise date helpers
const todayStr = computed(() => {
  const d = new Date();
  const yyyy = d.getFullYear();
  const mm = String(d.getMonth() + 1).padStart(2, "0");
  const dd = String(d.getDate()).padStart(2, "0");
  return `${yyyy}-${mm}-${dd}`;
});

const getPromiseDate = (c) => c?.account?.promise_date || null;
const promiseStatus = (c) => {
  const p = getPromiseDate(c);
  if (!p) return null;
  if (p > todayStr.value) return "future";
  if (p === todayStr.value) return "today";
  return "past";
};
const promiseColorClass = (c) => {
  const s = promiseStatus(c);
  if (s === "future") return "text-green-600";
  if (s === "today") return "text-yellow-500";
  if (s === "past") return "text-red-600";
  return "text-gray-400";
};

// Segment helpers
const contractActiveSegment = (c) => {
  const arr = c?.segments || [];
  return arr.find((s) => s.pivot?.active) || arr[0] || null;
};
const segmentName = (id) => props.segments.find((s) => s.id === id)?.name || "";
// Sorted segment lists for dropdowns
const sortedSegments = computed(() => {
  const list = Array.isArray(props.segments) ? [...props.segments] : [];
  return list.sort((a, b) => a.name.localeCompare(b.name, "sl", { sensitivity: "base" }));
});
const sortedAllSegments = computed(() => {
  const list = Array.isArray(props.all_segments) ? [...props.all_segments] : [];
  return list.sort((a, b) => a.name.localeCompare(b.name, "sl", { sensitivity: "base" }));
});
const confirmChange = ref({
  show: false,
  contract: null,
  segmentId: null,
  fromAll: false,
});
const askChangeSegment = (c, segmentId, fromAll = false) => {
  // Prevent segment change for archived contracts
  if (!c?.active) {
    return;
  }
  confirmChange.value = { show: true, contract: c, segmentId, fromAll };
};
const closeConfirm = () => {
  confirmChange.value = { show: false, contract: null, segmentId: null };
};
const doChangeSegment = () => {
  const { contract, segmentId, fromAll } = confirmChange.value;
  if (!contract || !segmentId) return closeConfirm();
  if (fromAll) {
    router.post(
      route("clientCase.segments.attach", props.client_case),
      {
        segment_id: segmentId,
        contract_uuid: contract.uuid,
        make_active_for_contract: true,
      },
      {
        preserveScroll: true,
        only: ["contracts", "segments"],
        onFinish: () => closeConfirm(),
      }
    );
  } else {
    router.post(
      route("clientCase.contract.updateSegment", {
        client_case: props.client_case.uuid,
        uuid: contract.uuid,
      }),
      { segment_id: segmentId },
      {
        preserveScroll: true,
        only: ["contracts"],
        onFinish: () => closeConfirm(),
      }
    );
  }
};

// Add Payment modal state
const showPaymentDialog = ref(false);
const paymentContract = ref(null);
const paymentForm = useForm({
  amount: null,
  currency: "EUR",
  paid_at: null,
  reference: "",
});
const openPaymentDialog = (c) => {
  paymentContract.value = c;
  paymentForm.reset();
  paymentForm.paid_at = todayStr.value;
  showPaymentDialog.value = true;
};
const closePaymentDialog = () => {
  showPaymentDialog.value = false;
  paymentContract.value = null;
};
const submitPayment = () => {
  if (!paymentContract.value?.account?.id) {
    return;
  }
  const accountId = paymentContract.value.account.id;
  paymentForm.post(route("accounts.payments.store", { account: accountId }), {
    preserveScroll: true,
    onSuccess: () => {
      closePaymentDialog();
      // Reload contracts and activities (new payment may create an activity)
      router.reload({ only: ["contracts", "activities"] });
    },
  });
};

// View Payments dialog state
const showPaymentsDialog = ref(false);
const openPaymentsDialog = (c) => {
  selectedContract.value = c;
  showPaymentsDialog.value = true;
};
const closePaymentsDialog = () => {
  showPaymentsDialog.value = false;
  selectedContract.value = null;
};
</script>

<template>
  <div
    class="relative overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm"
  >
    <FwbTable hoverable striped class="text-sm">
      <FwbTableHead
        class="sticky top-0 z-10 bg-gray-50/90 backdrop-blur border-b border-gray-200 shadow-sm"
      >
        <FwbTableHeadCell
          class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3"
          >Ref.
        </FwbTableHeadCell>
        <FwbTableHeadCell
          class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3"
          >Datum začetka
        </FwbTableHeadCell>
        <FwbTableHeadCell
          class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3"
          >Tip
        </FwbTableHeadCell>
        <FwbTableHeadCell
          class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3"
          >Segment
        </FwbTableHeadCell>
        <FwbTableHeadCell
          class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3 text-right"
        >
          Predano</FwbTableHeadCell
        >
        <FwbTableHeadCell
          class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3 text-right"
        >
          Odprto</FwbTableHeadCell
        >
        <FwbTableHeadCell
          class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3 text-center"
        >
          Opis</FwbTableHeadCell
        >
        <FwbTableHeadCell class="w-px" v-if="edit" />
      </FwbTableHead>
      <FwbTableBody>
        <template v-for="(c, i) in contracts" :key="c.uuid || i">
          <FwbTableRow>
            <FwbTableCell>{{ c.reference }}</FwbTableCell>
            <FwbTableCell>{{ formatDate(c.start_date) }}</FwbTableCell>
            <FwbTableCell>{{ c?.type?.name }}</FwbTableCell>
            <FwbTableCell>
              <div class="flex items-center gap-2">
                <span class="text-gray-700">{{
                  contractActiveSegment(c)?.name || "-"
                }}</span>
                <Dropdown align="left" v-if="edit">
                  <template #trigger>
                    <button
                      type="button"
                      class="inline-flex items-center justify-center h-7 w-7 rounded-full hover:bg-gray-100"
                      :class="{
                        'opacity-50 cursor-not-allowed':
                          !segments || segments.length === 0 || !c.active,
                      }"
                      :title="
                        !c.active
                          ? 'Segmenta ni mogoče spremeniti za arhivirano pogodbo'
                          : segments && segments.length
                          ? 'Spremeni segment'
                          : 'Ni segmentov na voljo za ta primer'
                      "
                      :disabled="!c.active || !segments || !segments.length"
                    >
                      <FontAwesomeIcon
                        :icon="faPenToSquare"
                        class="h-4 w-4 text-gray-600"
                      />
                    </button>
                  </template>
                  <template #content>
                    <div class="py-1">
                      <template v-if="segments && segments.length">
                        <button
                          v-for="s in sortedSegments"
                          :key="s.id"
                          type="button"
                          class="w-full px-3 py-1.5 text-left text-sm hover:bg-gray-50"
                          @click="askChangeSegment(c, s.id)"
                        >
                          <span>{{ s.name }}</span>
                        </button>
                      </template>
                      <template v-else>
                        <template v-if="all_segments && all_segments.length">
                          <div class="px-3 py-2 text-xs text-gray-500">
                            Ni segmentov v tem primeru. Dodaj in nastavi segment:
                          </div>
                          <button
                            v-for="s in sortedAllSegments"
                            :key="s.id"
                            type="button"
                            class="w-full px-3 py-1.5 text-left text-sm hover:bg-gray-50"
                            @click="askChangeSegment(c, s.id, true)"
                          >
                            <span>{{ s.name }}</span>
                          </button>
                        </template>
                        <template v-else>
                          <div class="px-3 py-2 text-sm text-gray-500">
                            Ni konfiguriranih segmentov.
                          </div>
                        </template>
                      </template>
                    </div>
                  </template>
                </Dropdown>
                <span
                  v-if="!c.active"
                  class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold bg-gray-200 text-gray-700 uppercase tracking-wide"
                  >Arhivirano</span
                >
              </div>
            </FwbTableCell>
            <FwbTableCell class="text-right">{{
              Intl.NumberFormat("de-DE", {
                style: "currency",
                currency: "EUR",
              }).format(c?.account?.initial_amount ?? 0)
            }}</FwbTableCell>
            <FwbTableCell class="text-right">{{
              Intl.NumberFormat("de-DE", {
                style: "currency",
                currency: "EUR",
              }).format(c?.account?.balance_amount ?? 0)
            }}</FwbTableCell>
            <FwbTableCell class="text-center">
              <div class="inline-flex items-center justify-center gap-0.5">
                <Dropdown align="right">
                  <template #trigger>
                    <button
                      type="button"
                      class="inline-flex items-center justify-center h-5 w-5 rounded-full"
                      :title="'Pokaži opis'"
                      :disabled="!hasDesc(c)"
                      :class="
                        hasDesc(c)
                          ? 'hover:bg-gray-100 focus:outline-none'
                          : 'text-gray-400'
                      "
                    >
                      <FontAwesomeIcon
                        :icon="faCircleInfo"
                        class="h-4 w-4"
                        :class="hasDesc(c) ? 'text-gray-700' : 'text-gray-400'"
                      />
                    </button>
                  </template>
                  <template #content>
                    <div
                      class="max-w-sm px-3 py-2 text-sm text-gray-700 whitespace-pre-wrap"
                    >
                      {{ c.description }}
                    </div>
                  </template>
                </Dropdown>

                <!-- Meta data dropdown -->
                <Dropdown align="right">
                  <template #trigger>
                    <button
                      type="button"
                      class="inline-flex items-center justify-center h-5 w-5 rounded-full"
                      :title="'Pokaži meta'"
                      :disabled="!hasMeta(c)"
                      :class="
                        hasMeta(c)
                          ? 'hover:bg-gray-100 focus:outline-none'
                          : 'text-gray-400'
                      "
                    >
                      <FontAwesomeIcon
                        :icon="faTags"
                        class="h-4 w-4"
                        :class="hasMeta(c) ? 'text-gray-700' : 'text-gray-400'"
                      />
                    </button>
                  </template>
                  <template #content>
                    <div class="max-w-sm px-3 py-2 text-sm text-gray-700">
                      <template v-if="hasMeta(c)">
                        <div
                          v-for="(m, idx) in getMetaEntries(c)"
                          :key="idx"
                          class="flex items-start gap-2 py-0.5"
                        >
                          <span class="text-gray-500 whitespace-nowrap"
                            >{{ m.title }}:</span
                          >
                          <span class="text-gray-800">{{ formatMetaValue(m) }}</span>
                        </div>
                      </template>
                      <template v-else>
                        <div class="text-gray-500">Ni meta podatkov.</div>
                      </template>
                    </div>
                  </template>
                </Dropdown>

                <!-- Promise date indicator -->
                <Dropdown align="right">
                  <template #trigger>
                    <button
                      type="button"
                      class="inline-flex items-center justify-center h-5 w-5 rounded-full hover:bg-gray-100 focus:outline-none"
                      :title="
                        getPromiseDate(c)
                          ? 'Obljubljen datum plačila'
                          : 'Ni obljubljenega datuma'
                      "
                      :disabled="!getPromiseDate(c)"
                    >
                      <FontAwesomeIcon
                        :icon="faClock"
                        class="h-4 w-4"
                        :class="promiseColorClass(c)"
                      />
                    </button>
                  </template>
                  <template #content>
                    <div class="px-3 py-2 text-sm text-gray-700">
                      <div class="flex items-center gap-2">
                        <FontAwesomeIcon
                          :icon="faClock"
                          class="h-4 w-4"
                          :class="promiseColorClass(c)"
                        />
                        <span class="font-medium">Obljubljeno plačilo</span>
                      </div>
                      <div class="mt-1">
                        <span class="text-gray-500">Datum:</span>
                        <span class="ml-1">{{ formatDate(getPromiseDate(c)) }}</span>
                      </div>
                      <div class="mt-1" v-if="promiseStatus(c) === 'future'">
                        <span class="text-green-600">V prihodnosti</span>
                      </div>
                      <div class="mt-1" v-else-if="promiseStatus(c) === 'today'">
                        <span class="text-yellow-600">Danes</span>
                      </div>
                      <div class="mt-1" v-else-if="promiseStatus(c) === 'past'">
                        <span class="text-red-600">Zapadlo</span>
                      </div>
                      <div class="mt-1 text-gray-500" v-else>
                        Ni nastavljenega datuma.
                      </div>
                    </div>
                  </template>
                </Dropdown>
              </div>
            </FwbTableCell>
            <FwbTableCell class="text-right whitespace-nowrap" v-if="edit">
              <Dropdown align="right" width="56">
                <template #trigger>
                  <button
                    type="button"
                    class="inline-flex items-center justify-center h-5 w-5 rounded-full hover:bg-gray-100 focus:outline-none"
                    :title="'Dejanja'"
                  >
                    <FontAwesomeIcon
                      :icon="faEllipsisVertical"
                      class="h-4 w-4 text-gray-700"
                    />
                  </button>
                </template>
                <template #content>
                  <!-- Urejanje -->
                  <div
                    class="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wide text-gray-400"
                  >
                    Urejanje
                  </div>
                  <button
                    type="button"
                    class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
                    v-if="c.active"
                    @click="onEdit(c)"
                  >
                    <FontAwesomeIcon
                      :icon="faPenToSquare"
                      class="h-4 w-4 text-gray-600"
                    />
                    <span>Uredi</span>
                  </button>
                  <button
                    type="button"
                    class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
                    v-if="c.active"
                    @click="onAddActivity(c)"
                  >
                    <FontAwesomeIcon :icon="faListCheck" class="h-4 w-4 text-gray-600" />
                    <span>Dodaj aktivnost</span>
                  </button>

                  <div class="my-1 border-t border-gray-100" />
                  <!-- Dokumenti -->
                  <div
                    class="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wide text-gray-400"
                  >
                    Dokument
                  </div>
                  <button
                    type="button"
                    class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
                    :disabled="generating[c.uuid] || !templates || templates.length === 0"
                    @click="openGenerateDialog(c)"
                  >
                    <FontAwesomeIcon
                      :icon="generating[c.uuid] ? faSpinner : faFileWord"
                      class="h-4 w-4 text-gray-600"
                      :class="generating[c.uuid] ? 'animate-spin' : ''"
                    />
                    <span>{{
                      generating[c.uuid]
                        ? "Generiranje..."
                        : templates && templates.length
                        ? "Generiraj dokument"
                        : "Ni predlog"
                    }}</span>
                  </button>
                  <a
                    v-if="generatedDocs[c.uuid]?.path"
                    :href="'/storage/' + generatedDocs[c.uuid].path"
                    target="_blank"
                    class="w-full px-3 py-2 text-left text-sm text-indigo-600 hover:bg-indigo-50 flex items-center gap-2"
                  >
                    <FontAwesomeIcon :icon="faFileWord" class="h-4 w-4" />
                    <span>Prenesi zadnji</span>
                  </a>
                  <div
                    v-if="generationError[c.uuid]"
                    class="px-3 py-2 text-xs text-rose-600 whitespace-pre-wrap"
                  >
                    {{ generationError[c.uuid] }}
                  </div>
                  <div class="my-1 border-t border-gray-100" />
                  <!-- Predmeti -->
                  <div
                    class="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wide text-gray-400"
                  >
                    Predmeti
                  </div>
                  <button
                    type="button"
                    class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
                    @click="openObjectsList(c)"
                  >
                    <FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4 text-gray-600" />
                    <span>Seznam predmetov</span>
                  </button>
                  <button
                    type="button"
                    class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
                    v-if="c.active"
                    @click="openObjectDialog(c)"
                  >
                    <FontAwesomeIcon :icon="faPlus" class="h-4 w-4 text-gray-600" />
                    <span>Dodaj predmet</span>
                  </button>

                  <div class="my-1 border-t border-gray-100" />
                  <!-- Plačila -->
                  <div
                    class="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wide text-gray-400"
                  >
                    Plačila
                  </div>
                  <button
                    type="button"
                    class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
                    @click="openPaymentsDialog(c)"
                  >
                    <FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4 text-gray-600" />
                    <span>Pokaži plačila</span>
                  </button>
                  <button
                    type="button"
                    class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
                    v-if="c.active && c?.account"
                    @click="openPaymentDialog(c)"
                  >
                    <FontAwesomeIcon :icon="faPlus" class="h-4 w-4 text-gray-600" />
                    <span>Dodaj plačilo</span>
                  </button>

                  <div class="my-1 border-t border-gray-100" />
                  <!-- Arhiviranje / Ponovna aktivacija -->
                  <div
                    class="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wide text-gray-400"
                  >
                    {{ c.active ? "Arhiviranje" : "Ponovna aktivacija" }}
                  </div>
                  <button
                    v-if="c.active"
                    type="button"
                    class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
                    @click="
                      router.post(
                        route('clientCase.contract.archive', {
                          client_case: client_case.uuid,
                          uuid: c.uuid,
                        }),
                        {},
                        {
                          preserveScroll: true,
                          only: ['contracts', 'activities', 'documents'],
                        }
                      )
                    "
                  >
                    <FontAwesomeIcon :icon="faBoxArchive" class="h-4 w-4 text-gray-600" />
                    <span>Arhiviraj</span>
                  </button>
                  <button
                    v-else
                    type="button"
                    class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
                    @click="
                      router.post(
                        route('clientCase.contract.archive', {
                          client_case: client_case.uuid,
                          uuid: c.uuid,
                        }),
                        { reactivate: true },
                        {
                          preserveScroll: true,
                          only: ['contracts', 'activities', 'documents'],
                        }
                      )
                    "
                  >
                    <FontAwesomeIcon :icon="faBoxArchive" class="h-4 w-4 text-gray-600" />
                    <span>Ponovno aktiviraj</span>
                  </button>
                  <div class="my-1 border-t border-gray-100" />
                  <!-- Destruktivno -->
                  <button
                    type="button"
                    class="w-full px-3 py-2 text-left text-sm text-red-700 hover:bg-red-50 flex items-center gap-2"
                    @click="onDelete(c)"
                  >
                    <FontAwesomeIcon :icon="faTrash" class="h-4 w-4 text-red-600" />
                    <span>Izbriši</span>
                  </button>
                </template>
              </Dropdown>
            </FwbTableCell>
          </FwbTableRow>
        </template>
      </FwbTableBody>
    </FwbTable>
    <div
      v-if="!contracts || contracts.length === 0"
      class="p-6 text-center text-sm text-gray-500"
    >
      No contracts.
    </div>
  </div>
  <!-- Confirm change segment -->
  <div
    v-if="confirmChange.show"
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/30"
  >
    <div class="bg-white rounded-lg shadow-lg p-4 w-full max-w-sm">
      <div class="text-sm text-gray-800">
        Ali želite spremeniti segment za pogodbo
        <span class="font-medium">{{ confirmChange.contract?.reference }}</span
        >?
      </div>
      <div class="mt-4 flex justify-end gap-2">
        <button
          class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300"
          @click="closeConfirm"
        >
          Prekliči
        </button>
        <button
          class="px-4 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700"
          @click="doChangeSegment"
        >
          Potrdi
        </button>
      </div>
    </div>
  </div>
  <CaseObjectCreateDialog
    :show="showObjectDialog"
    @close="closeObjectDialog"
    :client_case="client_case"
    :contract="selectedContract"
  />
  <CaseObjectsDialog
    :show="showObjectsList"
    @close="closeObjectsList"
    :client_case="client_case"
    :contract="selectedContract"
  />

  <PaymentDialog
    :show="showPaymentDialog"
    :form="paymentForm"
    @close="closePaymentDialog"
    @submit="submitPayment"
  />

  <ViewPaymentsDialog
    :show="showPaymentsDialog"
    :contract="selectedContract"
    @close="closePaymentsDialog"
  />

  <!-- Generate document dialog -->
  <DialogModal :show="showGenerateDialog" max-width="4xl" @close="closeGenerateDialog">
    <template #title>Generiraj dokument</template>
    <template #content>
      <div class="space-y-3">
        <div>
          <label class="block text-sm font-medium text-gray-700">Predloga</label>
          <select
            v-model="selectedTemplateSlug"
            @change="onTemplateChange"
            class="mt-1 w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
          >
            <option v-if="!templates || templates.length === 0" :value="null" disabled>
              Ni aktivnih predlog
            </option>
            <option v-for="t in templates" :key="t.slug" :value="t.slug">
              {{ t.name }} ({{ t.version }})
            </option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Naslovi</label>
          <div class="grid grid-cols-2 gap-4">
            <div>
              <div class="text-xs text-gray-500 mb-1">client.person.person_address.*</div>
              <div class="flex items-center gap-3">
                <label class="inline-flex items-center gap-2">
                  <input type="radio" value="client" v-model="clientAddressSource" />
                  <span>Stranka</span>
                </label>
                <label class="inline-flex items-center gap-2">
                  <input type="radio" value="case_person" v-model="clientAddressSource" />
                  <span>Oseba primera</span>
                </label>
              </div>
              <div class="mt-2 grid grid-cols-3 gap-2 text-sm">
                <div>
                  <div class="text-gray-500">Naslov</div>
                  <div class="text-gray-900 truncate">
                    {{
                      (clientAddressSource === "case_person"
                        ? casePersonAddress
                        : clientAddress
                      ).address || "-"
                    }}
                  </div>
                </div>
                <div>
                  <div class="text-gray-500">Pošta</div>
                  <div class="text-gray-900 truncate">
                    {{
                      (clientAddressSource === "case_person"
                        ? casePersonAddress
                        : clientAddress
                      ).post_code || "-"
                    }}
                  </div>
                </div>
                <div>
                  <div class="text-gray-500">Kraj</div>
                  <div class="text-gray-900 truncate">
                    {{
                      (clientAddressSource === "case_person"
                        ? casePersonAddress
                        : clientAddress
                      ).city || "-"
                    }}
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div class="text-xs text-gray-500 mb-1">person.person_address.*</div>
              <div class="flex items-center gap-3">
                <label class="inline-flex items-center gap-2">
                  <input type="radio" value="client" v-model="personAddressSource" />
                  <span>Stranka</span>
                </label>
                <label class="inline-flex items-center gap-2">
                  <input type="radio" value="case_person" v-model="personAddressSource" />
                  <span>Oseba primera</span>
                </label>
              </div>
              <div class="mt-2 grid grid-cols-3 gap-2 text-sm">
                <div>
                  <div class="text-gray-500">Naslov</div>
                  <div class="text-gray-900 truncate">
                    {{
                      (personAddressSource === "case_person"
                        ? casePersonAddress
                        : clientAddress
                      ).address || "-"
                    }}
                  </div>
                </div>
                <div>
                  <div class="text-gray-500">Pošta</div>
                  <div class="text-gray-900 truncate">
                    {{
                      (personAddressSource === "case_person"
                        ? casePersonAddress
                        : clientAddress
                      ).post_code || "-"
                    }}
                  </div>
                </div>
                <div>
                  <div class="text-gray-500">Kraj</div>
                  <div class="text-gray-900 truncate">
                    {{
                      (personAddressSource === "case_person"
                        ? casePersonAddress
                        : clientAddress
                      ).city || "-"
                    }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="customTokenList.length" class="pt-2">
          <div class="text-sm font-medium text-gray-700 mb-1">Dodatna polja</div>
          <div class="space-y-2">
            <div
              v-for="tok in customTokenList"
              :key="tok"
              class="grid grid-cols-3 gap-2 items-start"
            >
              <div class="col-span-1 text-sm text-gray-600">{{ tok }}</div>
              <div class="col-span-2">
                <template
                  v-if="templateCustomTypes[tok.replace(/^custom\./, '')] === 'text'"
                >
                  <textarea
                    class="w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm"
                    rows="3"
                    v-model="customInputs[tok.replace(/^custom\./, '')]"
                    :placeholder="
                      templateCustomDefaults[tok.replace(/^custom\./, '')] ??
                      'privzeta vrednost'
                    "
                  ></textarea>
                </template>
                <template v-else>
                  <input
                    type="text"
                    class="w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
                    v-model="customInputs[tok.replace(/^custom\./, '')]"
                    :placeholder="
                      templateCustomDefaults[tok.replace(/^custom\./, '')] ??
                      'privzeta vrednost'
                    "
                  />
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="generationError[generateFor?.uuid]" class="mt-3 text-sm text-rose-600">
        {{ generationError[generateFor?.uuid] }}
      </div>
    </template>
    <template #footer>
      <button
        class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 mr-2"
        @click="closeGenerateDialog"
      >
        Prekliči
      </button>
      <button
        class="px-4 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700"
        :disabled="!selectedTemplateSlug || generating[generateFor?.uuid]"
        @click="submitGenerate"
      >
        Generiraj
      </button>
    </template>
  </DialogModal>
</template>
