'use client';

import { Pencil, Trash2 } from 'lucide-react';
import { Button, Modal, Space, Tag, Typography } from 'antd';

import { ICON_SIZE_MD } from '@/components/icons';
import { confirmDialog } from '@/lib/feedback/confirmDialog';

import {
    getImplantacaoChecklistStatusColor,
    getImplantacaoChecklistStatusLabel,
} from './implantacaoChecklistDisplay';
import type { ImplantacaoChecklistItem } from './types';

const { Text, Paragraph, Link } = Typography;

export type ModalOpcoesChecklistItemProps = {
    open: boolean;
    item: ImplantacaoChecklistItem | null;
    onClose: () => void;
    onEditar: (item: ImplantacaoChecklistItem) => void;
    onExcluir: (item: ImplantacaoChecklistItem) => void;
};

/**
 * Modal de opções (editar / excluir) para item de checklist ACL/cutover.
 */
export function ModalOpcoesChecklistItem({
    open,
    item,
    onClose,
    onEditar,
    onExcluir,
}: ModalOpcoesChecklistItemProps) {
    if (!item) return null;

    return (
        <Modal
            open={open}
            onCancel={onClose}
            title={item.titulo}
            footer={null}
            destroyOnHidden
            data-testid="implantacao-checklist-opcoes-modal"
        >
            <Space direction="vertical" size={12} style={{ width: '100%' }}>
                <div>
                    <Tag color={getImplantacaoChecklistStatusColor(item.status)}>
                        {getImplantacaoChecklistStatusLabel(item.status)}
                    </Tag>
                </div>
                {item.notas ? <Paragraph type="secondary">{item.notas}</Paragraph> : null}
                <div>
                    <Text type="secondary">Dono: </Text>
                    <Text>
                        {item.owner?.nome || '—'}
                    </Text>
                </div>
                {item.link_referencia ? (
                    <div>
                        <Text type="secondary">Referência: </Text>
                        <Link href={item.link_referencia} target="_blank" rel="noopener noreferrer">
                            {item.link_referencia}
                        </Link>
                    </div>
                ) : null}
                <Space wrap>
                    <Button
                        type="primary"
                        icon={<Pencil size={ICON_SIZE_MD} aria-hidden />}
                        onClick={() => onEditar(item)}
                        data-testid="implantacao-checklist-opcoes-editar"
                    >
                        Editar
                    </Button>
                    <Button
                        danger
                        icon={<Trash2 size={ICON_SIZE_MD} aria-hidden />}
                        data-testid="implantacao-checklist-opcoes-excluir"
                        onClick={() => {
                            confirmDialog({
                                title: 'Excluir item?',
                                content: `O item "${item.titulo}" será removido do checklist. Esta ação não pode ser desfeita.`,
                                okText: 'Excluir',
                                okType: 'danger',
                                cancelText: 'Cancelar',
                                onOk: () => onExcluir(item),
                            });
                        }}
                    >
                        Excluir
                    </Button>
                </Space>
            </Space>
        </Modal>
    );
}