<script setup lang="ts">
import WizardPage from "@/components/onboarding/WizardPage.vue";
import type { Ref } from "vue";
import { computed, ref, watch } from "vue";
import { useUserStore } from "@/stores/user";
import PersonalAddress from "@/components/onboarding/PersonalAddress.vue";
import OrganisationAddress from "@/components/onboarding/OrganisationAddress.vue";
import { itPost, itPut } from "@/fetchHelpers";
import { useEntities } from "@/services/entities";
import { useDebounceFn, useFetch } from "@vueuse/core";
import { useRoute } from "vue-router";
import { useTranslation } from "i18next-vue";
import { getVVCourseName } from "./composables";

type BillingAddressType = {
  first_name: string;
  last_name: string;
  street: string;
  street_number: string;
  postal_code: string;
  city: string;
  country: string;
  company_name: string;
  company_street: string;
  company_street_number: string;
  company_postal_code: string;
  company_city: string;
  company_country: string;
};

const props = defineProps({
  courseType: {
    type: String,
    required: true,
  },
});

const user = useUserStore();
const route = useRoute();
const { organisations } = useEntities();

const userOrganisationName = computed(() => {
  if (!user.organisation) {
    return null;
  }

  // Those IDs do not represent a company
  // 1: Other broker
  // 2: Other insurance
  // 3: Other private insurance
  // 31: No company relation
  if ([1, 2, 3, 31].includes(user.organisation)) {
    return null;
  }

  return organisations.value?.find((c) => c.id === user.organisation)?.name;
});

const paymentError = computed(() => {
  return "error" in route.query;
});

const address = ref({
  first_name: "",
  last_name: "",
  street: "",
  street_number: "",
  postal_code: "",
  city: "",
  country: "",
  company_name: "",
  company_street: "",
  company_street_number: "",
  company_postal_code: "",
  company_city: "",
  company_country: "",
});

const useCompanyAddress = ref(false);
const fetchBillingAddress = useFetch("/api/shop/billing-address/").json();
const billingAddressData: Ref<BillingAddressType | null> = fetchBillingAddress.data;

watch(billingAddressData, (newVal) => {
  if (newVal) {
    address.value = newVal;
    useCompanyAddress.value = !!newVal.company_name;
  }
});

const updateAddress = useDebounceFn(() => {
  itPut("/api/shop/billing-address/update/", address.value);
}, 500);

watch(
  address,
  (newVal, oldVal) => {
    if (Object.values(oldVal).every((x) => x === "")) {
      return;
    }

    updateAddress();
  },
  { deep: true }
);

const removeCompanyAddress = () => {
  useCompanyAddress.value = false;
  address.value.company_name = "";
  address.value.company_street = "";
  address.value.company_street_number = "";
  address.value.company_postal_code = "";
  address.value.company_city = "";
  address.value.company_country = "";
};

type FormErrors = {
  personal: string[];
  company: string[];
};

const formErrors = ref<FormErrors>({
  personal: [],
  company: [],
});

const { t } = useTranslation();

function validateAddress() {
  formErrors.value.personal = [];
  formErrors.value.company = [];

  if (!address.value.first_name) {
    formErrors.value.personal.push(t("a.Vorname"));
  }

  if (!address.value.last_name) {
    formErrors.value.personal.push(t("a.Nachname"));
  }

  if (!address.value.street) {
    formErrors.value.personal.push(t("a.Strasse"));
  }

  if (!address.value.street_number) {
    formErrors.value.personal.push(t("a.Hausnummmer"));
  }

  if (!address.value.postal_code) {
    formErrors.value.personal.push(t("a.PLZ"));
  }

  if (!address.value.city) {
    formErrors.value.personal.push(t("a.Ort"));
  }

  if (!address.value.country) {
    formErrors.value.personal.push(t("a.Land"));
  }

  if (useCompanyAddress.value) {
    if (!address.value.company_name) {
      formErrors.value.company.push(t("a.Name"));
    }

    if (!address.value.company_street) {
      formErrors.value.company.push(t("a.Strasse"));
    }

    if (!address.value.company_street_number) {
      formErrors.value.company.push(t("a.Hausnummmer"));
    }

    if (!address.value.company_postal_code) {
      formErrors.value.company.push(t("a.PLZ"));
    }

    if (!address.value.company_city) {
      formErrors.value.company.push(t("a.Ort"));
    }

    if (!address.value.company_country) {
      formErrors.value.company.push(t("a.Land"));
    }
  }
}

