'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 { ProjetoCodeReview } from './types';
import { getCodeReviewPrioridadeTag, getCodeReviewStatusTag } from './codeReviewDisplay';

export interface CodeReviewDetalhesModalProps {
    open: boolean;
    review: ProjetoCodeReview | null;
    onClose: () => void;
}

export function CodeReviewDetalhesModal({ open, review, onClose }: CodeReviewDetalhesModalProps) {
    const detalheModalLayout = useResponsiveModalProps();
    return (
        <Modal
            title={review?.titulo}
            data-testid="projeto-qualidade-code-review-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
        >
            {review && (
                <div>
                    <Row gutter={16} style={{ marginBottom: 16 }}>
                        <Col span={12}>
                            <p>
                                <strong>Projeto:</strong> {review.projeto?.nome}
                            </p>
                            <p>
                                <strong>Status:</strong> {getCodeReviewStatusTag(review.status)}
                            </p>
                            <p>
                                <strong>Prioridade:</strong> {getCodeReviewPrioridadeTag(review.prioridade)}
                            </p>
                            <p>
                                <strong>Autor:</strong> {review.autor?.nome}
                            </p>
                        </Col>
                        <Col span={12}>
                            {review.revisor && (
                                <p>
                                    <strong>Revisor:</strong> {review.revisor.nome}
                                </p>
                            )}
                            {review.branch && (
                                <p>
                                    <strong>Branch:</strong> {review.branch}
                                </p>
                            )}
                            <p>
                                <strong>Data Criação:</strong> {formatDate(review.data_criacao)}
                            </p>
                            {review.data_revisao && (
                                <p>
                                    <strong>Data Revisão:</strong> {formatDate(review.data_revisao)}
                                </p>
                            )}
                        </Col>
                    </Row>
                    {review.descricao && (
                        <div style={{ marginBottom: 16 }}>
                            <p>
                                <strong>Descrição:</strong>
                            </p>
                            <p>{review.descricao}</p>
                        </div>
                    )}
                    {review.pull_request_url && (
                        <div style={{ marginBottom: 16 }}>
                            <p>
                                <strong>Pull Request:</strong>
                            </p>
                            <a href={review.pull_request_url} target="_blank" rel="noopener noreferrer">
                                {review.pull_request_url}
                            </a>
                        </div>
                    )}
                    <Row gutter={16} style={{ marginBottom: 16 }}>
                        <Col span={8}>
                            <p>
                                <strong>Linhas Adicionadas:</strong>{' '}
                                <span style={{ color: '#52c41a' }}>+{review.linhas_adicionadas || 0}</span>
                            </p>
                        </Col>
                        <Col span={8}>
                            <p>
                                <strong>Linhas Removidas:</strong>{' '}
                                <span style={{ color: '#ff4d4f' }}>-{review.linhas_removidas || 0}</span>
                            </p>
                        </Col>
                        <Col span={8}>
                            <p>
                                <strong>Arquivos Alterados:</strong> {review.arquivos_alterados || 0}
                            </p>
                        </Col>
                    </Row>
                    {review.comentarios_count !== undefined && review.comentarios_count > 0 && (
                        <div style={{ marginBottom: 16 }}>
                            <p>
                                <strong>Comentários:</strong> {review.comentarios_count}
                            </p>
                        </div>
                    )}
                </div>
            )}
        </Modal>
    );
}