import type { FC, RefObject } from 'react';
import { useEffect } from 'react';
import React, { useState } from 'react';
import {
    Button,
    Pill,
    Status,
    Tag,
    GlyphButton,
    MetadataList,
} from '@theorchard/suite-components';
import { PageHeader } from '@theorchard/suite-components';
import { EMPTY_CHAR, IMAGE_PLACEHOLDER_URL } from 'src/constants';
import BasicAccountInfo from 'src/pages/productModal/components/basicAccountInfo';
import ProductModalQueueMoveSidecar from 'src/pages/productModal/components/productModalQueueMoveSidecar';
import { useSpotifyWatchlistArtistFF } from 'src/utils/features';
import { OAReleasePageURL } from 'src/utils/oa';
import { trackContentReviewEvent, formatProductDate } from 'src/utils/product';
import ProductModalApprovalSidecar from '../productModalApprovalSidecar';
import ProductModalApprovalSidecarV2 from '../productModalApprovalSidecarV2';
import ProductModalRejectionSidecar from '../productModalRejectionSidecar';
import ProductReviewHistorySidebar from '../productReviewHistorySidebar';
import type { Product } from 'src/data/queries/product/types';
import type { TargetGroup } from 'src/data/queries/reviewQueueItem/types';
import type { MergedProduct } from 'src/product/product';
import type { SubmissionType, Validation } from 'src/types';

export const CLASS_NAME = 'ProductModalHeader';
const INTL_PREFIX = 'contentReview.productModalHeader';

export interface Props {
    product: Product;
    mergedProduct: MergedProduct;
    submissionType: SubmissionType | undefined;
    queueName: string | undefined;
    isApprovalNoteRequired: boolean;
    isApprovalBlocked: boolean;
    isRejectionBlocked: boolean;
    isReviewHistoryDisabled: boolean;
    isSubmittingReview: boolean;
    productReviewQueueId: number;
    onReviewCompleted: (status: string, eventType?: string) => void;
    onQueueMove: (
        destinationQueueName: string,
        movedToTargetId?: number,
        moveNote?: string
    ) => void;
    productTargetGroup: TargetGroup | null;
    submittedByUserLanguage: string | null;
    sidebarRef: RefObject<Element>;
    lockedProductError: boolean;
    wasExistingLockDetected: boolean;
    validations?: Validation[];
}

