import React, { useEffect, useMemo, useState } from 'react';
import {
    Alert,
    Button,
    Card,
    GlyphButton,
    LoadingPageIndicator,
} from '@theorchard/suite-components';
import { PageHeader as SuitePageHeader } from '@theorchard/suite-components';
import { Page, useFeatureFlag } from '@theorchard/suite-frontend';
import { useHistory, useParams } from 'react-router-dom';
import { useDeletePaymentAdvance } from 'src/apollo/mutations/contract-advance';
import { useWorksheetPaymentContractAdvance } from 'src/apollo/queries/payment-group-payment';
import { PageHeader } from 'src/components/shared/pageHeader';
import { getPaymentBreadcrumbs } from 'src/hooks/breadcrumbs/payment';
import {
    AMOUNT_TOOLTIP_MSG,
    WHT_TOOLTIP_MSG,
    VAT_TOOLTIP_MSG,
    POST_TAX_PAYABLE_TOOLTIP_MSG,
} from 'src/apollo/type-constants/advance';
import LabeledItem from 'src/components/shared/labeled-item';
import { paymentStatus } from 'src/components/shared/payment-status';
import TruncatedText from 'src/components/shared/truncated-text';
import {
    PAYMENT_CAN_BE_RESENT_ALERT,
    PAYMENT_IS_FAILED_ALERT,
    SEND_PAYMENTS,
    USER_FEATURES,
} from 'src/constants';
import { getPaymentsListPage } from 'src/urls/frontend-royalties';
import {
    advancePaymentCanBeDeleted,
    advancePaymentIsFailed,
    getSendPayments,
} from 'src/utils/payment-overview';
import { isResentPaymentAllowed } from 'src/utils/payment-overview';
import AdvancePaymentApprovalSidecar from './advance-payment-approval-sidecar';
import { usePayoneerOutageStatus } from '../shared/payoneer-service-outage-alert';
import { EMPTY_CHAR, YYYY_MM_DD } from '@theorchard/accounting-apps-shared';
import dayjs from 'dayjs';
import AdvancePaymentApproval from 'src/components/advance-detail/advance-payment-approval';
import './styles.scss';

