import {CircleXmark, Pencil, TrashBin} from '@gravity-ui/icons';
import DataTable from '@gravity-ui/react-data-table';
import type {Column} from '@gravity-ui/react-data-table';
import {
    ClipboardButton,
    Link as ExternalLink,
    Flex,
    Icon,
    Label,
    Progress,
    Text,
    Tooltip,
} from '@gravity-ui/uikit';

import type {DropdownMenuItemWithDescription} from '../../components/DropdownMenu';
import {DropdownMenu} from '../../components/DropdownMenu';
import {EntityStatus} from '../../components/EntityStatus/EntityStatus';
import {VersionsBar} from '../../components/VersionsBar/VersionsBar';
import type {PreparedCluster} from '../../store/reducers/clusters/types';
import type {ClusterLink} from '../../types/additionalProps';
import {EFlag} from '../../types/api/enums';
import {uiFactory} from '../../uiFactory/uiFactory';
import {CLUSTER_LINK_CONTEXT} from '../../utils/clusterLinks/clusterLinkConstants';
import {resolveClusterLinks} from '../../utils/clusterLinks/resolveClusterLinks';
import {EMPTY_DATA_PLACEHOLDER, MONITORING_UI_TITLE} from '../../utils/constants';
import {formatNumber, formatStorageValuesToTb} from '../../utils/dataFormatters/dataFormatters';
import {getCleanBalancerValue} from '../../utils/parseBalancer';
import type {PreparedVersion} from '../../utils/versions/types';
import {clusterTabsIds} from '../Cluster/utils';

import {COLUMNS_NAMES, COLUMNS_TITLES} from './constants';
import i18n from './i18n';
import {b} from './shared';
import {calculateClusterPath} from './utils';
export const CLUSTERS_COLUMNS_WIDTH_LS_KEY = 'clustersTableColumnsWidth';

const EMPTY_CELL = <span className={b('empty-cell')}>{EMPTY_DATA_PLACEHOLDER}</span>;

/**
 * Helper function to get the first version from a list of prepared versions
 * Strips numeric prefixes (e.g., "1.2.3." -> "2.3.") and sorts the versions
 * Used as sortAccessor for version columns
 */
export function getFirstVersion(preparedVersions: PreparedVersion[]): string | undefined {
    const versions = preparedVersions
        .map((item) => item.version.replace(/^\d+\./, ''))
        .sort((v1, v2) => {
            // Split versions into components (dots or dashes)
            const parts1 = v1.split(/[.-]/);
            const parts2 = v2.split(/[.-]/);

            // Compare each component
            const maxLength = Math.max(parts1.length, parts2.length);
            for (let i = 0; i < maxLength; i++) {
                const part1 = parts1[i] || '';
                const part2 = parts2[i] || '';

                // Check if both parts are purely numeric
                const isNum1 = /^\d+$/.test(part1);
                const isNum2 = /^\d+$/.test(part2);

                // If both are purely numeric, compare numerically
                if (isNum1 && isNum2) {
                    const num1 = parseInt(part1, 10);
                    const num2 = parseInt(part2, 10);
                    if (num1 !== num2) {
                        return num1 - num2;
                    }
                } else {
                    // Otherwise, compare lexicographically
                    const comparison = part1.localeCompare(part2);
                    if (comparison !== 0) {
                        return comparison;
                    }
                }
            }
            return 0;
        });

    return versions[0] || undefined;
}

interface ClustersColumnsParams {
    isEditClusterAvailable?: boolean;
    isDeleteClusterAvailable?: boolean;
    onStatusClick?: (row: PreparedCluster) => void;
}

