'use client';

import React from 'react';
import { Modal, Typography } from 'antd';

const { Text } = Typography;

export type KeyboardShortcutHelpItem = {
    keys: string;
    label: string;
    disabled?: boolean;
};

export type KeyboardShortcutsHelpModalProps = {
    open: boolean;
    onClose: () => void;
    title?: string;
    intro?: string;
    items: KeyboardShortcutHelpItem[];
    'data-testid'?: string;
};

/**
 * Overlay in-app de atalhos — aberto com `?` ou botão de ajuda (TASK-PWP-063).
 */
export function KeyboardShortcutsHelpModal({
    open,
    onClose,
    title = 'Atalhos de teclado',
    intro = 'Disponíveis fora de campos de texto e modais abertos.',
    items,
    'data-testid': dataTestId = 'keyboard-shortcuts-help-modal',
}: KeyboardShortcutsHelpModalProps) {
    const visibleItems = items.filter((item) => !item.disabled);

    return (
        <Modal
            open={open}
            onCancel={onClose}
            onOk={onClose}
            okText="Fechar"
            cancelButtonProps={{ style: { display: 'none' } }}
            title={title}
            width={480}
            destroyOnClose
            data-testid={dataTestId}
        >
            {intro ? (
                <Text type="secondary" style={{ display: 'block', marginBottom: 16 }}>
                    {intro}
                </Text>
            ) : null}
            <ul
                style={{ margin: 0, padding: 0, listStyle: 'none' }}
                aria-label="Lista de atalhos de teclado"
            >
                {visibleItems.map((item) => (
                    <li
                        key={item.keys}
                        style={{
                            display: 'flex',
                            alignItems: 'baseline',
                            gap: 12,
                            marginBottom: 10,
                        }}
                    >
                        <Text code style={{ minWidth: 88, textAlign: 'center' }}>
                            {item.keys}
                        </Text>
                        <Text>{item.label}</Text>
                    </li>
                ))}
            </ul>
        </Modal>
    );
}