import React, { FC, useEffect, useState } from "react";
import { Aligment, Icon, Section, Text, TextLabel } from "venice-ui";
import { useStoreActions, useStoreState } from "../../store";
import { format } from "date-fns";
import { pl } from "date-fns/locale";
import { dictionary } from "../../untils/dictionary";
import { t } from "../../helpers/userHelper";
import { apiCall } from "../../untils/apiCall";
import { ProgressBar } from "../UI/ProgressBar/ProgressBar";
import {
  encryptNip,
  getCountryName,
  getLimits,
} from "../../helpers/organizationHelper";
import { getPercentageValue } from "../../helpers/mathHelpers";
import { LoadingContent } from "../layouts/Loading";
import { EditBillingModal } from "../Modals/EditBillingModal";
import { SettingRow } from "../Settings/SettingsRow";
import { ContentFull, Link, OrgDetailsLoader } from "../components";
import { Colors } from "../../untils/Theme";
import { InvoicesModal } from "../Modals";
import { useNavigate } from "react-router-dom";
import { CancelSubscriptioModal } from "../Modals/CancelSubscriptioModal";
import { PAYMENT_MODE } from "../../helpers/settingsHelper";
import { ReactivateSubscriptionModal } from "../Modals/ReactivateSubscriptionModal";
import { EditNipModal } from "../Modals/EditNipModal";
import {
  DetailsPanel,
  OrganizationDetailsWrapperContent,
} from "./organizations.style";
import { TestInvoice } from "./TestInvoice";
import { DEMO_MODE } from "../../untils/const";

