<script setup>
import ShipmentInfoModal from "@/components/ShipmentInfoModal.vue";

import { useResourceStore } from "@/stores/ResourceStore";
import { useApiRequestStore } from "@/stores/ApiRequestStore";
import { successAlert, confirmAlert } from "@/components/Mudur-Ui-Kit/alert.js";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const { destroy } = useResourceStore();
const { getPdf } = useApiRequestStore();

defineProps({
  shipment: {
    type: Object,
    required: true,
  },
  modals: {
    type: Object,
    required: true,
  },
  pdfUrlModal: {
    type: Boolean,
    required: true,
  },
  pdfUrl: {
    type: String,
    required: true,
  },
});

const emit = defineEmits(["update:pdfUrlModal", "update:pdfUrl"]);

const printPdf = async (id) => {
  const url = await getPdf({ data: { shipments: [id] } });
  emit("update:pdfUrl", url);
  emit("update:pdfUrlModal", true);
};

const destroyShipment = async (id) => {
  confirmAlert({
    title: t("cancel_title"),
    message: t("cancel_shipment"),
    onConfirm: async () => {
      await destroy({
        data: {
          resource: "shipments",
          id,
        },
      });
      successAlert({ message: t("resource_deleted", [t("shipment")]) });
      window.location.reload();
    },
  });
};

const status = {
  non_processed: "Gönderime Hazır",
  shipped: "Yola Çıktı",
  on_transit: "Taşıma Sürecinde",
  at_delivery_center: "Dağıtım Merkezinde",
  in_courier: "Dağıtıma Çıktı",
  delivered: "Teslim Edildi",
};
</script>

<template>
  <div class="flex flex-col gap-4 py-4">
    <div class="flex gap-4 items-center w-full">
      <img :src="shipment.cargo_company?.logo" class="object-contain w-16" />
      <div class="flex flex-col gap-1 w-full">
        <span
          v-if="status[shipment.status]"
          class="bg-gray-100 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded w-fit"
        >
          {{ status[shipment.status] }}
        </span>
        <span v-if="shipment.cargo_company?.title">
          {{ shipment.cargo_company.title }} ile gönderildi
        </span>
        <span class="font-bold">
          <time-format :date="shipment.created_at" />
        </span>
      </div>
    </div>

    <div class="flex gap-4 cursor-pointer justify-between">
      <div class="col-span-2 flex flex-col text-xs">
        <span class="font-bold">{{ $t("tracking_number") }}</span>
        <a
          v-if="shipment.tracking_number"
          :href="shipment.tracking_link"
          target="_blank"
          class="text-primary-600 underline text-xs"
        >
          {{ shipment.tracking_number }}
        </a>
        <span v-else class="text-xs">
          {{ $t("not_yet_formed") }}
        </span>
      </div>
      <div class="flex items-center justify-end gap-4">
        <!-- Gönderi Bilgisi -->
        <div class="relative group">
          <div
            class="flex items-center justify-center rounded-full size-8 py-2 border text-primary-600 border-primary-600"
            @click="modals[shipment.id] = !modals[shipment.id]"
          >
            <information-circle-icon class="size-5" />
          </div>
          <span
            class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap bg-gray-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition"
          >
            Gönderi Bilgisi
          </span>
        </div>

        <!-- Barkod Yazdır -->
        <div v-if="shipment.status === 'non_processed'" class="relative group">
          <div
            class="flex items-center justify-center rounded-full size-8 py-2 border text-primary-600 border-primary-600"
            @click="printPdf(shipment.id)"
          >
            <printer-icon class="size-5" />
          </div>
          <span
            class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap bg-gray-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition"
          >
            Barkod Yazdır
          </span>
        </div>

        <!-- Gönderiyi İptal Et -->
        <div v-if="shipment.status === 'non_processed'" class="relative group">
          <button
            type="button"
            class="flex items-center justify-center rounded-full py-2 size-8 border text-red-600 border-red-600"
            @click="destroyShipment(shipment.id)"
          >
            <trash-icon class="w-5" />
          </button>
          <span
            class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap bg-gray-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition"
          >
            Gönderiyi İptal Et
          </span>
        </div>
      </div>
    </div>
    <ShipmentInfoModal v-model="modals[shipment.id]" :shipment="shipment" />
  </div>
</template>
