'use client';

/**
 * Glossário CPI/SPI tipológico — honestidade non-EVM (TASK-PPS-037).
 */

import React from 'react';
import { Popover, Typography } from 'antd';
import { CircleHelp } from 'lucide-react';

const { Text, Paragraph } = Typography;

/** Versão da fórmula Waygest (≠ EVM canónico PMI). */
export const FORMULA_CPI_SPI_VERSION = 'pps-cpi-v1';

export const CPI_SPI_GLOSSARIO_COPY = {
    aviso: 'Não é EVM canónico',
    cpi: 'CPI agregado (Waygest) = orçamento_total ÷ valor_realizado_total, quando ambos > 0. Não usa EV/AC do PMI.',
    spi: 'SPI médio (Waygest) = média dos SPI das superfícies visíveis (+ programa). Não é SPI de Earned Value Management.',
} as const;

type CpiSpiGlossarioHelpProps = {
    /** Foco do popover (CPI, SPI ou ambos). */
    foco?: 'cpi' | 'spi' | 'ambos';
};

/**
 * Ícone de ajuda junto às métricas CPI/SPI (Popover + versão da fórmula).
 */
export function CpiSpiGlossarioHelp({ foco = 'ambos' }: CpiSpiGlossarioHelpProps) {
    const content = (
        <div style={{ maxWidth: 320 }}>
            <Paragraph strong style={{ marginBottom: 8 }}>
                {CPI_SPI_GLOSSARIO_COPY.aviso}
            </Paragraph>
            {foco === 'spi' ? null : (
                <Paragraph type="secondary" style={{ marginBottom: 8 }}>
                    {CPI_SPI_GLOSSARIO_COPY.cpi}
                </Paragraph>
            )}
            {foco === 'cpi' ? null : (
                <Paragraph type="secondary" style={{ marginBottom: 8 }}>
                    {CPI_SPI_GLOSSARIO_COPY.spi}
                </Paragraph>
            )}
            <Text type="secondary" style={{ fontSize: 12 }}>
                Fórmula: {FORMULA_CPI_SPI_VERSION}
            </Text>
        </div>
    );

    return (
        <Popover content={content} title="Glossário CPI / SPI" trigger="click">
            <button
                type="button"
                aria-label="Abrir glossário CPI e SPI"
                data-testid="cpi-spi-glossario-help"
                style={{
                    display: 'inline-flex',
                    alignItems: 'center',
                    marginLeft: 4,
                    padding: 0,
                    border: 0,
                    background: 'transparent',
                    cursor: 'pointer',
                    color: 'inherit',
                    verticalAlign: 'middle',
                }}
            >
                <CircleHelp size={14} aria-hidden />
            </button>
        </Popover>
    );
}