import React, { useState, useEffect } from 'react';
import {
    Button,
    Label,
    PageHeader,
    Status,
    Tag,
    Tooltip,
    TruncatedText,
} from '@theorchard/suite-components';
import { useFeatureFlag } from '@theorchard/suite-frontend';
import { AppIcon, BrandIcon, GlyphIcon } from '@theorchard/suite-icons';

import RestrictedByAbacusProfileWrapper from 'src/components/restricted-by-abacus-profile-wrapper';
import { Link } from 'src/components/shared/link';
import { ContractDeleteModal } from 'src/components/contract-detail/contract-delete-modal';
import { ContractReactivateModal } from 'src/components/contract-detail/contract-reactivate-modal';
import { ContractHistoryReportsLink } from 'src/components/contract-detail/contract-history-reports-link';
import { useContractBreadcrumbs } from 'src/hooks/breadcrumbs/contract';
import { getContractDetail as getAccountingContractDetail } from 'src/urls/externals/moneyhub';
import { getAccountDetail as getOAAccountDetail } from 'src/urls/externals/oa';
import {
    ACCOUNT_PAYMENT_ENTITY_DOES_NOT_MATCH_CONTRACT_PAYMENT_ENTITY_TOOLTIP_MSG,
    CONTRACT_STATUS,
    TOOLTIP_DELETE_BUTTON_DISABLED,
} from 'src/apollo/type-constants/contract';
import { AbacusContractLifecycleStatus } from 'src/apollo/definitions/globalTypes';
import { USER_FEATURES } from 'src/constants';

import type { AbacusContract } from 'src/types/abacus-contract';
import type {
    ContractStatusKey,
    ContractStatusValue,
} from 'src/apollo/type-constants/contract';

const TERMINATED_STATUSES: string[] = [
    AbacusContractLifecycleStatus.TERMINATED,
    AbacusContractLifecycleStatus.TO_BE_TERMINATED,
    AbacusContractLifecycleStatus.IN_COLLECTION_PERIOD,
];

export interface ContractDetailHeaderPropsTypes {
    contract: AbacusContract | null;
    loading: boolean;
    setIsEditingContractRenewalRules: (b: boolean) => void;
    setIsTerminatingContract: (b: boolean) => void;
}