const executePayment = () => {
  validateAddress();

  if (formErrors.value.personal.length > 0 || formErrors.value.company.length > 0) {
    return;
  }

  // Where the payment page will redirect to after the payment is done:
  // The reason why this is here is convenience: We could also do this in the backend
  // then we'd need to configure this for all environments (including Caprover).
  // /server/transactions/redirect?... will just redirect to the frontend to the right page
  // anyway, so it seems fine to do it here.
  const fullHost = `${window.location.protocol}//${window.location.host}`;

  itPost("/api/shop/vv/checkout/", {
    redirect_url: fullHost,
    address: address.value,
    product: props.courseType,
  }).then((res) => {
    console.log("Going to next page", res.next_step_url);
    window.location.href = res.next_step_url;
  });
};
</script>

<template>
  <WizardPage :step="2">
    <template #content>
      <h2 class="my-10">{{ $t("a.Lehrgang kaufen") }}</h2>
      <p class="mb-4">
        <i18next
          :translation="$t('a.Der Preis für den Lehrgang {course} beträgt {price}.')"
        >
          <template #course>
            <b>«{{ getVVCourseName(props.courseType) }}»</b>
          </template>
          <template #price>
            <b class="whitespace-nowrap">300 CHF</b>
          </template>
        </i18next>
        {{
          $t("a.Mit dem Kauf erhältst du Zugang auf den gesamten Kurs (inkl. Prüfung).")
        }}
      </p>
      <p>
        {{ $t("a.Hier kannst du ausschliesslich mit einer Kreditkarte bezahlen.") }}
      </p>

      <p v-if="paymentError" class="text-bold mt-12 text-lg text-red-700">
        {{
          $t("a.Fehler bei der Zahlung. Bitte versuche es erneut oder kontaktiere uns")
        }}:
        <a href="mailto:vermittler@vbv-afa.ch" class="underline">
          vermittler@vbv-afa.ch
        </a>
      </p>

      <h3 class="mb-4 mt-10">{{ $t("a.Adresse") }}</h3>
      <p class="mb-2">
        {{
          $t(
            "a.Um die Zahlung vornehmen zu können, benötigen wir deine Privatadresse. Optional kannst du die Rechnungsadresse deiner Gesellschaft hinzufügen."
          )
        }}
      </p>
      <p>
        {{
          $t(
            "Wichtig: wird die Rechnung von deinem Arbeitgeber bezahlt, dann kannst du zusätzlich die Rechnungsadresse deines Arbeitsgebers erfassen."
          )
        }}
      </p>
      <PersonalAddress v-model="address" />

      <p v-if="formErrors.personal.length" class="mb-10 text-red-700">
        {{ $t("a.Bitte folgende Felder ausfüllen") }}:
        {{ formErrors.personal.join(", ") }}
      </p>

      <button
        v-if="!useCompanyAddress"
        class="underline"
        @click="useCompanyAddress = true"
      >
        <template v-if="userOrganisationName">
          {{
            $t("a.Rechnungsadresse von {organisation} hinzufügen", {
              organisation: userOrganisationName,
            })
          }}
        </template>
        <template v-else>{{ $t("a.Rechnungsadresse hinzufügen") }}</template>
      </button>

      <transition
        enter-active-class="transition ease-out duration-100"
        enter-from-class="transform opacity-0 scale-y-95"
        enter-to-class="transform opacity-100 scale-y-100"
        leave-active-class="transition ease-in duration-75"
        leave-from-class="transform opacity-100 scale-y-100"
        leave-to-class="transform opacity-0 scale-y-95"
      >
        <div v-if="useCompanyAddress">
          <div class="flex items-center justify-between">
            <h3 v-if="userOrganisationName">
              {{
                $t("a.Rechnungsadresse von {organisation}", {
                  organisation: userOrganisationName,
                })
              }}
            </h3>
            <h3 v-else>{{ $t("a.Rechnungsadresse") }}</h3>
            <button class="underline" @click="removeCompanyAddress">
              {{ $t("a.Entfernen") }}
            </button>
          </div>
          <OrganisationAddress v-model="address" />
          <p v-if="formErrors.company.length" class="text-red-700">
            {{ $t("a.Bitte folgende Felder ausfüllen") }}:
            {{ formErrors.company.join(", ") }}
          </p>
        </div>
      </transition>
    </template>

    <template #footer>
      <router-link
        :to="{ name: 'accountProfile' }"
        class="btn-secondary flex items-center"
      >
        <it-icon-arrow-left class="it-icon mr-2 h-6 w-6" />
        {{ $t("general.back") }}
      </router-link>
      <button class="btn-blue flex items-center" @click="executePayment">
        {{ $t("a.Mit Kreditkarte bezahlen") }}
        <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
      </button>
    </template>
  </WizardPage>
</template>