function getTitleColumn({
    isEditClusterAvailable,
    isDeleteClusterAvailable,
    onStatusClick,
}: ClustersColumnsParams) {
    return {
        name: COLUMNS_NAMES.TITLE,
        header: COLUMNS_TITLES[COLUMNS_NAMES.TITLE],
        width: 320,
        defaultOrder: DataTable.ASCENDING,
        sortAccessor: (row) => row.title || row.name,
        render: ({row}) => {
            const clusterStatus = row.cluster?.Overall;

            const cleanedBalancer = row.balancer ? getCleanBalancerValue(row.balancer) : null;

            const renderActions = () => {
                const menuItems: (
                    | DropdownMenuItemWithDescription
                    | DropdownMenuItemWithDescription[]
                )[] = [];

                const additionalLinks: ClusterLink[] = [];

                if (row.monitoring) {
                    const monitoringUrl = uiFactory.getMonitoringClusterLink?.(
                        row.monitoring,
                        row.name,
                    );

                    if (monitoringUrl) {
                        additionalLinks.push({
                            title: MONITORING_UI_TITLE,
                            url: monitoringUrl,
                            context: CLUSTER_LINK_CONTEXT.MONITORING,
                        });
                    }
                }

                if (uiFactory.getClusterLinks) {
                    additionalLinks.push(...uiFactory.getClusterLinks({clusterInfo: row}));
                }

                const clusterLinks = resolveClusterLinks(row, additionalLinks);

                if (clusterLinks.length) {
                    menuItems.push(
                        clusterLinks.map((link) => ({
                            title: link.title,
                            description: link.description,
                            iconStart: link.icon,
                            href: link.url,
                            target: link.target,
                        })),
                    );
                }

                const {onEditCluster, onDeleteCluster} = uiFactory;

                const manageItems: DropdownMenuItemWithDescription[] = [];

                if (isEditClusterAvailable && onEditCluster) {
                    manageItems.push({
                        title: i18n('edit-cluster'),
                        iconStart: Pencil,
                        action: () => {
                            onEditCluster({clusterData: row});
                        },
                    });
                }
                if (isDeleteClusterAvailable && onDeleteCluster) {
                    manageItems.push({
                        title: i18n('remove-cluster'),
                        iconStart: TrashBin,
                        action: () => {
                            onDeleteCluster({clusterData: row});
                        },
                        theme: 'danger',
                    });
                }

                if (manageItems.length) {
                    menuItems.push(manageItems);
                }

                if (!menuItems.length) {
                    return null;
                }

                return (
                    <DropdownMenu
                        items={menuItems}
                        defaultSwitcherProps={{view: 'flat-secondary', size: 'xs'}}
                        size="s"
                        menuProps={{size: 'l'}}
                    />
                );
            };

            const renderName = () => {
                return <ClusterName row={row} />;
            };

            const renderStatus = () => {
                const statusLabel = clusterStatus ? (
                    <EntityStatus.Label status={clusterStatus} size="xs" />
                ) : (
                    <EntityStatus.Label
                        status={EFlag.Grey}
                        note={row.cluster?.error || i18n('tooltip_no-cluster-data')}
                        size="xs"
                    />
                );

                const isHealthcheckSource = row.cluster?.overall_source === 'healthcheck';

                if (!onStatusClick || !clusterStatus || !isHealthcheckSource) {
                    return statusLabel;
                }

                return (
                    <button
                        type="button"
                        className={b('status-button')}
                        onClickCapture={(e) => {
                            e.stopPropagation();
                            e.preventDefault();
                            onStatusClick(row);
                        }}
                    >
                        {statusLabel}
                    </button>
                );
            };

            const renderBalancer = () => {
                if (!cleanedBalancer) {
                    return null;
                }

                return (
                    <Flex gap={0.5} alignItems={'center'}>
                        <Text variant="caption-2" color="secondary">
                            {cleanedBalancer}
                        </Text>
                        <ClipboardButton
                            size="xs"
                            text={cleanedBalancer}
                            className={b('balancer-copy-icon')}
                        />
                    </Flex>
                );
            };

            return (
                <Flex direction={'column'} gap={0.5}>
                    <Flex alignItems="center" justifyContent="space-between" gap={1}>
                        {renderName()}
                        <Flex alignItems="center" gap={1}>
                            {renderStatus()}
                            {renderActions()}
                        </Flex>
                    </Flex>
                    {renderBalancer()}
                </Flex>
            );
        },
    } satisfies Column<PreparedCluster>;
}

interface ClusterNameProps {
    row: PreparedCluster;
}

