<script setup>
import { ref, computed } from "vue";
import { router, useForm } from "@inertiajs/vue3";
import DataTable from "@/Components/DataTable/DataTableNew2.vue";
import StatusBadge from "@/Components/DataTable/StatusBadge.vue";
import TableActions from "@/Components/DataTable/TableActions.vue";
import ActionMenuItem from "@/Components/DataTable/ActionMenuItem.vue";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu";
import CaseObjectCreateDialog from "./CaseObjectCreateDialog.vue";
import CaseObjectsDialog from "./CaseObjectsDialog.vue";
import PaymentDialog from "./PaymentDialog.vue";
import ViewPaymentsDialog from "./ViewPaymentsDialog.vue";
import ContractMetaEditDialog from "./ContractMetaEditDialog.vue";
import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
import ConfirmationDialog from "@/Components/Dialogs/ConfirmationDialog.vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import {
  faCircleInfo,
  faClock,
  faPenToSquare,
  faTrash,
  faListCheck,
  faPlus,
  faBoxArchive,
  faFileWord,
  faSpinner,
  faTags,
  faFolderOpen,
} from "@fortawesome/free-solid-svg-icons";
import EmptyState from "@/Components/EmptyState.vue";
import { Button } from "@/Components/ui/button";
import { Label } from "@/Components/ui/label";
import { Input } from "@/Components/ui/input";
import { Textarea } from "@/Components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/Components/ui/select";

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: () => [] },
  edit: { type: Boolean, default: () => false },
  createDoc: { type: Boolean, default: () => false },
});

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

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

const formatCurrency = (v) => {
  const n = Number(v ?? 0);
  return new Intl.NumberFormat("de-DE", {
    style: "currency",
    currency: "EUR",
  }).format(n);
};

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;

// Segment helpers
const contractActiveSegment = (c) => {
  const arr = c?.segments || [];
  return arr.find((s) => s.pivot?.active) || arr[0] || null;
};

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) => {
  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(),
      }
    );
  }
};

// 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";
};

// Document generation
const generating = ref({});
const generatedDocs = ref({});
const generationError = ref({});
const showGenerateDialog = ref(false);
const generateFor = ref(null);
const selectedTemplateSlug = ref(null);
const templateTokens = ref([]);
const templateCustomDefaults = ref({});
const templateCustomTypes = ref({});
const customInputs = ref({});
const clientAddressSource = ref("client");
const personAddressSource = ref("case_person");

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;
  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) || {};
  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) || {};
  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: () => {
          generationError.value[c.uuid] = null;
          showGenerateDialog.value = false;
          router.reload({ only: ["documents"] });
        },
        onError: () => {
          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;
}

// Case objects
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;
};

// Payments
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();
      router.reload({ only: ["contracts", "activities"] });
    },
  });
};

const showPaymentsDialog = ref(false);

const openPaymentsDialog = (c) => {
  selectedContract.value = c;
  showPaymentsDialog.value = true;
};

const closePaymentsDialog = () => {
  showPaymentsDialog.value = false;
  selectedContract.value = null;
};

// Meta edit dialog
const showMetaEditDialog = ref(false);

const openMetaEditDialog = (c) => {
  selectedContract.value = c;
  showMetaEditDialog.value = true;
};

const closeMetaEditDialog = () => {
  showMetaEditDialog.value = false;
  selectedContract.value = null;
};

// Columns configuration
const columns = computed(() => [
  { key: "reference", label: "Ref.", sortable: false, align: "center" },
  { key: "start_date", label: "Datum začetka", sortable: false },
  { key: "type", label: "Tip", sortable: false },
  { key: "segment", label: "Segment", sortable: false },
  { key: "initial_amount", label: "Predano", sortable: false, align: "right" },
  { key: "balance_amount", label: "Odprto", sortable: false, align: "right" },
  { key: "meta_info", label: "Opis", sortable: false, align: "center" },
  { key: "actions", label: "", sortable: false, hideable: false, align: "center" },
]);

const onEdit = (c) => emit("edit", c);
const onDelete = (c) => emit("delete", c);
const onAddActivity = (c) => emit("add-activity", c);
const onCreate = () => emit("create");
const onAttachSegment = () => emit("attach-segment");

const availableSegmentsCount = computed(() => {
  const current = new Set((props.segments || []).map((s) => s.id));
  return (props.all_segments || []).filter((s) => !current.has(s.id)).length;
});
</script>