export const ContractDetailHeader: React.FC<ContractDetailHeaderPropsTypes> = ({
    contract,
    loading,
    setIsEditingContractRenewalRules,
    setIsTerminatingContract,
}) => {
    const contractName = contract?.contractName ?? '';
    const lifecycleStatus = contract?.lifecycle?.lifecycleStatus;
    const isPrimaryContract = contract?.isPrimaryContract ?? false;

    const [contractStatus, setContractStatus] = useState<
        ContractStatusValue | undefined
    >();

    const [isContractDeleteModalOpen, setIsContractDeleteModalOpen] =
        useState(false);
    const [isContractReactivateModalOpen, setIsContractReactivateModalOpen] =
        useState(false);

    const breadcrumbs = useContractBreadcrumbs();

    const isFeaturePrimaryContractEnabled = useFeatureFlag(
        USER_FEATURES.ABACUS_PRIMARY_CONTRACT
    );

    const isContractTerminated = lifecycleStatus
        ? TERMINATED_STATUSES.includes(lifecycleStatus)
        : false;

    const isContractActive =
        lifecycleStatus === AbacusContractLifecycleStatus.ACTIVE;

    const isPaymentEntityValid =
        contract?.account?.accountPaymentTerm?.paymentEntity
            ?.referencePaymentEntityId ===
        contract?.referenceSigningEntity?.referencePaymentEntity
            ?.referencePaymentEntityId;

    useEffect(() => {
        if (lifecycleStatus) {
            setContractStatus(
                CONTRACT_STATUS.get(lifecycleStatus as ContractStatusKey)
            );
        }
    }, [lifecycleStatus]);

    const linksSection = (
        <div className="ContractDetail-header-links">
            <Label
                className="ContractDetail-header-label"
                text="View in Application:"
            />
            <Link
                icon={<BrandIcon brand="orchard" />}
                isExternal={true}
                label="OA"
                url={getOAAccountDetail(contract?.account?.accountId ?? '')}
            />
            <Link
                icon={<AppIcon app="moneyhub" />}
                isExternal={true}
                label="Accounting"
                url={getAccountingContractDetail(
                    contract?.account?.accountId ?? '',
                    contract?.contractId ?? ''
                )}
            />
        </div>
    );

    const infoSection = (
        <div className="ContractDetail-info">
            <h1 className="ContractDetail-info-contractName">
                <TruncatedText text={contractName} maxWidth={'40vw'} />
            </h1>
            <div className="ContractDetail-info-contractId">
                <div className="dotIcon">
                    {contract?.contractId && <GlyphIcon name="dot" size={12} />}
                </div>
                <div className="id" data-testid="contractId">
                    {contract?.contractId}
                </div>
            </div>
            <div className="ContractDetail-info-status">
                {contractStatus && (
                    <>
                        <Status
                            data-testid="contract-status"
                            text={contractStatus.label}
                            variant={contractStatus.variant}
                            filled={contractStatus.filled}
                            size="medium"
                        />
                    </>
                )}
            </div>
        </div>
    );

    const deleteButtonAndModal = (
        <RestrictedByAbacusProfileWrapper>
            <>
                {contract?.canBeDeleted ? (
                    <Button
                        className="delete-button"
                        data-testid="contractDeleteButton"
                        variant="danger-secondary"
                        onClick={() => setIsContractDeleteModalOpen(true)}
                    >
                        Delete
                    </Button>
                ) : (
                    <Tooltip
                        id="contractDeleteButtonTooltip"
                        testId="contractDeleteButtonTooltip"
                        message={TOOLTIP_DELETE_BUTTON_DISABLED}
                        placement="left"
                    >
                        <Button
                            className="delete-button"
                            data-testid="contractDeleteButton"
                            variant="danger-secondary"
                            disabled
                        >
                            Delete
                        </Button>
                    </Tooltip>
                )}
                <ContractDeleteModal
                    isContractDeleteModalOpen={isContractDeleteModalOpen}
                    onRequestCloseDeleteModal={() =>
                        setIsContractDeleteModalOpen(false)
                    }
                />
            </>
        </RestrictedByAbacusProfileWrapper>
    );

    const reactivateButtonAndModal = (
        <RestrictedByAbacusProfileWrapper>
            <>
                <Tooltip
                    id="contractReactivateButtonTooltip"
                    data-testid="contractReactivateButtonTooltip"
                    message={
                        ACCOUNT_PAYMENT_ENTITY_DOES_NOT_MATCH_CONTRACT_PAYMENT_ENTITY_TOOLTIP_MSG
                    }
                    show={!isPaymentEntityValid ? undefined : false}
                >
                    <Button
                        className="reactivate-button"
                        data-testid="contractReactivateButton"
                        disabled={!isPaymentEntityValid}
                        variant="secondary"
                        onClick={() => setIsContractReactivateModalOpen(true)}
                    >
                        Reactivate
                    </Button>
                </Tooltip>
                <ContractReactivateModal
                    contractName={contractName}
                    isContractReactivateModalOpen={
                        isContractReactivateModalOpen
                    }
                    onRequestCloseReactivateModal={() =>
                        setIsContractReactivateModalOpen(false)
                    }
                    onReactivateOpenContractRenewalSidecar={() => {
                        setIsEditingContractRenewalRules(true);
                        setIsTerminatingContract(false);
                    }}
                />
            </>
        </RestrictedByAbacusProfileWrapper>
    );

    const terminateButton = (
        <RestrictedByAbacusProfileWrapper>
            <Button
                className="terminate-button"
                data-testid="contractTerminateButton"
                variant="secondary"
                onClick={() => {
                    setIsEditingContractRenewalRules(true);
                    setIsTerminatingContract(true);
                }}
            >
                Terminate
            </Button>
        </RestrictedByAbacusProfileWrapper>
    );

    return (
        <PageHeader breadcrumbs={breadcrumbs} className="ContractDetail-header">
            <PageHeader.Metadata className="ContractDetail-header-metadata">
                <Tag
                    variant="category"
                    text={
                        isPrimaryContract && isFeaturePrimaryContractEnabled
                            ? 'Primary Contract'
                            : 'Contract'
                    }
                />
                {linksSection}
            </PageHeader.Metadata>
            <PageHeader.MainContent className="ContractDetail-header-main-content">
                <div className="ContractDetail-page-header">
                    {infoSection}
                    <div className="ContractDetail-top-buttons">
                        {deleteButtonAndModal}
                        {isContractTerminated && reactivateButtonAndModal}
                        {!loading && isContractActive && terminateButton}
                        <ContractHistoryReportsLink
                            className="HistoryReportsLink"
                            contractId={contract?.contractId ?? ''}
                            contractType={contract?.contractType ?? ''}
                        />
                    </div>
                </div>
            </PageHeader.MainContent>
        </PageHeader>
    );
};