'use client';

import React from 'react';
import { Button, Modal, Row, Col } from 'antd';
import { useResponsiveModalProps } from '@/hooks/useResponsiveModalProps';
import { formatDate } from '@/lib/utils/export';
import type { ProjetoVulnerabilidade } from './types';
import {
    getVulnerabilidadeSeveridadeTag,
    getVulnerabilidadeStatusTag,
    getVulnerabilidadeTipoLabel,
} from './vulnerabilidadeDisplay';

export interface VulnerabilidadeDetalhesModalProps {
    open: boolean;
    vulnerabilidade: ProjetoVulnerabilidade | null;
    onClose: () => void;
}

export function VulnerabilidadeDetalhesModal({
    open,
    vulnerabilidade,
    onClose,
}: VulnerabilidadeDetalhesModalProps) {
    const detalheModalLayout = useResponsiveModalProps();
    return (
        <Modal
            title={vulnerabilidade?.titulo}
            data-testid="projeto-qualidade-vulnerabilidade-detalhes-modal"
            open={open}
            onCancel={onClose}
            footer={[
                <Button key="close" onClick={onClose}>
                    Fechar
                </Button>,
            ]}
            width={detalheModalLayout.width ?? 800}
            centered={detalheModalLayout.centered}
            styles={detalheModalLayout.styles}
            destroyOnHidden
            keyboard
            focusTriggerAfterClose
        >
            {vulnerabilidade && (
                <div>
                    <Row gutter={16} style={{ marginBottom: 16 }}>
                        <Col span={12}>
                            <p>
                                <strong>Severidade:</strong>{' '}
                                {getVulnerabilidadeSeveridadeTag(vulnerabilidade.severidade)}
                            </p>
                            <p>
                                <strong>Status:</strong> {getVulnerabilidadeStatusTag(vulnerabilidade.status)}
                            </p>
                            <p>
                                <strong>Tipo:</strong> {getVulnerabilidadeTipoLabel(vulnerabilidade.tipo)}
                            </p>
                            {vulnerabilidade.cvss_score ? (
                                <p>
                                    <strong>CVSS Score:</strong> {vulnerabilidade.cvss_score.toFixed(1)}
                                </p>
                            ) : null}
                            {vulnerabilidade.cve_id && (
                                <p>
                                    <strong>CVE ID:</strong> {vulnerabilidade.cve_id}
                                </p>
                            )}
                        </Col>
                        <Col span={12}>
                            {vulnerabilidade.projeto && (
                                <p>
                                    <strong>Projeto:</strong> {vulnerabilidade.projeto.nome}
                                </p>
                            )}
                            {vulnerabilidade.modulo && (
                                <p>
                                    <strong>Módulo:</strong> {vulnerabilidade.modulo.nome}
                                </p>
                            )}
                            {vulnerabilidade.responsavel && (
                                <p>
                                    <strong>Responsável:</strong> {vulnerabilidade.responsavel.nome}
                                </p>
                            )}
                            <p>
                                <strong>Data de Descoberta:</strong>{' '}
                                {formatDate(vulnerabilidade.data_descoberta)}
                            </p>
                            {vulnerabilidade.data_correcao && (
                                <p>
                                    <strong>Data de Correção:</strong>{' '}
                                    {formatDate(vulnerabilidade.data_correcao)}
                                </p>
                            )}
                        </Col>
                    </Row>
                    {vulnerabilidade.descricao && (
                        <div style={{ marginBottom: 16 }}>
                            <p>
                                <strong>Descrição:</strong>
                            </p>
                            <p>{vulnerabilidade.descricao}</p>
                        </div>
                    )}
                    {vulnerabilidade.remediacao && (
                        <div style={{ marginBottom: 16 }}>
                            <p>
                                <strong>Remediação:</strong>
                            </p>
                            <p>{vulnerabilidade.remediacao}</p>
                        </div>
                    )}
                </div>
            )}
        </Modal>
    );
}