const AdvanceDetail = () => {
    const history = useHistory();
    const { worksheetPaymentContractAdvanceId } = useParams<{
        worksheetPaymentContractAdvanceId: string;
    }>();

    const isFeatureAbacusCreateAndApprovePaymentsEnabled = useFeatureFlag(
        USER_FEATURES.ABACUS_CREATE_AND_APPROVE_PAYMENTS
    );
    const isSidecarFFMigrationEnabled = useFeatureFlag(
        USER_FEATURES.ABACUS_ADVANCE_PAYMENT_APPROVAL_SIDECAR
    );
    const [isPaymentApprovalSidecarOpen, setIsPaymentApprovalSidecarOpen] =
        useState(false);

    const { alert } = usePayoneerOutageStatus({});

    const { data, loading, stopPolling, startPolling } =
        useWorksheetPaymentContractAdvance(worksheetPaymentContractAdvanceId);
    const { deleteWorksheet, loading: deleteLoading } = useDeletePaymentAdvance(
        worksheetPaymentContractAdvanceId
    );

    const onDeleteWorksheet = () => {
        const variables = { worksheetPaymentContractAdvanceId };
        deleteWorksheet({ variables }).then(response => {
            const isDeleted =
                response.data?.deleteWorksheetPaymentContractAdvance.deleted;
            if (isDeleted) history.push(getPaymentsListPage);
            return;
        });
    };
    const breadcrumbs = getPaymentBreadcrumbs(
        data?.worksheetPaymentContractAdvance.paymentName
    );
    const paymentCanBeDeleted = useMemo(
        () =>
            data &&
            advancePaymentCanBeDeleted(data.worksheetPaymentContractAdvance),
        [data]
    );

    useEffect(() => {
        if (!isSidecarFFMigrationEnabled) return;

        if (!paymentCanBeDeleted) {
            stopPolling();
        }
    }, [paymentCanBeDeleted, isSidecarFFMigrationEnabled, stopPolling]);

    const handleStartUpdate = () => {
        startPolling(2000);
    };

    if (loading) return <LoadingPageIndicator />;

    const worksheetPaymentContractAdvance =
        data?.worksheetPaymentContractAdvance;
    const contractAdvance = worksheetPaymentContractAdvance?.contractAdvance;
    const account = contractAdvance?.contract?.account;
    const referencePaymentEntityId =
        account?.accountPaymentTerm?.paymentEntity?.referencePaymentEntityId;
    const paymentEntity = !referencePaymentEntityId
        ? '—'
        : account?.accountPaymentTerm?.paymentEntity?.paymentEntityName || '—';
    const eventDate = data?.worksheetPaymentContractAdvance.abacusEvents.find(
        event => event.eventName === SEND_PAYMENTS.EVENT_NAME
    )?.eventDate;
    const dateSentToPayoneer = eventDate
        ? dayjs.utc(eventDate).format(YYYY_MM_DD)
        : '';

    const worksheetPaymentContractAdvanceIsFailed =
        worksheetPaymentContractAdvance &&
        advancePaymentIsFailed(worksheetPaymentContractAdvance);
    const resentPaymentIsAllowed =
        worksheetPaymentContractAdvance &&
        isResentPaymentAllowed(worksheetPaymentContractAdvance);

    return (
        <div className="AdvanceDetail">
            <PageHeader breadcrumbs={breadcrumbs}>
                <div className="d-flex flex-column">
                    <div className="Metadata">
                        <div className="LabeledItem">
                            <label className="LabeledItem-label">
                                Statement Period:
                            </label>
                            <span className="LabeledItem-item">
                                {
                                    worksheetPaymentContractAdvance
                                        ?.statementPeriod.statementPeriodName
                                }
                            </span>
                        </div>
                        <div className="LabeledItem">
                            <label className="LabeledItem-label">
                                Created:
                            </label>
                            <span className="LabeledItem-item">
                                {contractAdvance?.createdAt}
                            </span>
                        </div>
                    </div>

                    <div className="d-flex">
                        <SuitePageHeader.Title className="mr-3">
                            {worksheetPaymentContractAdvance?.paymentName}
                        </SuitePageHeader.Title>
                        {worksheetPaymentContractAdvance?.actionStates &&
                            paymentStatus(
                                worksheetPaymentContractAdvance.actionStates
                            )}
                    </div>
                </div>

                <div className="actionButtons">
                    {paymentCanBeDeleted &&
                        isFeatureAbacusCreateAndApprovePaymentsEnabled && (
                            <GlyphButton
                                className="delete-button"
                                disabled={deleteLoading || !paymentCanBeDeleted}
                                onClick={onDeleteWorksheet}
                                name="trash"
                            />
                        )}
                    {isSidecarFFMigrationEnabled && data ? (
                        <>
                            <Button
                                variant="primary"
                                testId="actionButton"
                                onClick={() =>
                                    setIsPaymentApprovalSidecarOpen(true)
                                }
                            >
                                Payment Approval
                            </Button>
                            <AdvancePaymentApproval
                                setIsSidecarOpen={
                                    setIsPaymentApprovalSidecarOpen
                                }
                                isSidecarOpen={isPaymentApprovalSidecarOpen}
                                paymentEntityDetails={
                                    data.worksheetPaymentContractAdvance
                                }
                                paymentEntityId={
                                    worksheetPaymentContractAdvanceId
                                }
                                onPaymentSent={handleStartUpdate}
                            />
                        </>
                    ) : (
                        <AdvancePaymentApprovalSidecar
                            createdBy={contractAdvance?.createdBy}
                            isFeatureAbacusCreateAndApprovePaymentsEnabled={
                                isFeatureAbacusCreateAndApprovePaymentsEnabled
                            }
                            salesforceId={
                                worksheetPaymentContractAdvance?.salesforceId
                            }
                            worksheetPaymentContractAdvance={
                                data?.worksheetPaymentContractAdvance
                            }
                        />
                    )}
                </div>
            </PageHeader>

            {worksheetPaymentContractAdvanceIsFailed &&
                !resentPaymentIsAllowed && (
                    <Alert
                        variant="error"
                        title={PAYMENT_IS_FAILED_ALERT.title}
                        text={PAYMENT_IS_FAILED_ALERT.text}
                    />
                )}
            {resentPaymentIsAllowed && (
                <Alert
                    variant="error"
                    title={PAYMENT_CAN_BE_RESENT_ALERT.title}
                    text={PAYMENT_CAN_BE_RESENT_ALERT.text}
                />
            )}
            {alert}
            <Card>
                <Card.Body>
                    <Card.Title>Overview</Card.Title>
                    <Page.Grid>
                        <Page.Col sm={12} md={6} lg={3}>
                            <LabeledItem
                                labelName="Account ID"
                                labelValue={account?.accountId}
                            />
                            <LabeledItem
                                labelName="Payment Entity"
                                labelValue={paymentEntity}
                            />
                        </Page.Col>
                        <Page.Col sm={12} md={6} lg={3}>
                            <LabeledItem
                                labelName="Account Name"
                                labelValue={
                                    <TruncatedText
                                        placement="top"
                                        routeUrl={`/account/${account?.accountId}`}
                                        useLink={true}
                                        value={account?.accountName || ''}
                                    />
                                }
                            />
                            <LabeledItem
                                labelName="Program Name"
                                labelValue={
                                    account?.accountPayee?.payoneerProgram
                                        ?.payoneerProgramName
                                }
                            />
                        </Page.Col>
                        <Page.Col sm={12} md={6} lg={3}>
                            <LabeledItem
                                labelName="Contract ID"
                                labelValue={
                                    contractAdvance?.contract?.contractId
                                }
                            />
                            <LabeledItem
                                labelName="Program ID"
                                labelValue={
                                    account?.accountPayee?.payoneerProgram
                                        ?.payoneerProgramId
                                }
                            />
                        </Page.Col>
                        <Page.Col sm={12} md={6} lg={3}>
                            <LabeledItem
                                labelName="Contract Name"
                                labelValue={
                                    <TruncatedText
                                        placement="top"
                                        routeUrl={`/contract/${contractAdvance?.contract?.contractId}`}
                                        useLink={true}
                                        value={
                                            contractAdvance?.contract
                                                ?.contractName || ''
                                        }
                                    />
                                }
                            />
                            <LabeledItem
                                labelName="Account Payee Id"
                                labelValue={
                                    contractAdvance?.contract?.account
                                        ?.accountPayee?.accountPayeeId
                                }
                            />
                        </Page.Col>
                    </Page.Grid>
                </Card.Body>
            </Card>
            <Card data-testId="advanceInformation">
                <Card.Body>
                    <Card.Title>Contract Advance Information</Card.Title>
                    <Page.Grid>
                        <Page.Col sm={12} md={6} lg={3}>
                            <LabeledItem
                                labelName="Advance Id"
                                labelValue={contractAdvance?.contractAdvanceId}
                            />
                            <LabeledItem
                                labelName="Advance Currency"
                                labelValue={contractAdvance?.currencyCode}
                            />
                        </Page.Col>
                        <Page.Col sm={12} md={6} lg={3}>
                            <LabeledItem
                                labelName="Pre Tax Amount"
                                labelValue={contractAdvance?.amount}
                            />
                            <LabeledItem
                                labelName="Post Tax Payable Amount"
                                labelValue={
                                    contractAdvance?.amountAfterWithholdingAndVat
                                }
                            />
                        </Page.Col>
                        <Page.Col sm={12} md={6} lg={3}>
                            <LabeledItem
                                labelName="WHT"
                                labelValue={contractAdvance?.withholdingTaxAmount?.toString()}
                            />
                        </Page.Col>
                        <Page.Col sm={12} md={6} lg={3}>
                            <LabeledItem
                                labelName="VAT"
                                labelValue={contractAdvance?.vatAmount?.toString()}
                            />
                        </Page.Col>
                    </Page.Grid>
                </Card.Body>
            </Card>
            <Card data-testId="paymentInformation">
                <Card.Body>
                    <Card.Title>Payment Information</Card.Title>
                    <Page.Grid>
                        <Page.Col sm={12} md={6} lg={3}>
                            <LabeledItem
                                labelName="Payment Currency"
                                labelValue={
                                    worksheetPaymentContractAdvance?.amount
                                        .convertedAmount.currencyCode
                                }
                            />
                            <LabeledItem
                                labelName="Post Tax Payable Amount"
                                helpTooltip={{
                                    id: 'PostTaxPayableTooltip',
                                    message: POST_TAX_PAYABLE_TOOLTIP_MSG,
                                }}
                                labelValue={
                                    worksheetPaymentContractAdvance
                                        ?.amountAfterWithholdingAndVat
                                        .convertedAmount.amount
                                }
                            />
                        </Page.Col>
                        <Page.Col sm={12} md={6} lg={3}>
                            <LabeledItem
                                labelName="Pre Tax Amount"
                                helpTooltip={{
                                    id: 'AmountTooltip',
                                    message: AMOUNT_TOOLTIP_MSG,
                                }}
                                labelValue={
                                    worksheetPaymentContractAdvance?.amount
                                        .convertedAmount.amount
                                }
                            />
                            {worksheetPaymentContractAdvanceIsFailed ? (
                                <LabeledItem
                                    labelName="Error Message"
                                    labelValue={
                                        getSendPayments(
                                            worksheetPaymentContractAdvance.actionStates
                                        )?.message || EMPTY_CHAR
                                    }
                                />
                            ) : (
                                <LabeledItem
                                    labelName="Date Sent to Payoneer"
                                    labelValue={dateSentToPayoneer}
                                />
                            )}
                        </Page.Col>
                        <Page.Col sm={12} md={6} lg={3}>
                            <LabeledItem
                                labelName="WHT"
                                helpTooltip={{
                                    id: 'WhtTooltip',
                                    message: WHT_TOOLTIP_MSG,
                                }}
                                labelValue={
                                    worksheetPaymentContractAdvance
                                        ?.withholdingTaxAmount.convertedAmount
                                        .amount
                                }
                            />
                            {worksheetPaymentContractAdvanceIsFailed && (
                                <LabeledItem
                                    labelName="Date Sent to Payoneer"
                                    labelValue={dateSentToPayoneer}
                                />
                            )}
                        </Page.Col>
                        <Page.Col sm={12} md={6} lg={3}>
                            <LabeledItem
                                labelName="VAT"
                                helpTooltip={{
                                    id: 'VatTooltip',
                                    message: VAT_TOOLTIP_MSG,
                                }}
                                labelValue={
                                    worksheetPaymentContractAdvance?.vatAmount
                                        .convertedAmount.amount
                                }
                            />
                        </Page.Col>
                    </Page.Grid>
                </Card.Body>
            </Card>
        </div>
    );
};

export default AdvanceDetail;