import { Button, Modal, Progress } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { makeApiRequest } from '../../common';
import { useTranslations } from '../../hooks/useTranslation';

const formatCount = (value) => Number(value || 0).toLocaleString();

/**
 * Progress modal for "Delete All" on the Activity Logs page.
 *
 * The backend deletes one bounded batch per request and returns how many rows
 * remain, so every request stays short no matter how large the log is. This
 * component keeps calling it until nothing remains, updating the bar between
 * calls. Stop takes effect after the batch in flight; whatever was deleted stays
 * deleted and Delete All can be clicked again to finish.
 */
const DeleteAllLogsProgress = ({ open, initialTotal, onClose }) => {
    const { t } = useTranslations();
    const [deleted, setDeleted] = useState(0);
    const [total, setTotal] = useState(initialTotal || 0);
    const [remaining, setRemaining] = useState(initialTotal || 0);
    const [status, setStatus] = useState('running'); // running | stopping | stopped | error | done
    const [errorMessage, setErrorMessage] = useState('');
    const stopRequested = useRef(false);
    const isRunning = useRef(false);

    useEffect(() => {
        // Guard against starting a second loop for the same open (e.g. a re-render).
        if (!open || isRunning.current) {
            return;
        }
        isRunning.current = true;
        stopRequested.current = false;
        setDeleted(0);
        setTotal(initialTotal || 0);
        setRemaining(initialTotal || 0);
        setErrorMessage('');
        setStatus('running');
        runDeletion();
    }, [open]);

    const finish = (finalStatus, deletedSoFar) => {
        isRunning.current = false;
        setStatus(finalStatus);
        if ('done' === finalStatus) {
            // Let the user see 100% briefly before closing.
            setTimeout(() => onClose({ status: 'done', deleted: deletedSoFar }), 700);
        }
    };

    const runDeletion = async () => {
        let deletedSoFar = 0;

        // eslint-disable-next-line no-constant-condition
        while (true) {
            const response = await makeApiRequest('delete-all-logs', 'POST', {});

            if (!response || !response.success) {
                setErrorMessage(response && response.message ? response.message : '');
                finish('error', deletedSoFar);
                return;
            }

            const batchDeleted = parseInt(response.data?.deleted, 10) || 0;
            const left = parseInt(response.data?.remaining, 10) || 0;
            deletedSoFar += batchDeleted;

            // Recompute the total each round: rows written during the delete (e.g. an
            // archive run) grow it, so a fixed starting total could overshoot 100%.
            setDeleted(deletedSoFar);
            setRemaining(left);
            setTotal(deletedSoFar + left);

            if (0 === left) {
                finish('done', deletedSoFar);
                return;
            }

            // Rows remain but nothing could be deleted: stop rather than loop forever.
            if (0 === batchDeleted) {
                finish('error', deletedSoFar);
                return;
            }

            if (stopRequested.current) {
                finish('stopped', deletedSoFar);
                return;
            }
        }
    };

    const handleStop = () => {
        stopRequested.current = true;
        setStatus('stopping');
    };

    const handleClose = () => {
        onClose({ status, deleted });
    };

    const percent = 'done' === status ? 100 : (total > 0 ? Math.floor((deleted / total) * 100) : 0);
    const isActive = 'running' === status || 'stopping' === status;

    let progressStatus = 'active';
    if ('done' === status) progressStatus = 'success';
    if ('error' === status) progressStatus = 'exception';
    if ('stopped' === status) progressStatus = 'normal';

    let message = t('delete_all_logs_progress_count')
        .replace('%1$s', formatCount(deleted))
        .replace('%2$s', formatCount(total));

    if ('stopped' === status) {
        message = t('delete_all_logs_stopped')
            .replace('%1$s', formatCount(deleted))
            .replace('%2$s', formatCount(remaining));
    }

    if ('error' === status) {
        message = t('delete_all_logs_error_partial').replace('%s', formatCount(deleted));
    }

    const footer = isActive
        ? [
            <Button key="stop" danger onClick={handleStop} disabled={'stopping' === status}>
                {'stopping' === status ? t('delete_all_logs_stopping') : t('delete_all_logs_stop')}
            </Button>,
        ]
        : [
            <Button key="close" type="primary" onClick={handleClose} disabled={'done' === status}>
                {t('close')}
            </Button>,
        ];

    return (
        <Modal
            open={open}
            title={t('delete_all_logs_progress_title')}
            centered
            closable={false}
            maskClosable={false}
            keyboard={false}
            footer={footer}
        >
            <div className="arcm-py-2" data-testid="delete-all-logs-progress">
                <Progress percent={percent} status={progressStatus} />
                <p className="arcm-mt-3 arcm-mb-1 arcm-text-[14px]" data-testid="delete-all-logs-progress-message">
                    {message}
                </p>
                {'error' === status && errorMessage && (
                    <p className="arcm-mt-1 arcm-text-[13px] arcm-text-red-500">{errorMessage}</p>
                )}
                {isActive && (
                    <p className="arcm-mt-1 arcm-text-[13px] arcm-text-gray-500">
                        {t('delete_all_logs_progress_keep_open')}
                    </p>
                )}
            </div>
        </Modal>
    );
};

export default DeleteAllLogsProgress;