import type { FC, RefObject } from 'react';
import { useEffect } from 'react';
import React, { useState } from 'react';
import {
    CoverArt,
    Button,
    Pill,
    Status,
    Tag,
    GlyphButton,
} 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 ProductModalApprovalSidecarV2 from 'src/pages/productModal/components/productModalApprovalSidecarV2';
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 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 = 'ProductModalHeaderV2';
const INTL_PREFIX = 'contentReview.productModalHeaderV2';

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 ProductModalHeaderV2: FC<Props> = ({
    product,
    mergedProduct,
    submissionType,
    queueName,
    isApprovalNoteRequired,
    isApprovalBlocked,
    isRejectionBlocked,
    isReviewHistoryDisabled,
    isSubmittingReview,
    productReviewQueueId,
    onReviewCompleted,
    onQueueMove,
    productTargetGroup,
    submittedByUserLanguage,
    sidebarRef,
    lockedProductError,
    wasExistingLockDetected,
    validations,
}) => {
    const isSpotifyWatchlistEnabled = useSpotifyWatchlistArtistFF();

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

    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 [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
    );

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

    return (
        <div className={CLASS_NAME} data-testid={CLASS_NAME}>
            <PageHeader.Row>
                <PageHeader.Secondary>
                    <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()}
                    />
                    <span>
                        <span id={`${CLASS_NAME}-productUPC`}>
                            <span className="header-label">
                                {`${$t('common.fieldNames.upc')}  : `}{' '}
                            </span>
                            <span
                                className="header-label-text"
                                data-testid={`${CLASS_NAME}-productUPC-value`}
                            >
                                {String(mergedProduct.basics.upc.get())}
                            </span>
                        </span>
                        <span className="header-separator" />
                        <span id={`${CLASS_NAME}-productId`}>
                            <span className="header-label">{`${$t(
                                'common.fieldNames.productId'
                            )}  : `}</span>
                            <span
                                className="header-label-text"
                                data-testid={`${CLASS_NAME}-productId-value`}
                            >
                                {String(mergedProduct.basics.productId) ||
                                    EMPTY_CHAR}
                            </span>
                        </span>
                        <span className="header-separator" />
                        <span id={`${CLASS_NAME}-serviceTier`}>
                            <span className="header-label">{`${$t(
                                'common.fieldNames.service_tier'
                            )}  : `}</span>
                            <span
                                className="header-label-text"
                                data-testid={`${CLASS_NAME}-serviceTier-value`}
                            >
                                {String(
                                    mergedProduct.label.serviceTier.get() ??
                                        EMPTY_CHAR
                                )}
                            </span>
                        </span>
                        <span className="header-separator" />
                        <span id={`${CLASS_NAME}-saleStartDate`}>
                            <span className="header-label">{`${$t(
                                'common.fieldNames.sale_start_date'
                            )}  : `}</span>
                            <span
                                className="header-label-text"
                                data-testid={`${CLASS_NAME}-saleStartDate-value`}
                            >
                                {String(
                                    formatProductDate(
                                        mergedProduct.scheduling.saleStartDate
                                    )
                                )}
                            </span>
                        </span>
                        <span className="header-separator" />
                        <span id={`${CLASS_NAME}-preorderDate`}>
                            <span className="header-label">{`${$t(
                                'common.fieldNames.preorder_date'
                            )}  : `}</span>
                            <span
                                className="header-label-text"
                                data-testid={`${CLASS_NAME}-preorderDate-value`}
                            >
                                {String(
                                    formatProductDate(
                                        mergedProduct.scheduling.preorderDate
                                    )
                                )}
                            </span>
                        </span>
                    </span>
                    <Button
                        data-testid="oa-edit-button"
                        href={OAReleasePageURL(
                            mergedProduct.basics.productId,
                            mergedProduct.isRevision
                        )}
                        onClick={() =>
                            trackContentReviewEvent(
                                'Click',
                                'View/ Edit in OA',
                                null,
                                null,
                                null,
                                mergedProduct.isRevision
                            )
                        }
                        target="_blank"
                        rel="noreferrer"
                        variant="quaternary"
                        className="oa-edit"
                        disabled={isProductLocked}
                    >
                        {$t(`${INTL_PREFIX}.editProduct`)}
                    </Button>
                </PageHeader.Secondary>
            </PageHeader.Row>
            <PageHeader.Row>
                <PageHeader.Primary>
                    <CoverArt
                        url={
                            mergedProduct.basics.imageLocation
                                .get()
                                ?.toString() || IMAGE_PLACEHOLDER_URL
                        }
                    />
                    <div className={`${CLASS_NAME}-body-titles`}>
                        <Tag
                            text={$t('common.productTypes.digitalAudio')}
                            variant="category"
                        />
                        <PageHeader.PrimaryTitle>
                            <h4
                                className={`${CLASS_NAME}-productName`}
                                id={`${CLASS_NAME}-productName`}
                            >
                                {mergedProduct.basics.productName
                                    .currentValue || EMPTY_CHAR}
                            </h4>
                            <Status
                                testId={`${CLASS_NAME}-submissionType`}
                                variant="success"
                                text={
                                    submissionType
                                        ? $t(
                                              `${INTL_PREFIX}.status.${submissionType}`
                                          )
                                        : EMPTY_CHAR
                                }
                                filled
                            />
                        </PageHeader.PrimaryTitle>
                        <PageHeader.PrimarySubtitle
                            testId={`${CLASS_NAME}-productPrimaryArtists`}
                        >
                            {mergedProduct.basics.contributors.primaryArtists
                                .get()
                                .join(', ') || EMPTY_CHAR}
                        </PageHeader.PrimarySubtitle>
                    </div>
                </PageHeader.Primary>
                <PageHeader.Tertiary>
                    <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>
                </PageHeader.Tertiary>
            </PageHeader.Row>

            <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}
                />
            )}
        </div>
    );
};

export default ProductModalHeaderV2;