const ProductModalHeader: FC<Props> = ({
    product,
    mergedProduct,
    submissionType,
    queueName,
    isApprovalNoteRequired,
    isApprovalBlocked,
    isRejectionBlocked,
    isReviewHistoryDisabled,
    isSubmittingReview,
    productReviewQueueId,
    onReviewCompleted,
    onQueueMove,
    productTargetGroup,
    submittedByUserLanguage,
    sidebarRef,
    lockedProductError,
    wasExistingLockDetected,
    validations,
}) => {
    const [additionalApprovalNotes, setAdditionalApprovalNotes] =
        useState<string>('');
    const [isApprovalSidecarOpen, setIsApprovalSidecarOpen] =
        useState<boolean>(false);

    const [approvalNote, setApprovalNote] = useState<string>('');
    const [approvalReason, setApprovalReason] = useState<string>('');
    const [trackApprovalReasons, setTrackApprovalReasons] = useState<
        Record<string, string>
    >({});

    const [isRejectionSidecarOpen, setIsRejectionSidecarOpen] =
        useState<boolean>(false);

    const [isMoveSidecarOpen, setIsMoveSidecarOpen] = useState<boolean>(false);

    const [isReviewHistorySidebarOpen, setIsReviewHistorySidebarOpen] =
        useState<boolean>(false);

    const isProductLocked = lockedProductError && wasExistingLockDetected;

    const requestCloseApprovalModal = () => {
        setIsApprovalSidecarOpen(false);
    };

    const requestCloseRejectionModal = () => {
        setIsRejectionSidecarOpen(false);
    };

    const handleSetApprovalNote = (note: string) => {
        setApprovalNote(note);
    };

    const handleSetApprovalReasons = (reason: string) => {
        setApprovalReason(reason);
    };

    const handleSetTrackApprovalReasons = (reason: Record<string, string>) => {
        setTrackApprovalReasons(reason);
    };

    const handleTrackApprovalChange = (
        tuid: string,
        cannedResponseId: string
    ) => {
        setTrackApprovalReasons(prev => ({
            ...prev,
            [tuid]: cannedResponseId,
        }));
    };

    const isReviewHistorySidebarEnabled = Boolean(
        !isReviewHistoryDisabled && product.reviewHistory.items.length > 1
    );

    const isSpotifyWatchlistEnabled = useSpotifyWatchlistArtistFF();

    // clear state for next item
    useEffect(() => {
        setIsReviewHistorySidebarOpen(false);
    }, [productReviewQueueId]);

    return (
        <>
            <PageHeader
                sticky
                className={CLASS_NAME}
                testId={CLASS_NAME}
                coverArtProps={{
                    loading: false,
                    url:
                        mergedProduct.basics.imageLocation.get()?.toString() ||
                        IMAGE_PLACEHOLDER_URL,
                }}
                topMetadata={{
                    left: () => (
                        <>
                            <Tag
                                text={$t('common.productTypes.digitalAudio')}
                                variant="category"
                            />
                            <MetadataList
                                key="metadataListLeft"
                                items={[
                                    {
                                        label: `${$t(
                                            'common.fieldNames.upc'
                                        )}  : `,
                                        value: String(
                                            mergedProduct.basics.upc.get()
                                        ),
                                        layout: 'horizontal',
                                    },
                                    {
                                        label: `${$t(
                                            'common.fieldNames.productId'
                                        )}  : `,
                                        value:
                                            String(
                                                mergedProduct.basics.productId
                                            ) || EMPTY_CHAR,
                                        layout: 'horizontal',
                                    },
                                    {
                                        label: `${$t(
                                            'common.fieldNames.service_tier'
                                        )}  : `,
                                        value: String(
                                            mergedProduct.label.serviceTier.get() ??
                                                EMPTY_CHAR
                                        ),
                                        layout: 'horizontal',
                                    },
                                    {
                                        label: '',
                                        value: (
                                            <a
                                                data-testid="oa-edit-link"
                                                href={
                                                    isProductLocked
                                                        ? undefined
                                                        : OAReleasePageURL(
                                                              mergedProduct
                                                                  .basics
                                                                  .productId,
                                                              mergedProduct.isRevision
                                                          )
                                                }
                                                onClick={e => {
                                                    if (isProductLocked) {
                                                        e.preventDefault();
                                                        return;
                                                    }
                                                    trackContentReviewEvent(
                                                        'Click',
                                                        'View/ Edit in OA',
                                                        null,
                                                        null,
                                                        null,
                                                        mergedProduct.isRevision
                                                    );
                                                }}
                                                target="_blank"
                                                rel="noreferrer"
                                                className={`oa-edit ${
                                                    isProductLocked
                                                        ? 'oa-edit--disabled'
                                                        : ''
                                                }`}
                                                aria-disabled={isProductLocked}
                                            >
                                                {$t(
                                                    `${INTL_PREFIX}.editProduct`
                                                )}
                                            </a>
                                        ),
                                        layout: 'horizontal',
                                    },
                                ]}
                            />
                        </>
                    ),
                    right: () => (
                        <Pill
                            className="header-pill"
                            testId={`${CLASS_NAME}-productLabel`}
                            brand="orchard"
                            popoverOptions={{
                                id: 'header-pill-label-name',
                                contentClassName: 'BasicAccountInfoPopOver',
                                content: (
                                    <BasicAccountInfo
                                        product={mergedProduct}
                                        brand="orchard"
                                    />
                                ),
                            }}
                            text={mergedProduct.label.label.get()?.toString()}
                        />
                    ),
                }}
                mainContent={{
                    title:
                        mergedProduct.basics.productName.currentValue ||
                        EMPTY_CHAR,
                    append: () => (
                        <Status
                            testId={`${CLASS_NAME}-submissionType`}
                            variant="success"
                            text={
                                submissionType
                                    ? $t(
                                          `${INTL_PREFIX}.status.${submissionType}`
                                      )
                                    : EMPTY_CHAR
                            }
                            filled
                        />
                    ),
                }}
                bottomMetadata={() => (
                    <MetadataList
                        items={[
                            {
                                label: `${$t(
                                    'common.artistType.product.primary_artist'
                                )}  : `,
                                value:
                                    mergedProduct.basics.contributors.primaryArtists
                                        .get()
                                        .join(', ') || EMPTY_CHAR,
                                layout: 'horizontal',
                            },
                        ]}
                    />
                )}
                actions={({ small }) => (
                    <>
                        {!small && (
                            <MetadataList
                                className="metadata-list-dates"
                                items={[
                                    {
                                        label: `${$t(
                                            'common.fieldNames.sale_start_date'
                                        )}  : `,
                                        value: (
                                            <h3>
                                                {String(
                                                    formatProductDate(
                                                        mergedProduct.scheduling
                                                            .saleStartDate
                                                    )
                                                )}
                                            </h3>
                                        ),
                                    },
                                    {
                                        label: `${$t(
                                            'common.fieldNames.preorder_date'
                                        )}  : `,
                                        value: (
                                            <h3>
                                                {String(
                                                    formatProductDate(
                                                        mergedProduct.scheduling
                                                            .preorderDate
                                                    )
                                                )}
                                            </h3>
                                        ),
                                    },
                                ]}
                            />
                        )}
                        <div className="rhs-buttons">
                            <Button
                                variant="tertiary"
                                data-testid="queue-move-action-button"
                                onClick={() => setIsMoveSidecarOpen(true)}
                                disabled={isProductLocked || isSubmittingReview}
                            >
                                {$t(`${INTL_PREFIX}.moveButton`)}
                            </Button>
                            <Button
                                id="reject-button"
                                data-testid="reject-button"
                                variant="secondary"
                                onClick={() => setIsRejectionSidecarOpen(true)}
                                disabled={isProductLocked || isRejectionBlocked}
                            >
                                {$t(`${INTL_PREFIX}.rejectButton`)}
                            </Button>
                            <Button
                                id="approve-button"
                                data-testid="approve-button"
                                variant="primary"
                                onClick={() => setIsApprovalSidecarOpen(true)}
                                disabled={isProductLocked || isApprovalBlocked}
                            >
                                {$t(`${INTL_PREFIX}.approveButton`)}
                            </Button>
                            <GlyphButton
                                id="review-history-button"
                                data-testid="review-history-button"
                                variant="tertiary"
                                name="clock"
                                disabled={
                                    isProductLocked ||
                                    !isReviewHistorySidebarEnabled
                                }
                                tooltip={$t(
                                    `${INTL_PREFIX}.reviewHistoryTooltip`
                                )}
                                onClick={() => {
                                    setIsReviewHistorySidebarOpen(true);
                                    trackContentReviewEvent(
                                        'Click',
                                        'Open History',
                                        null,
                                        product,
                                        null,
                                        mergedProduct.isRevision
                                    );
                                }}
                            />
                        </div>
                    </>
                )}
            />
            <ProductModalQueueMoveSidecar
                isOpen={isMoveSidecarOpen}
                product={mergedProduct}
                closeModal={() => setIsMoveSidecarOpen(false)}
                onQueueMove={onQueueMove}
                productTargetGroup={productTargetGroup}
                currentQueueName={queueName}
            />
            {!isSpotifyWatchlistEnabled && isApprovalSidecarOpen && (
                <ProductModalApprovalSidecar
                    product={product}
                    mergedProduct={mergedProduct}
                    isApprovalNoteRequired={isApprovalNoteRequired}
                    isOpen={isApprovalSidecarOpen}
                    closeModal={requestCloseApprovalModal}
                    additionalNotes={additionalApprovalNotes}
                    onAdditionalNotesChange={(val: string) =>
                        setAdditionalApprovalNotes(val)
                    }
                    onReviewCompleted={onReviewCompleted}
                    productReviewQueueId={productReviewQueueId}
                    approvalNote={approvalNote}
                    handleSetApprovalNote={handleSetApprovalNote}
                    approvalReason={approvalReason}
                    handleSetApprovalReasons={handleSetApprovalReasons}
                    trackApprovalReasons={trackApprovalReasons}
                    handleSetTrackApprovalReasons={
                        handleSetTrackApprovalReasons
                    }
                    handleTrackApprovalChange={handleTrackApprovalChange}
                />
            )}
            {isSpotifyWatchlistEnabled && (
                <ProductModalApprovalSidecarV2
                    product={product}
                    mergedProduct={mergedProduct}
                    isOpen={isApprovalSidecarOpen}
                    closeModal={requestCloseApprovalModal}
                    onReviewCompleted={onReviewCompleted}
                    productReviewQueueId={productReviewQueueId}
                    validations={validations}
                />
            )}
            <ProductModalRejectionSidecar
                product={product}
                mergedProduct={mergedProduct}
                isOpen={isRejectionSidecarOpen}
                closeModal={requestCloseRejectionModal}
                onReviewCompleted={onReviewCompleted}
                productReviewQueueId={productReviewQueueId}
                submittedByUserLanguage={submittedByUserLanguage}
            />
            {isReviewHistorySidebarEnabled && isReviewHistorySidebarOpen && (
                <ProductReviewHistorySidebar
                    isOpen={isReviewHistorySidebarOpen}
                    closeModal={() => {
                        setIsReviewHistorySidebarOpen(false);
                        trackContentReviewEvent(
                            'Click',
                            'Close History',
                            null,
                            product,
                            null,
                            mergedProduct.isRevision
                        );
                    }}
                    product={product}
                    sidebarRef={sidebarRef.current}
                    isRevisedProduct={mergedProduct.isRevision}
                />
            )}
        </>
    );
};

export default ProductModalHeader;