<template>
  <div>
    <DataTable
      :columns="columns"
      :data="contracts"
      :empty-icon="faFolderOpen"
      empty-text="Ni pogodb"
      empty-description="Za ta primer še ni ustvarjenih pogodb. Ustvarite novo pogodbo za začetek."
      :show-pagination="true"
      :show-toolbar="true"
      :hoverable="true"
    >
      <!-- Toolbar Actions -->
      <template #toolbar-actions v-if="edit">
        <Button variant="outline" @click="onCreate">Nova pogodba</Button>
        <Button
          variant="outline"
          @click="onAttachSegment"
          :disabled="availableSegmentsCount === 0"
        >
          {{ availableSegmentsCount ? "Dodaj segment" : "Ni razpoložljivih segmentov" }}
        </Button>
      </template>
      <!-- Reference -->
      <template #cell-reference="{ row }">
        <span class="font-medium text-gray-900 px-2">{{ row.reference }}</span>
      </template>

      <!-- Start Date -->
      <template #cell-start_date="{ row }">
        {{ formatDate(row.start_date) }}
      </template>

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

      <!-- Segment -->
      <template #cell-segment="{ row }">
        <div class="flex items-center gap-2" @click.stop>
          <span class="text-gray-700">{{ contractActiveSegment(row)?.name || "-" }}</span>
          <DropdownMenu v-if="edit">
            <DropdownMenuTrigger as-child>
              <Button
                variant="ghost"
                size="icon"
                :class="{
                  'opacity-50 cursor-not-allowed':
                    !segments || segments.length === 0 || !row.active,
                }"
                :title="
                  !row.active
                    ? 'Segmenta ni mogoče spremeniti za arhivirano pogodbo'
                    : segments && segments.length
                    ? 'Spremeni segment'
                    : 'Ni segmentov na voljo za ta primer'
                "
                :disabled="!row.active || !segments || !segments.length"
              >
                <FontAwesomeIcon :icon="faPenToSquare" class="h-4 w-4 text-gray-600" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
              <template v-if="segments && segments.length">
                <DropdownMenuItem
                  v-for="s in sortedSegments"
                  :key="s.id"
                  @click="askChangeSegment(row, s.id)"
                >
                  {{ s.name }}
                </DropdownMenuItem>
              </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>
                  <DropdownMenuItem
                    v-for="s in sortedAllSegments"
                    :key="s.id"
                    @click="askChangeSegment(row, s.id, true)"
                  >
                    {{ s.name }}
                  </DropdownMenuItem>
                </template>
                <template v-else>
                  <div class="px-3 py-2 text-sm text-gray-500">
                    Ni konfiguriranih segmentov.
                  </div>
                </template>
              </template>
            </DropdownMenuContent>
          </DropdownMenu>
          <StatusBadge
            v-if="!row.active"
            status="Arhivirano"
            variant="default"
            size="sm"
          />
        </div>
      </template>

      <!-- Initial Amount -->
      <template #cell-initial_amount="{ row }">
        <div class="text-right">
          {{ formatCurrency(row?.account?.initial_amount ?? 0) }}
        </div>
      </template>

      <!-- Balance Amount -->
      <template #cell-balance_amount="{ row }">
        <div class="text-right">
          {{ formatCurrency(row?.account?.balance_amount ?? 0) }}
        </div>
      </template>

      <!-- Meta Info -->
      <template #cell-meta_info="{ row }">
        <div class="inline-flex items-center justify-center gap-0.5" @click.stop>
          <!-- Description -->
          <DropdownMenu>
            <DropdownMenuTrigger as-child>
              <button
                type="button"
                class="inline-flex items-center justify-center h-5 w-5 rounded-full transition-colors"
                :title="'Pokaži opis'"
                :disabled="!hasDesc(row)"
                :class="
                  hasDesc(row)
                    ? 'hover:bg-gray-100 focus:outline-none text-gray-700'
                    : 'text-gray-400 cursor-not-allowed'
                "
              >
                <FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4" />
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <div class="max-w-sm px-3 py-2 text-sm text-gray-700 whitespace-pre-wrap">
                {{ row.description }}
              </div>
            </DropdownMenuContent>
          </DropdownMenu>

          <!-- Meta -->
          <DropdownMenu>
            <DropdownMenuTrigger as-child>
              <button
                type="button"
                class="inline-flex items-center justify-center h-5 w-5 rounded-full transition-colors"
                :title="'Pokaži meta'"
                :disabled="!hasMeta(row)"
                :class="
                  hasMeta(row)
                    ? 'hover:bg-gray-100 focus:outline-none text-gray-700'
                    : 'text-gray-400 cursor-not-allowed'
                "
              >
                <FontAwesomeIcon :icon="faTags" class="h-4 w-4" />
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <div class="max-w-sm px-3 py-2 text-sm text-gray-700">
                <template v-if="hasMeta(row)">
                  <div
                    v-for="(m, idx) in getMetaEntries(row)"
                    :key="idx"
                    class="flex flex-col items-start gap-0.5 py-0.5 mb-0.5"
                  >
                    <span class="text-gray-500 text-xs whitespace-nowrap">{{
                      m.title
                    }}</span>
                    <span class="text-gray-800 font-medium break-all">{{
                      formatMetaValue(m)
                    }}</span>
                  </div>
                </template>
                <template v-else>
                  <div class="text-gray-500">Ni meta podatkov.</div>
                </template>
              </div>
              <div v-if="edit && row.active" class="border-t border-gray-200 mt-2 pt-2">
                <button
                  type="button"
                  @click="openMetaEditDialog(row)"
                  class="w-full flex items-center gap-2 px-3 py-2 text-left text-sm hover:bg-gray-100 rounded transition-colors"
                >
                  <FontAwesomeIcon
                    :icon="faPenToSquare"
                    class="h-3.5 w-3.5 text-gray-600"
                  />
                  <span>Uredi meta podatke</span>
                </button>
              </div>
            </DropdownMenuContent>
          </DropdownMenu>

          <!-- Promise Date -->
          <DropdownMenu>
            <DropdownMenuTrigger as-child>
              <button
                type="button"
                class="inline-flex items-center justify-center h-5 w-5 rounded-full hover:bg-gray-100 focus:outline-none transition-colors"
                :title="
                  getPromiseDate(row)
                    ? 'Obljubljen datum plačila'
                    : 'Ni obljubljenega datuma'
                "
                :disabled="!getPromiseDate(row)"
              >
                <FontAwesomeIcon
                  :icon="faClock"
                  class="h-4 w-4"
                  :class="promiseColorClass(row)"
                />
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <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(row)"
                  />
                  <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(row)) }}</span>
                </div>
                <div class="mt-1" v-if="promiseStatus(row) === 'future'">
                  <span class="text-green-600">V prihodnosti</span>
                </div>
                <div class="mt-1" v-else-if="promiseStatus(row) === 'today'">
                  <span class="text-yellow-600">Danes</span>
                </div>
                <div class="mt-1" v-else-if="promiseStatus(row) === 'past'">
                  <span class="text-red-600">Zapadlo</span>
                </div>
                <div class="mt-1 text-gray-500" v-else>Ni nastavljenega datuma.</div>
              </div>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </template>

      <!-- Actions -->
      <template #cell-actions="{ row }">
        <div @click.stop>
          <TableActions align="right">
            <template #default="{ handleAction }">
              <!-- Editing -->
              <template v-if="edit">
                <div
                  class="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wide text-gray-400"
                >
                  Urejanje
                </div>
                <ActionMenuItem
                  v-if="row.active"
                  :icon="faPenToSquare"
                  label="Uredi"
                  @click="onEdit(row)"
                />
              </template>

              <!-- Add Activity -->
              <ActionMenuItem
                :icon="faListCheck"
                label="Dodaj aktivnost"
                @click="onAddActivity(row)"
              />

              <div class="my-1 border-t border-gray-100" />

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

              <!-- Objects -->
              <div
                class="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wide text-gray-400"
              >
                Predmeti
              </div>
              <ActionMenuItem
                :icon="faCircleInfo"
                label="Seznam predmetov"
                @click="openObjectsList(row)"
              />
              <ActionMenuItem
                v-if="row.active"
                :icon="faPlus"
                label="Dodaj predmet"
                @click="openObjectDialog(row)"
              />

              <div class="my-1 border-t border-gray-100" />

              <!-- Payments -->
              <div
                class="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wide text-gray-400"
              >
                Plačila
              </div>
              <ActionMenuItem
                :icon="faCircleInfo"
                label="Pokaži plačila"
                @click="openPaymentsDialog(row)"
              />
              <ActionMenuItem
                v-if="row.active && row?.account"
                :icon="faPlus"
                label="Dodaj plačilo"
                @click="openPaymentDialog(row)"
              />

              <!-- Archive -->
              <template v-if="edit">
                <div class="my-1 border-t border-gray-100" />
                <div
                  class="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wide text-gray-400"
                >
                  {{ row.active ? "Arhiviranje" : "Ponovna aktivacija" }}
                </div>
                <ActionMenuItem
                  v-if="row.active"
                  :icon="faBoxArchive"
                  :label="'Arhiviraj'"
                  @click="
                    router.post(
                      route('clientCase.contract.archive', {
                        client_case: client_case.uuid,
                        uuid: row.uuid,
                      }),
                      {},
                      {
                        preserveScroll: true,
                        only: ['contracts', 'activities', 'documents'],
                      }
                    )
                  "
                />
                <ActionMenuItem
                  v-else
                  :icon="faBoxArchive"
                  label="Ponovno aktiviraj"
                  @click="
                    router.post(
                      route('clientCase.contract.archive', {
                        client_case: client_case.uuid,
                        uuid: row.uuid,
                      }),
                      { reactivate: true },
                      {
                        preserveScroll: true,
                        only: ['contracts', 'activities', 'documents'],
                      }
                    )
                  "
                />
              </template>

              <!-- Delete -->
              <template v-if="edit">
                <div class="my-1 border-t border-gray-100" />
                <ActionMenuItem
                  :icon="faTrash"
                  label="Izbriši"
                  danger
                  @click="onDelete(row)"
                />
              </template>
            </template>
          </TableActions>
        </div>
      </template>
    </DataTable>

    <!-- Confirm Change Segment -->
    <ConfirmationDialog
      :show="confirmChange.show"
      title="Spremeni segment"
      :message="`Ali želite spremeniti segment za pogodbo ${
        confirmChange.contract?.reference || ''
      }?`"
      confirm-text="Potrdi"
      cancel-text="Prekliči"
      @close="closeConfirm"
      @confirm="doChangeSegment"
    />

    <!-- Dialogs -->
    <CaseObjectCreateDialog
      :show="showObjectDialog"
      @close="closeObjectDialog"
      :client_case="client_case"
      :contract="selectedContract"
    />

    <CaseObjectsDialog
      :show="showObjectsList"
      @close="closeObjectsList"
      :client_case="client_case"
      :contract="selectedContract"
      :edit="edit"
    />

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

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

    <ContractMetaEditDialog
      :show="showMetaEditDialog"
      :client_case="client_case"
      :contract="selectedContract"
      @close="closeMetaEditDialog"
    />

    <!-- Generate Document Dialog -->
    <CreateDialog
      :show="showGenerateDialog"
      title="Generiraj dokument"
      max-width="4xl"
      confirm-text="Generiraj"
      :processing="generating[generateFor?.uuid]"
      :disabled="!selectedTemplateSlug"
      @close="closeGenerateDialog"
      @confirm="submitGenerate"
    >
      <div class="space-y-4">
        <div class="space-y-2">
          <Label>Predloga</Label>
          <Select v-model="selectedTemplateSlug" @update:model-value="onTemplateChange">
            <SelectTrigger>
              <SelectValue placeholder="Izberi predlogo..." />
            </SelectTrigger>
            <SelectContent>
              <SelectItem v-for="t in templates" :key="t.slug" :value="t.slug">
                {{ t.name }} (v{{ t.version }})
              </SelectItem>
            </SelectContent>
          </Select>
        </div>

        <!-- Custom inputs -->
        <template v-if="customTokenList.length > 0">
          <div class="border-t border-gray-200 pt-4">
            <h3 class="text-sm font-medium text-gray-700 mb-3">Prilagojene vrednosti</h3>
            <div class="space-y-3">
              <div v-for="token in customTokenList" :key="token" class="space-y-2">
                <Label>
                  {{ token.replace(/^custom\./, "") }}
                </Label>
                <Textarea
                  v-if="templateCustomTypes[token.replace(/^custom\./, '')] === 'text'"
                  v-model="customInputs[token.replace(/^custom\./, '')]"
                  rows="3"
                />
                <Input
                  v-else
                  v-model="customInputs[token.replace(/^custom\./, '')]"
                  :type="
                    templateCustomTypes[token.replace(/^custom\./, '')] === 'date'
                      ? 'date'
                      : templateCustomTypes[token.replace(/^custom\./, '')] === 'number'
                      ? 'number'
                      : 'text'
                  "
                  :step="
                    templateCustomTypes[token.replace(/^custom\./, '')] === 'number'
                      ? '0.01'
                      : undefined
                  "
                />
              </div>
            </div>
          </div>
        </template>

        <!-- Address overrides -->
        <div class="border-t border-gray-200 pt-4 space-y-3">
          <h3 class="text-sm font-medium text-gray-700 mb-2">Naslovi</h3>
          <div class="space-y-2">
            <Label>Naslov stranke</Label>
            <Select v-model="clientAddressSource">
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="client">Stranka</SelectItem>
                <SelectItem value="case_person">Oseba primera</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div class="space-y-2">
            <Label>Naslov osebe</Label>
            <Select v-model="personAddressSource">
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="case_person">Oseba primera</SelectItem>
                <SelectItem value="client">Stranka</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

        <div v-if="generationError[generateFor?.uuid]" class="text-sm text-red-600">
          {{ generationError[generateFor?.uuid] }}
        </div>
      </div>
    </CreateDialog>
  </div>
</template>
