import React, { useEffect, useState } from 'react';
import { Alert, GridTable } from '@theorchard/suite-components';
import { useFeatureFlag } from '@theorchard/suite-frontend';
import { useParams, Link } from 'react-router-dom';
import { useAbacusWorksheetAdjustmentsAndDetails } from 'src/apollo/queries/adjustment';
import {
    BATCH_LIST_ERROR_MESSAGE,
    NO_AUTO_FLOWTHROUGH_ADJUSTMENTS_TITLE,
} from 'src/apollo/type-constants/adjustment';
import { AdjustmentsBatchFilters } from 'src/components/adjustments/adjustments-batch-filters';
import AdjustmentsBatchListTableColumns from 'src/components/adjustments/adjustments-batch-list-table-columns';
import { AdjustmentsFilter } from 'src/types/adjustment';
import {
    ADJUST_FILTERS_MSG,
    DEFAULT_ITEMS_PER_PAGE,
    DEFAULT_NO_RESULTS_MSG,
    NO_BATCH_DATA,
    USER_FEATURES,
} from 'src/constants';
import type { BatchFilter } from 'src/types/adjustment-file';
import { Illustration } from '@theorchard/suite-icons';
import type { GetAbacusWorksheetAdjustmentsAndDetailsQuery } from 'src/apollo/queries/adjustment/__generated__/get-abacus-worksheet-adjustment-and-details';

type AbacusWorksheetAdjustmentAndDetail =
    | GetAbacusWorksheetAdjustmentsAndDetailsQuery['abacusWorksheetAdjustmentsAndDetails']['items'][0]
    | null;

