import {ChevronRight} from '@gravity-ui/icons';
import {ActionTooltip, Alert, Button, Flex, Icon, Label, Skeleton} from '@gravity-ui/uikit';

import {ResponseError} from '../../../../../components/Errors/ResponseError';
import {SELF_CHECK_RESULT_CONFIG} from '../../../../../components/HealthcheckStatus/config';
import {healthcheckApi} from '../../../../../store/reducers/healthcheckInfo/healthcheckInfo';
import {SelfCheckResult} from '../../../../../types/api/healthcheck';
import {cn} from '../../../../../utils/cn';
import {useAutoRefreshInterval} from '../../../../../utils/hooks';
import {useClusterNameFromQuery} from '../../../../../utils/hooks/useDatabaseFromQuery';
import {isEnumMember} from '../../../../../utils/typecheckers';
import {HEALTHCHECK_RESULT_TO_TEXT} from '../../../constants';
import {useTenantQueryParams} from '../../../useTenantQueryParams';

import i18n from './i18n';

import './HealthcheckPreview.scss';

const b = cn('ydb-healthcheck-preview');

interface HealthcheckPreviewProps {
    database: string;
    compact?: boolean;
}

export function HealthcheckPreview(props: HealthcheckPreviewProps) {
    const {database} = props;
    const clusterName = useClusterNameFromQuery();
    const [autoRefreshInterval] = useAutoRefreshInterval();

    const {handleShowHealthcheckChange} = useTenantQueryParams();

    const {
        currentData: data,
        isFetching,
        error,
    } = healthcheckApi.useGetHealthcheckInfoQuery(
        {database, clusterName},
        {
            pollingInterval: autoRefreshInterval,
        },
    );

    const loading = isFetching && data === undefined;

    const apiSelfCheckResult = data?.self_check_result;
    const selfCheckResult = isEnumMember(SelfCheckResult, apiSelfCheckResult)
        ? apiSelfCheckResult
        : SelfCheckResult.UNSPECIFIED;
    const statusConfig = SELF_CHECK_RESULT_CONFIG[selfCheckResult];

    const modifier = selfCheckResult.toLowerCase();

    if (!props.compact && loading) {
        return <Skeleton className={b('skeleton')} />;
    }

    const issuesCount = data?.issue_log?.filter((issue) => !issue.reason).length ?? 0;

    const issuesText = issuesCount ? i18n('description_problems', {count: issuesCount}) : '';

    if (!props.compact && selfCheckResult === 'GOOD' && !issuesCount && !loading) {
        return null;
    }

    if (props.compact) {
        if (loading) {
            return null;
        }

        return (
            <ActionTooltip title={HEALTHCHECK_RESULT_TO_TEXT[selfCheckResult]}>
                <Label
                    className={b('compact-status', {emergency: statusConfig.emergency})}
                    theme={statusConfig.labelTheme}
                    icon={
                        <Icon
                            size={12}
                            data={statusConfig.icon}
                            className={b('icon', {[modifier]: true})}
                        />
                    }
                    onClick={() => {
                        handleShowHealthcheckChange(true);
                    }}
                >
                    <Flex alignItems={'center'} gap={1}>
                        {statusConfig.title}: {i18n('issues-count', {count: issuesCount})}
                        <Icon data={ChevronRight} size={12} />
                    </Flex>
                </Label>
            </ActionTooltip>
        );
    }

    const renderAlertMessage = () => {
        if (error) {
            return <ResponseError error={error} defaultMessage={i18n('description_no-data')} />;
        }
        return (
            <Flex
                gap={1}
                alignItems="center"
                justifyContent={'space-between'}
                className={b('alert-message')}
            >
                <Flex gap={1} alignItems="center">
                    {HEALTHCHECK_RESULT_TO_TEXT[selfCheckResult]}
                    {issuesText ? ` ${issuesText}` : ''}
                </Flex>
                {issuesCount && (
                    <Button
                        onClick={() => {
                            handleShowHealthcheckChange(true);
                        }}
                    >
                        {i18n('action_review-issues')}
                    </Button>
                )}
            </Flex>
        );
    };

    return (
        <Alert
            className={b()}
            theme={statusConfig.alertTheme}
            view={error ? 'outlined' : 'filled'}
            message={renderAlertMessage()}
            icon={
                <Icon
                    size={18}
                    data={statusConfig.icon}
                    className={b('icon', {[modifier]: true})}
                />
            }
        />
    );
}