<script setup>
import DialogModal from "@/Components/DialogModal.vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faTrash } from "@fortawesome/free-solid-svg-icons";
import { ref, watch, computed } from "vue";
import axios from "axios";
import { router } from "@inertiajs/vue3";

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

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

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

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

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

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

function fmtMoney(amount, currency = "EUR") {
  const num = typeof amount === "string" ? Number(amount) : amount;
  return new Intl.NumberFormat("de-DE", { style: "currency", currency }).format(num ?? 0);
}

async function deletePayment(paymentId) {
  if (!accountId.value) return;
  await 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();
    } else {
      payments.value = [];
    }
  }
);

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">
                  {{ fmtMoney(p.amount, p.currency || "EUR") }}
                </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>
                </div>
              </div>
              <div class="flex items-center gap-2">
                <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"
                >
                  <FontAwesomeIcon :icon="faTrash" class="h-4 w-4 text-red-600" />
                  <span class="text-sm">Briši</span>
                </button>
              </div>
            </div>
          </div>
        </template>
      </div>
    </template>
    <template #footer>
      <div class="mt-2 flex justify-end gap-2">
        <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>