function ClusterName({row}: ClusterNameProps) {
    const clusterPath = calculateClusterPath(row);

    return (
        <Flex alignItems="center" gap={1} className={b('cluster-name-wrapper')}>
            <ExternalLink
                href={clusterPath}
                className={b('cluster-name')}
                title={row.title || row.name}
            >
                {row.title || row.name}
            </ExternalLink>
            {row.settings?.unavailable === true ? (
                <Tooltip content={i18n('tooltip_unavailable')}>
                    <span
                        className={b('unavailable-label')}
                        tabIndex={0}
                        data-qa="cluster-unavailable-label"
                        onKeyDown={(event) => {
                            if (['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {
                                event.stopPropagation();
                            }
                        }}
                    >
                        <Label
                            theme="unknown"
                            size="xs"
                            icon={<Icon data={CircleXmark} size={12} />}
                        >
                            {i18n('value_unavailable')}
                        </Label>
                    </span>
                </Tooltip>
            ) : null}
        </Flex>
    );
}

const CLUSTERS_COLUMNS: Column<PreparedCluster>[] = [
    {
        name: COLUMNS_NAMES.VERSIONS,
        header: COLUMNS_TITLES[COLUMNS_NAMES.VERSIONS],
        width: 400,
        defaultOrder: DataTable.DESCENDING,
        sortAccessor: ({preparedVersions}) => getFirstVersion(preparedVersions),
        render: ({row}) => {
            return <Versions row={row} preparedVersions={row.preparedVersions} />;
        },
    },
    {
        name: COLUMNS_NAMES.COMPUTE_NODES_VERSIONS,
        header: COLUMNS_TITLES[COLUMNS_NAMES.COMPUTE_NODES_VERSIONS],
        width: 400,
        defaultOrder: DataTable.DESCENDING,
        sortAccessor: ({preparedComputeVersions}) => getFirstVersion(preparedComputeVersions),
        render: ({row}) => {
            return <Versions row={row} preparedVersions={row.preparedComputeVersions} />;
        },
    },
    {
        name: COLUMNS_NAMES.STORAGE_NODES_VERSIONS,
        header: COLUMNS_TITLES[COLUMNS_NAMES.STORAGE_NODES_VERSIONS],
        width: 400,
        defaultOrder: DataTable.DESCENDING,
        sortAccessor: ({preparedStorageVersions}) => getFirstVersion(preparedStorageVersions),
        render: ({row}) => {
            return <Versions row={row} preparedVersions={row.preparedStorageVersions} />;
        },
    },
    {
        name: COLUMNS_NAMES.STATUS,
        header: COLUMNS_TITLES[COLUMNS_NAMES.STATUS],
        width: 180,
        sortable: true,
        render: ({row}) => {
            return <Label>{row.status}</Label>;
        },
    },
    {
        name: COLUMNS_NAMES.SERVICE,
        header: COLUMNS_TITLES[COLUMNS_NAMES.SERVICE],
        width: 100,
        sortable: true,
    },
    {
        name: COLUMNS_NAMES.DOMAIN,
        header: COLUMNS_TITLES[COLUMNS_NAMES.DOMAIN],
        width: 170,
        sortable: true,
    },
    {
        name: COLUMNS_NAMES.GALAXY,
        header: COLUMNS_TITLES[COLUMNS_NAMES.GALAXY],
        width: 120,
        sortable: true,
        render: ({row}) => {
            return row.galaxy || EMPTY_CELL;
        },
    },
    {
        name: COLUMNS_NAMES.DC,
        header: COLUMNS_TITLES[COLUMNS_NAMES.DC],
        width: 120,
        sortable: false,
        render: ({row}) => {
            const dc = (row.cluster && row.cluster.DataCenters) || [];
            return (
                // For some reason DC list could contain empty strings
                <div className={b('cluster-dc')}>{dc.filter(Boolean).join(', ') || EMPTY_CELL}</div>
            );
        },
    },
    {
        name: COLUMNS_NAMES.NODES,
        header: COLUMNS_TITLES[COLUMNS_NAMES.NODES],
        width: 170,
        resizeMinWidth: 170,
        defaultOrder: DataTable.DESCENDING,
        sortAccessor: ({cluster = {}}) => {
            const {NodesTotal = 0} = cluster;

            return NodesTotal;
        },
        render: ({row}) => {
            const {NodesAlive = 0, NodesTotal = 0, Overall} = row.cluster || {};

            if (!Overall) {
                return EMPTY_CELL;
            }

            return (
                <ClustersTableProgressBar
                    value={NodesAlive}
                    capacity={NodesTotal}
                    description={i18n('entities-count', {
                        value: formatNumber(NodesAlive),
                        capacity: formatNumber(NodesTotal),
                    })}
                />
            );
        },
    },
    {
        name: COLUMNS_NAMES.LOAD,
        header: COLUMNS_TITLES[COLUMNS_NAMES.LOAD],
        width: 170,
        resizeMinWidth: 170,
        defaultOrder: DataTable.DESCENDING,
        sortAccessor: ({cluster}) => {
            return cluster?.NumberOfCpus || 0;
        },
        render: ({row}) => {
            const {
                LoadAverage = 0,
                NumberOfCpus = 0,
                RealNumberOfCpus,
                Overall,
            } = row.cluster || {};

            if (!Overall) {
                return EMPTY_CELL;
            }

            return (
                <ClustersTableProgressBar
                    value={LoadAverage}
                    capacity={RealNumberOfCpus ?? NumberOfCpus}
                    description={i18n('entities-count', {
                        value: formatNumber(Math.round(LoadAverage)),
                        capacity: formatNumber(RealNumberOfCpus ?? NumberOfCpus),
                    })}
                />
            );
        },
    },
    {
        name: COLUMNS_NAMES.STORAGE,
        header: COLUMNS_TITLES[COLUMNS_NAMES.STORAGE],
        width: 170,
        resizeMinWidth: 170,
        defaultOrder: DataTable.DESCENDING,
        sortAccessor: ({cluster}) => {
            return Number(cluster?.StorageTotal) || 0;
        },
        render: ({row}) => {
            const {StorageUsed = 0, StorageTotal = 0, Overall} = row.cluster || {};

            if (!Overall) {
                return EMPTY_CELL;
            }

            const [valueString, capacityString] = formatStorageValuesToTb(
                Number(StorageUsed),
                Number(StorageTotal),
            );

            return (
                <ClustersTableProgressBar
                    value={Number(StorageUsed)}
                    capacity={Number(StorageTotal)}
                    description={i18n('entities-count', {
                        value: valueString,
                        capacity: capacityString,
                    })}
                />
            );
        },
    },
    {
        name: COLUMNS_NAMES.HOSTS,
        header: COLUMNS_TITLES[COLUMNS_NAMES.HOSTS],
        width: 80,
        defaultOrder: DataTable.DESCENDING,
        sortAccessor: ({cluster}) => {
            return Number(cluster?.Hosts) || 0;
        },
        render: ({row}) => {
            return Number(row.cluster?.Hosts) || EMPTY_CELL;
        },
    },
    {
        name: COLUMNS_NAMES.TENANTS,
        header: COLUMNS_TITLES[COLUMNS_NAMES.TENANTS],
        width: 80,
        defaultOrder: DataTable.DESCENDING,
        sortAccessor: ({cluster}) => {
            return Number(cluster?.Tenants) || 0;
        },
        render: ({row}) => {
            return Number(row.cluster?.Tenants) || EMPTY_CELL;
        },
    },
    {
        name: COLUMNS_NAMES.DESCRIPTION,
        header: COLUMNS_TITLES[COLUMNS_NAMES.DESCRIPTION],
        sortable: false,
        width: 200,
        render: ({row}) => {
            return row.description ? (
                <div className={b('description')}>{row.description}</div>
            ) : (
                EMPTY_CELL
            );
        },
    },
];

interface VersionsProps {
    row: PreparedCluster;
    preparedVersions: PreparedVersion[];
}

function Versions({row, preparedVersions}: VersionsProps) {
    const hasErrors = !preparedVersions.length || preparedVersions.some((item) => !item.version);

    if (hasErrors) {
        return EMPTY_CELL;
    }
    const clusterPath = calculateClusterPath(row, clusterTabsIds.versions);

    return (
        <ExternalLink className={b('cluster-versions')} href={clusterPath}>
            <VersionsBar preparedVersions={preparedVersions} />
        </ExternalLink>
    );
}

export function getClustersColumns(params: ClustersColumnsParams) {
    return [getTitleColumn(params), ...CLUSTERS_COLUMNS];
}

function ClustersTableProgressBar({
    value,
    capacity,
    description,
}: {
    value: number;
    capacity: number;
    description?: string;
}) {
    const usage = capacity ? (value / capacity) * 100 : 0;

    return (
        <Flex direction={'column'} gap={2}>
            <div>
                <Progress theme="success" size="s" value={usage} className={b('progress')} />
            </div>
            {description}
        </Flex>
    );
}