<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,
} from "@fortawesome/free-solid-svg-icons";

const props = defineProps({
  client_case: Object,
  contract_types: Array,
  contracts: { type: Array, default: () => [] },
  segments: { type: Array, default: () => [] },
  all_segments: { type: Array, default: () => [] },
});

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

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 axios from "axios";
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) => {
  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" />
      </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">
                  <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,
                      }"
                      :title="
                        segments && segments.length
                          ? 'Spremeni segment'
                          : 'Ni segmentov na voljo za ta primer'
                      "
                    >
                      <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>
              </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 width="64" align="left">
                  <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>

                <!-- Promise date indicator -->
                <Dropdown width="64" align="left">
                  <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">
              <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"
                    @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"
                    @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" />
                  <!-- 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"
                    @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"
                    @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" />
                  <!-- 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"
  />
</template>
