'use client';

import React, { useCallback } from 'react';
import { CircleHelp } from 'lucide-react';
import { Tooltip } from 'antd';
import type { DashboardMetricHelpEntry } from '../../dashboardMetricHelp';
import styles from './MetricHelpIcon.module.scss';
import { useIsMobile } from '@/hooks/useIsMobile';

export type MetricHelpIconProps = {
    help: DashboardMetricHelpEntry;
    className?: string;
    /** Impede propagação para cartões clicáveis (ex.: MetricKpiCard). */
    stopPropagation?: boolean;
};

/**
 * Ícone de ajuda contextual com Tooltip Ant Design.
 * Em viewports < md usa `click`; em desktop `hover` + `focus`.
 */
export function MetricHelpIcon({ help, className = '', stopPropagation = true }: MetricHelpIconProps) {
    const isMobile = useIsMobile();

    const onPointerDown = useCallback(
        (event: React.MouseEvent | React.KeyboardEvent) => {
            if (stopPropagation) {
                event.stopPropagation();
            }
        },
        [stopPropagation],
    );

    const tooltipContent = (
        <div>
            <span className={styles.helpTooltipTitle}>{help.title}</span>
            <p className={styles.helpTooltipBody}>{help.body}</p>
        </div>
    );

    return (
        <Tooltip
            title={tooltipContent}
            trigger={isMobile ? 'click' : ['hover', 'focus']}
            placement="top"
            mouseEnterDelay={0.15}
        >
            <button
                type="button"
                className={`${styles.helpButton}${className ? ` ${className}` : ''}`}
                aria-label={`Como é calculado: ${help.title}`}
                onClick={onPointerDown}
                onMouseDown={onPointerDown}
                onKeyDown={onPointerDown}
            >
                <CircleHelp size={14} aria-hidden />
            </button>
        </Tooltip>
    );
}

export default MetricHelpIcon;