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

const props = defineProps({
  show: { type: Boolean, default: false },
  contract: { type: Object, default: null },
  edit: { type: Boolean, default: true },
});

const emit = defineEmits(["close"]);

const payments = ref([]);
const loading = ref(false);

const contractRef = computed(() => props.contract?.reference || "—");
const accountId = computed(() => props.contract?.account?.id || null);

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

async function loadPayments() {
  if (!accountId.value) {
    payments.value = [];
    return;
  }
  loading.value = true;
  try {
    const { data } = await axios.get(
      route("accounts.payments.list", { account: accountId.value })
    );
    payments.value = data.payments || [];
  } finally {
    loading.value = false;
  }
}

function close() {
  emit("close");
  payments.value = [];
}

function deletePayment(paymentId) {
  if (!accountId.value) return;
  router.delete(
    route("accounts.payments.destroy", { account: accountId.value, payment: paymentId }),
    {
      preserveScroll: true,
      preserveState: true,
      only: ["contracts", "activities"],
      onSuccess: async () => {
        await loadPayments();
      },
      onError: async () => {
        await loadPayments();
      },
    }
  );
}

watch(
  () => props.show,
  async (visible) => {
    if (visible) {
      await loadPayments();
    }
  }
);
watch(
  () => props.contract?.account?.id,
  async () => {
    if (props.show) {
      await loadPayments();
    }
  }
);
</script>

<template>
  <DialogModal :show="show" @close="close">
    <template #title>
      Plačila za pogodbo <span class="text-gray-600">{{ contractRef }}</span>
    </template>
    <template #content>
      <div>
        <div v-if="loading" class="text-sm text-gray-500">Nalaganje…</div>
        <template v-else>
          <div v-if="payments.length === 0" class="text-sm text-gray-500">Ni plačil.</div>
          <div v-else class="divide-y divide-gray-100 border rounded">
            <div
              v-for="p in payments"
              :key="p.id"
              class="px-3 py-2 flex items-center justify-between"
            >
              <div>
                <div class="text-sm text-gray-800">
                  {{
                    Intl.NumberFormat("de-DE", {
                      style: "currency",
                      currency: p.currency || "EUR",
                    }).format(p.amount ?? 0)
                  }}
                </div>
                <div class="text-xs text-gray-500">
                  <span>{{ formatDate(p.paid_at) }}</span>
                  <span v-if="p.reference" class="ml-2">Sklic: {{ p.reference }}</span>
                  <span v-if="p.balance_before !== undefined" class="ml-2">
                    Stanje pred:
                    {{
                      Intl.NumberFormat("de-DE", {
                        style: "currency",
                        currency: p.currency || "EUR",
                      }).format(p.balance_before ?? 0)
                    }}
                  </span>
                </div>
              </div>
              <div class="flex items-center gap-2" v-if="edit">
                <button
                  type="button"
                  class="inline-flex items-center gap-1 px-2 py-1 rounded text-red-700 hover:bg-red-50"
                  @click="deletePayment(p.id)"
                  title="Izbriši plačilo"
                >
                  <span class="text-sm">Briši</span>
                </button>
              </div>
            </div>
          </div>
        </template>
      </div>
    </template>
    <template #footer>
      <div class="flex justify-end gap-2 w-full">
        <button
          type="button"
          class="px-3 py-2 rounded bg-gray-200 hover:bg-gray-300"
          @click="loadPayments"
        >
          Osveži
        </button>
        <button
          type="button"
          class="px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700"
          @click="close"
        >
          Zapri
        </button>
      </div>
    </template>
  </DialogModal>
</template>