interface AdjustmentsBatchListPropTypes {
    batchType: string | null | undefined;
    batchStatus: string | null | undefined;
    isAutoGenerateEnabled: boolean;
}
export const AdjustmentsBatchList: React.FC<AdjustmentsBatchListPropTypes> = ({
    batchType,
    batchStatus,
    isAutoGenerateEnabled,
}) => {
    const { batchId } = useParams<{
        batchId: string;
    }>();
    const [adjustments, setAdjustments] = useState<any>([]);
    const [totalCount, setTotalCount] = useState<number>(0);
    const [pageSize, setPageSize] = useState<number>(DEFAULT_ITEMS_PER_PAGE);
    const [page, setPage] = useState<number>(0);

    const [filters, setFilters] = useState<Partial<AdjustmentsFilter>>({
        limit: DEFAULT_ITEMS_PER_PAGE,
        offset: 0,
        statementPeriodAdjustmentFileId: batchId,
    });

    const [areAllFiltersCleared, setAreAllFiltersCleared] = useState(false);

    const [requestParams, setRequestParams] = useState<BatchFilter>({
        statementPeriodAdjustmentFileId: parseInt(batchId),
        limit: pageSize,
        offset: page * pageSize,
    });

    const qaLookerReportLink = `https://theorchard.looker.com/looks/22123?f[dt_abacus_batch_adjustments_expenses_qa.batch_id]=${batchId}`;
    const uatLookerReportLink = `https://theorchard.looker.com/looks/26858`;
    const prodLookerReportLink = `https://theorchard.looker.com/looks/22125?f[dt_abacus_batch_adjustments_expenses_prod.batch_id]=${batchId}`;

    let lookerReportLink = qaLookerReportLink;

    if (process.env.ENV?.toUpperCase() === 'PROD') {
        lookerReportLink = prodLookerReportLink;
    } else if (process.env.ENV?.toUpperCase() === 'UAT') {
        lookerReportLink = uatLookerReportLink;
    }
    const { data, loading, error } = useAbacusWorksheetAdjustmentsAndDetails({
        ...requestParams,
        filters: {
            accountIds: filters?.accountIds || null,
            contractIds: filters?.contractIds || null,
            applyToFlowthroughPayment:
                filters?.applyToFlowthroughPayment || null,
        },
    });

    const isFeatureAbacusAdjustmentsBatchPageFiltersEnabled = useFeatureFlag(
        USER_FEATURES.ABACUS_ADJUSTMENTS_BATCH_PAGE_FILTERS
    );

    const formatAdjustmentsList = (
        adjustmentsList: AbacusWorksheetAdjustmentAndDetail[]
    ) =>
        adjustmentsList?.map(
            (adjustment: AbacusWorksheetAdjustmentAndDetail) => {
                const id =
                    adjustment?.worksheetAdjustmentDetailId === null
                        ? adjustment?.worksheetAdjustmentId
                        : `${adjustment?.worksheetAdjustmentId}-${adjustment?.worksheetAdjustmentDetailId}`;
                return { ...adjustment, id };
            }
        ) || [];

    useEffect(() => {
        if (data && data?.abacusWorksheetAdjustmentsAndDetails) {
            setTotalCount(
                data.abacusWorksheetAdjustmentsAndDetails.totalCount || 0
            );
            setAdjustments(
                formatAdjustmentsList(
                    data.abacusWorksheetAdjustmentsAndDetails.items
                )
            );
        }
    }, [data, loading, requestParams]);

    useEffect(() => {
        setRequestParams({
            ...requestParams,
            limit: pageSize,
            offset: page * pageSize,
        });
    }, [page, pageSize]);

    const changeHandler = (
        fieldName: keyof AdjustmentsFilter,
        value: string | string[] | null | undefined
    ) => {
        const key = fieldName;
        if (!value || value.length === 0) {
            const params = structuredClone(filters);
            delete params[key];
            setFilters({ ...params, offset: 0 });
        } else
            setFilters({
                ...filters,
                offset: 0,
                [key]: value,
            });
        setPage(0);
        setAreAllFiltersCleared(false);
    };

    const hasFilterApplied = () =>
        Boolean(
            filters?.contractIds ||
            filters?.accountIds ||
            filters?.applyToFlowthroughPayment
        );

    const onClearFilters = () => {
        setRequestParams({
            statementPeriodAdjustmentFileId: parseInt(batchId),
            limit: DEFAULT_ITEMS_PER_PAGE,
            offset: 0,
        });
        setFilters({
            ...filters,
            accountIds: null,
            contractIds: null,
            applyToFlowthroughPayment: null,
        });
        setPage(0);
        setAreAllFiltersCleared(true);
    };

    const noFlowthroughAdjustmentsGenerate = (
        <div className="NoFlowthroughAdjustments">
            The process completed successfully, but no accounts <br />
            matched your selected criteria. Try adjusting your filters and{' '}
            <br />
            run the generation again.
        </div>
    );
    return (
        <div className="AdjustmentsBatchListTable">
            {error && (
                <Alert
                    variant="error"
                    text={BATCH_LIST_ERROR_MESSAGE}
                    className="error-alert"
                />
            )}
            {isFeatureAbacusAdjustmentsBatchPageFiltersEnabled && (
                <div className="AdjustmentsBatchListTable-filters">
                    <AdjustmentsBatchFilters
                        areAllFiltersCleared={areAllFiltersCleared}
                        filters={filters}
                        changeHandler={changeHandler}
                    />
                </div>
            )}
            <GridTable
                name="sticky"
                data={adjustments}
                paginated
                page={page}
                pageSize={pageSize}
                totalCount={totalCount}
                onPageChange={setPage}
                onPageSizeChange={setPageSize}
                loading={loading}
                loadingRows={pageSize}
                bordered
                showSelectOnlyLinks={true}
                rowKey="id"
                headerRight={
                    <Link
                        className="AdjustmentsBatch-IndividualBatch-Table-Header"
                        to={{ pathname: lookerReportLink }}
                        target="_blank"
                        data-testid="lookerReportLink"
                    >
                        View batch in looker
                    </Link>
                }
                onClearFilters={onClearFilters}
                showClearFilters={hasFilterApplied()}
                showUpdateIndicator
                stickyHeader
                maxHeight={500}
                columnDefs={AdjustmentsBatchListTableColumns()}
                emptyStateBody={
                    hasFilterApplied()
                        ? ADJUST_FILTERS_MSG
                        : isAutoGenerateEnabled &&
                            batchType === 'auto' &&
                            batchStatus === 'no_records'
                          ? noFlowthroughAdjustmentsGenerate
                          : ''
                }
                emptyStateIcon={<Illustration name="noResults" />}
                emptyStateTitle={
                    hasFilterApplied()
                        ? DEFAULT_NO_RESULTS_MSG
                        : isAutoGenerateEnabled &&
                            batchType === 'auto' &&
                            batchStatus === 'no_records'
                          ? NO_AUTO_FLOWTHROUGH_ADJUSTMENTS_TITLE
                          : NO_BATCH_DATA
                }
            ></GridTable>
        </div>
    );
};

export default AdjustmentsBatchList;