export const OrganizationDetails: FC = () => {
  const navigate = useNavigate();
  const { id, creationTime, members, usedStorage, planKey, email, demoTime } =
    useStoreState((state) => state.organization);
  const { orgStatus, lang } = useStoreState((state) => state.user.userDetails);

  const [bilingModal, toogleBilingModal] = useState(false);
  const [nipModal, toogleNipModal] = useState(false);

  const [invoicesModal, toogleInvoicesModal] = useState(false);
  const [cancelSubscriptionModal, toogleCancelSubscriptionModal] = useState({
    show: false,
    loader: false,
    confirm: false,
  });
  const [paymentEditLoader, setPaymentEditLoader] = useState(false);
  const [reactivateSubscriptionModal, toggleReactivateSubscriptionModal] =
    useState({
      show: false,
      loader: false,
      confirm: false,
    });

  const { setOrgStatus } = useStoreActions((actions) => actions.user);
  const hideBillingModal = () => {
    toogleBilingModal(false);
  };
  const showBillingModal = () => {
    toogleBilingModal(true);
  };
  const hideNipModal = () => {
    toogleNipModal(false);
  };
  const showNipModal = () => {
    toogleNipModal(true);
  };

  const hideInvoiceModal = () => {
    toogleInvoicesModal(false);
  };
  const showInvoiceModal = () => {
    toogleInvoicesModal(true);
  };
  const hideCancelSubscriptionModal = () => {
    toogleCancelSubscriptionModal({
      loader: false,
      confirm: false,
      show: false,
    });
  };
  const showCancelSubscriptionModal = () => {
    toogleCancelSubscriptionModal({
      ...cancelSubscriptionModal,
      show: true,
      loader: false,
    });
  };
  const showReactivateSubscriptionModal = () => {
    toggleReactivateSubscriptionModal({
      show: true,
      loader: false,
      confirm: false,
    });
  };
  const hideReactivateSubscriptionModal = () => {
    toggleReactivateSubscriptionModal({
      show: false,
      loader: false,
      confirm: false,
    });
  };
  const [pageData, setPageData] = useState({
    loading: true,
    editAddressLink: "",
    taxID: "",
    address: {
      name: "",
      street: "",
      postal_code: "",
      city: "",
      state: "",
      country: "",
    },
    card: {
      type: "",
      number: "****",
      expire: "",
    },
    subscriptionID: "",
    subscriptionEndDate: 0,
    stripeCustomerID: "",
    fakturowniaCustomerID: "",
    keyPlan: "",
    nextPaymentValue: "",
    paymentArea: "",
  });

  const getCustomerPortal = async () => {
    const options = {
      orgID: id,
    };
    await apiCall("user/getUserSettings", options, (response: any) => {
      setPageData({
        loading: false,
        editAddressLink: response.userDetails.editAddressUrl,
        taxID: response.userDetails.tax,
        subscriptionEndDate: response.userDetails.subscriptionEndDate,
        stripeCustomerID: response.userDetails.stripeCustomerID,
        fakturowniaCustomerID: response.userDetails.fakturowniaCustomerID,
        subscriptionID: response.userDetails.subscriptionID,
        keyPlan: response.userDetails.keyPlan,
        paymentArea: response.userDetails.paymentArea,
        nextPaymentValue:
          response.userDetails.nextPaymentAmount.toString() +
          " " +
          response.userDetails.nextPaymentCurrency,
        address: {
          name: response.userDetails.name,
          street: response.userDetails.address.street || "",
          postal_code: response.userDetails.address.postal_code || "",
          city: response.userDetails.address.city || "",
          state: response.userDetails.address.state || "",
          country: response.userDetails.address.country || "",
        },
        card: {
          type: response?.card?.brand || "",
          number: response?.card?.number || "",
          expire: response?.card?.expire || "",
        },
      });
    });
  };

  useEffect(() => {
    if (!DEMO_MODE) {
      getCustomerPortal();
    } else {
      setPageData({
        ...pageData,
        loading: false,
      });
    }
  }, []);

  const handleCancelSubscription = async () => {
    toogleCancelSubscriptionModal({
      ...cancelSubscriptionModal,
      loader: true,
    });
    const options = {
      orgID: id,
      stripeCustomerId: pageData.stripeCustomerID,
      cancellationDate: format(new Date(), "dd-MM-yyyy"),
      accessEndDate: format(
        new Date(pageData.subscriptionEndDate),
        "dd-MMM-yyyy",
        { locale: pl },
      ),
      lang: lang,
    };
    await apiCall("payments/unsubscribe", options, (response: any) => {
      toogleCancelSubscriptionModal({
        ...cancelSubscriptionModal,
        loader: false,
        confirm: true,
      });
    });
  };

  const handleConfirmCancelSubscription = () => {
    setOrgStatus(PAYMENT_MODE.CANCEL);
    hideCancelSubscriptionModal();
  };

  const handleReactivateSubscription = async () => {
    toggleReactivateSubscriptionModal({
      ...reactivateSubscriptionModal,
      loader: true,
    });

    const options = {
      orgID: id,
      stripeCustomerId: pageData.stripeCustomerID,
      nextPaymentDate: format(
        new Date(pageData.subscriptionEndDate),
        "dd-MM-yyyy",
      ),
      lang: lang,
    };
    await apiCall("payments/reactivate", options, (response: any) => {
      toggleReactivateSubscriptionModal({
        ...reactivateSubscriptionModal,
        loader: false,
        confirm: true,
      });
    });
  };

  const handleConfirmReactivateSubscription = () => {
    setOrgStatus(PAYMENT_MODE.ACTIVE);
    hideReactivateSubscriptionModal();
  };

  const handleBillingDataSave = async (
    companyAdressLine1: string,
    companyCity: string,
    companyCountry: string,
    companyName: string,
    companyPostCode: string,
  ) => {
    const options = {
      customerId: pageData.stripeCustomerID,
      companyAdressLine1,
      companyCity,
      companyCountry,
      companyName,
      companyPostCode,
      fakturowniaCustomerID: pageData.fakturowniaCustomerID,
    };
    await apiCall("user/updateBillingDetails", options, (response: any) => {
      setPageData({
        ...pageData,
        // taxID: companyCountry + companyNip,

        address: {
          name: companyName,
          street: companyAdressLine1,
          postal_code: companyPostCode,
          city: companyCity,
          state: "",
          country: companyCountry,
        },
      });
      hideBillingModal();
    });
  };

  const handleNipDataSave = async (
    companyCountry: string,
    companyNip: number,
  ) => {
    const options = {
      customerId: pageData.stripeCustomerID,
      companyCountry,
      companyNip: companyNip.toString(),
      fakturowniaCustomerID: pageData.fakturowniaCustomerID,
    };
    await apiCall("user/updateNIP", options, (response: any) => {
      setPageData({
        ...pageData,
        taxID: companyNip.toString(),
      });
      hideNipModal();
    });
  };

  const testIncoice = async () => {
    const options = {
      fakturowniaCustomerID: pageData.fakturowniaCustomerID,
    };
    await apiCall("payments/testInvoice", options, (response: any) => {});
  };

  const prepareSessionLink = async () => {
    setPaymentEditLoader(true);
    const options = {
      customerId: pageData.stripeCustomerID,
    };
    await apiCall("organization/getPortalAddress", options, (response: any) => {
      const portalUrl = response.url;
      window.open(portalUrl, "_blank");
      setPaymentEditLoader(false);
    });
  };
  if (pageData.loading) {
    return (
      <Aligment direction="column">
        <OrgDetailsLoader>
          <ContentFull>
            <LoadingContent />
          </ContentFull>
        </OrgDetailsLoader>
      </Aligment>
    );
  }
  return (
    <>
      <OrganizationDetailsWrapperContent>
        <DetailsPanel>
          <Section
            withoutPadding={true}
            title={t(dictionary.organizationInfos)}
          >
            {!DEMO_MODE ? (
              <Aligment direction="column" align="flex-start">
                <SettingRow title={t(dictionary.mainEmail)}>
                  <Text>{email}</Text>
                </SettingRow>
                <SettingRow title={t(dictionary.activeSince)}>
                  <Text>
                    {format(new Date(creationTime), "dd-MMM-yyyy", {
                      locale: pl,
                    })}
                  </Text>
                </SettingRow>
                {orgStatus === PAYMENT_MODE.CANCEL && (
                  <SettingRow title={t(dictionary.activeTo)}>
                    <Text>
                      {format(
                        new Date(pageData.subscriptionEndDate),
                        "dd-MMM-yyyy",
                        {
                          locale: pl,
                        },
                      )}
                    </Text>
                  </SettingRow>
                )}
                <SettingRow title={t(dictionary.plan)}>
                  <Text>
                    {t(
                      dictionary[
                        `pricingName_${pageData.keyPlan}` as keyof typeof dictionary
                      ],
                    )}
                  </Text>
                </SettingRow>
                <SettingRow title={t(dictionary.licenses)}>
                  <Text>
                    {
                      members.filter((_member) => _member.status !== "deleted")
                        .length
                    }{" "}
                    / {getLimits(planKey).users}
                  </Text>
                </SettingRow>
                <SettingRow title={t(dictionary.usageSpace)}>
                  <Text>
                    {usedStorage.toFixed(2)} MB / {getLimits(planKey).space} MB
                  </Text>
                  <ProgressBar
                    width="25rem"
                    value={getPercentageValue(
                      parseFloat(usedStorage.toFixed(3)),
                      getLimits(planKey).space,
                    )}
                  />
                </SettingRow>
              </Aligment>
            ) : (
              <Aligment direction="column" align="flex-start">
                <SettingRow>
                  <Aligment gap={4}>
                    <SettingRow title={t(dictionary.mainEmail)}>
                      <Text>{email}</Text>
                    </SettingRow>
                  </Aligment>
                </SettingRow>
                <SettingRow title={t(dictionary.activeTo)}>
                  <Text>
                    {format(new Date(demoTime || 0), "dd-MMM-yyyy", {
                      locale: pl,
                    })}
                  </Text>
                </SettingRow>
                <SettingRow title={t(dictionary.plan)}>
                  <Text>Demo</Text>
                </SettingRow>
                <SettingRow title={t(dictionary.licenses)}>
                  <Text>
                    {
                      members.filter((_member) => _member.status !== "deleted")
                        .length
                    }{" "}
                    / {getLimits(planKey).users}
                  </Text>
                </SettingRow>
                <SettingRow title={t(dictionary.usageSpace)}>
                  <Text>
                    {usedStorage.toFixed(2)} MB / {getLimits(planKey).space} MB
                  </Text>
                  <ProgressBar
                    width="25rem"
                    value={getPercentageValue(
                      parseFloat(usedStorage.toFixed(3)),
                      getLimits(planKey).space,
                    )}
                  />
                </SettingRow>
              </Aligment>
            )}
          </Section>
        </DetailsPanel>
        <DetailsPanel>
          <Section title={t(dictionary.paymentDetails)} withoutPadding={true}>
            {!DEMO_MODE ? (
              <Aligment direction="column" align="flex-start">
                {orgStatus === PAYMENT_MODE.ACTIVE && (
                  <>
                    <SettingRow title={t(dictionary.nextPay)}>
                      <Text>
                        {format(
                          new Date(pageData.subscriptionEndDate),
                          "dd-MMM-yyyy",
                          {
                            locale: pl,
                          },
                        )}
                      </Text>
                    </SettingRow>
                    <SettingRow title={t(dictionary.nextPaymentValue)}>
                      <Text>{pageData.nextPaymentValue}</Text>
                    </SettingRow>
                  </>
                )}
                <SettingRow>
                  <Aligment gap={10} justify="flex-start">
                    <SettingRow
                      loader={paymentEditLoader}
                      title={t(dictionary.paymentMethod)}
                      onClick={prepareSessionLink}
                      tooltip={t(dictionary.editPaymentMethod)}
                    >
                      <Aligment direction="column" align="flex-start">
                        <Text>
                          {pageData.card.type} {pageData.card.number}
                        </Text>
                        <Text>
                          {t(dictionary.validUntil)}: {pageData.card.expire}
                        </Text>
                      </Aligment>
                    </SettingRow>
                  </Aligment>
                </SettingRow>
              </Aligment>
            ) : (
              <Aligment direction="column" align="flex-start">
                <SettingRow>
                  <Aligment gap={4}>
                    <Text>{t(dictionary.paymentDetailsDemo)}</Text>
                  </Aligment>
                </SettingRow>
              </Aligment>
            )}
          </Section>
        </DetailsPanel>
        <DetailsPanel>
          <Section
            title={t(dictionary.invoicesAndSettlements)}
            withoutPadding={true}
          >
            {!DEMO_MODE ? (
              <Aligment direction="column" align="flex-start">
                <SettingRow>
                  <Aligment gap={4}>
                    <Text>{t(dictionary.invoices)}</Text>
                    <Icon
                      name="list"
                      size={"md"}
                      onClick={showInvoiceModal}
                      tooltip={t(dictionary.invoicesList)}
                    />
                  </Aligment>
                </SettingRow>

                <SettingRow
                  title={t(dictionary.billingAddress)}
                  onClick={showBillingModal}
                  tooltip={t(dictionary.editBillingAddress)}
                >
                  <Text>{pageData.address.name}</Text>
                  <Text>{pageData.address.street}</Text>
                  <Text>
                    {pageData.address.postal_code} {pageData.address.city}
                  </Text>
                  <Text>{getCountryName(pageData.address.country)} </Text>
                </SettingRow>
                <SettingRow
                  title={
                    pageData.paymentArea === "non-eu"
                      ? t(dictionary.taxID)
                      : pageData.paymentArea === "eu"
                        ? t(dictionary.vatEU)
                        : t(dictionary.tin)
                  }
                  // onClick={showNipModal}
                >
                  <Text>{pageData.taxID}</Text>
                </SettingRow>
              </Aligment>
            ) : (
              <Aligment direction="column" align="flex-start">
                <SettingRow>
                  <Aligment gap={4}>
                    <Text>{t(dictionary.invoicesAndSettlementsDemo)}</Text>
                  </Aligment>
                </SettingRow>
              </Aligment>
            )}
          </Section>
        </DetailsPanel>
        {!DEMO_MODE && (
          <DetailsPanel>
            <Section title={t(dictionary.administration)} withoutPadding={true}>
              {orgStatus === PAYMENT_MODE.ACTIVE && (
                <Text
                  onClick={showCancelSubscriptionModal}
                  action
                  color={Colors.red}
                >
                  {t(dictionary.unsubscribe)}
                </Text>
              )}
              {orgStatus === PAYMENT_MODE.CANCEL && (
                <Text
                  onClick={showReactivateSubscriptionModal}
                  action
                  color={Colors.seaBlue}
                >
                  {t(dictionary.reactivateSubscribe)}
                </Text>
              )}
            </Section>
          </DetailsPanel>
        )}
      </OrganizationDetailsWrapperContent>

      {bilingModal && (
        <EditBillingModal
          onClose={hideBillingModal}
          handleSave={handleBillingDataSave}
          companyName={pageData.address.name}
          companyAdressLine1={pageData.address.street}
          companyPostCode={pageData.address.postal_code}
          companyCity={pageData.address.city}
          companyCountry={pageData.address.country}
          isOpen={bilingModal}
        />
      )}
      {nipModal && (
        <EditNipModal
          onClose={hideNipModal}
          handleSave={handleNipDataSave}
          companyCountry={pageData.address.country}
          companyNip={encryptNip(pageData.taxID)}
          isOpen={nipModal}
        />
      )}

      {invoicesModal && (
        <InvoicesModal
          show={invoicesModal}
          onClose={hideInvoiceModal}
          fakturowniaCustomerID={pageData.fakturowniaCustomerID}
        />
      )}
      {cancelSubscriptionModal.show && (
        <CancelSubscriptioModal
          handleCancel={hideCancelSubscriptionModal}
          handleAction={handleCancelSubscription}
          handleConfirm={handleConfirmCancelSubscription}
          loader={cancelSubscriptionModal.loader}
          confirm={cancelSubscriptionModal.confirm}
          isOpen={cancelSubscriptionModal.show}
        />
      )}
      {reactivateSubscriptionModal.show && (
        <ReactivateSubscriptionModal
          handleCancel={hideReactivateSubscriptionModal}
          handleAction={handleReactivateSubscription}
          handleConfirm={handleConfirmReactivateSubscription}
          loader={reactivateSubscriptionModal.loader}
          confirm={reactivateSubscriptionModal.confirm}
          isOpen={reactivateSubscriptionModal.show}
        />
      )}
      {/* <TestInvoice
        fakturowniaCustomerID={pageData.fakturowniaCustomerID}
        userStripeID={pageData.stripeCustomerID}
        email={email}
      /> */}
    </>
  );
};