'use client';

import React, { useEffect, useMemo, useState } from 'react';
import { Avatar, Button, Empty, Popconfirm, Space, Tooltip, Typography } from 'antd';
import { message } from '@/lib/feedback/message';
import {
    AlertCircle,
    Check,
    Clock,
    Download,
    Eye,
    Loader2,
    Mail,
    Trash2,
    User,
} from 'lucide-react';
import { ICON_SIZE_MD, ICON_SIZE_SM } from '@/components/icons';
import apiClient from '@/lib/api/client';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { openBlobInNewTab } from '@/lib/browser/openBlobInNewTab';
import { sanitizeHtml } from '@/lib/sanitizeHtml';
import { formatDate } from '@/lib/utils/export';
import {
    ChamadoEmailDiagnosticoModal,
    type ChamadoEmailDiagnosticoData,
} from '@/features/suporte/chamados/components/ChamadoEmailDiagnosticoModal';
import {
    CHAMADO_EMAIL_STATUS_LABELS,
    chamadoEmailThreadTimestamp,
    formatChamadoEmailParty,
    isChamadoEmailInbound,
    type ChamadoEmailThreadRow,
} from '@/features/suporte/chamados/utils/chamadoEmailThread';
import {
    buildChamadoConversationThread,
    buildChamadoEmailsById,
} from '@/features/suporte/chamados/utils/buildChamadoConversationThread';
import { stripEmailReplyQuote } from './stripEmailReplyQuote';
import styles from './ChamadoCommentList.module.scss';

const { Text, Paragraph } = Typography;

interface NotificacaoEmailSaidaResumo {
    id: number;
    status: string;
    erro_envio?: string | null;
    enviado_em?: string | null;
    to_email?: string | null;
    subject?: string | null;
}

interface ComentarioAnexoResumo {
    id: number;
    nome_arquivo: string;
    download_url?: string;
    mime_type?: string;
    tamanho?: number;
}

interface ChamadoComentario {
    id: number;
    comentario: string;
    tipo: 'publico' | 'interno' | 'sistema';
    anexos?: ComentarioAnexoResumo[];
    enviar_email?: boolean;
    enviado_em?: string | null;
    notificacoes_email_saida?: NotificacaoEmailSaidaResumo[];
    metadados?: {
        via_email?: boolean;
        email_suporte_id?: number;
        from_email?: string;
        from_name?: string;
        email_notificacao?: { estado?: string; motivo?: string };
    };
    usuario?: {
        id: number;
        nome: string;
        avatar?: string;
    };
    created_at: string;
    updated_at: string;
}

type BubbleRole = 'cliente' | 'atendente' | 'interno' | 'sistema' | 'outro';

function truncateTooltipText(text: string, max = 120): string {
    const trimmed = text.trim();
    if (trimmed.length <= max) return trimmed;
    return `${trimmed.slice(0, max)}…`;
}

function isImageAnexo(a: ComentarioAnexoResumo): boolean {
    if (a.mime_type?.startsWith('image/')) return true;
    const ext = a.nome_arquivo.toLowerCase().split('.').pop();
    return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(ext ?? '');
}

function isPdfAnexo(a: ComentarioAnexoResumo): boolean {
    if (a.mime_type === 'application/pdf') return true;
    return a.nome_arquivo.toLowerCase().endsWith('.pdf');
}

function resolveRole(c: ChamadoComentario): BubbleRole {
    if (c.tipo === 'sistema') return 'sistema';
    if (c.tipo === 'interno') return 'interno';
    if (c.metadados?.via_email) return 'cliente';
    return 'atendente';
}

/** Papel do balão para um e-mail órfão (sem comentário associado) na thread unificada. */
function resolveEmailRole(email: ChamadoEmailThreadRow): BubbleRole {
    if (isChamadoEmailInbound(email)) return 'cliente';
    const tipo = email.tipo?.toLowerCase() ?? '';
    if (tipo.includes('pesquisa_satisfacao') || tipo.includes('notificacao')) return 'sistema';
    if (email.direcao === 'saida') return 'atendente';
    return 'outro';
}

function roleLabelFor(role: BubbleRole): string {
    switch (role) {
        case 'cliente':
            return 'Cliente';
        case 'interno':
            return 'Interno';
        case 'sistema':
            return 'Sistema';
        case 'outro':
            return 'Outro';
        default:
            return 'Atendente';
    }
}

function roleLabelClass(role: BubbleRole): string {
    switch (role) {
        case 'cliente':
            return styles.roleCliente;
        case 'interno':
            return styles.roleInterno;
        case 'atendente':
            return styles.roleAtendente;
        default:
            return '';
    }
}

function rowClassFor(role: BubbleRole): string {
    if (role === 'cliente') return styles.rowCliente;
    if (role === 'interno') return styles.rowInterno;
    if (role === 'atendente') return styles.rowAtendente;
    return styles.rowSistema;
}

function bubbleClassFor(role: BubbleRole): string {
    if (role === 'cliente') return styles.bubbleCliente;
    if (role === 'interno') return styles.bubbleInterno;
    if (role === 'atendente') return styles.bubbleAtendente;
    if (role === 'outro') return styles.bubbleOutro;
    return styles.bubbleSistema;
}

function dayKey(iso: string): string {
    const d = new Date(iso);
    if (Number.isNaN(d.getTime())) return iso.slice(0, 10);
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
}

function dayLabel(iso: string): string {
    const d = new Date(iso);
    if (Number.isNaN(d.getTime())) return '';
    const today = new Date();
    const yesterday = new Date();
    yesterday.setDate(today.getDate() - 1);
    const sameDay = (a: Date, b: Date) =>
        a.getFullYear() === b.getFullYear() &&
        a.getMonth() === b.getMonth() &&
        a.getDate() === b.getDate();
    if (sameDay(d, today)) return 'Hoje';
    if (sameDay(d, yesterday)) return 'Ontem';
    return d.toLocaleDateString('pt-BR', { day: '2-digit', month: 'long', year: 'numeric' });
}

function MetaHintIcon({
    title,
    className,
    interactive,
    onClick,
    children,
}: {
    title: string;
    className?: string;
    interactive?: boolean;
    onClick?: () => void;
    children: React.ReactNode;
}) {
    const node = interactive && onClick ? (
        <button
            type="button"
            className={`${styles.hintBtn} ${styles.hintBtnInteractive} ${className ?? ''}`}
            onClick={onClick}
            aria-label={title}
        >
            {children}
        </button>
    ) : (
        <span className={`${styles.hintBtn} ${className ?? ''}`} aria-label={title}>
            {children}
        </span>
    );

    return <Tooltip title={title}>{node}</Tooltip>;
}

function renderEmailDeliveryHints(
    comentario: ChamadoComentario,
    onFalhaClick?: (email: ChamadoEmailDiagnosticoData) => void,
): React.ReactNode {
    const registros = comentario.notificacoes_email_saida ?? [];
    const ultimo = registros[0];
    const pedido = Boolean(comentario.enviar_email);
    const metaNaoAgendado = comentario.metadados?.email_notificacao?.estado === 'nao_agendado';

    if (comentario.enviado_em) {
        return (
            <MetaHintIcon title="E-mail enviado" className={styles.hintOk}>
                <Check size={ICON_SIZE_SM} aria-hidden />
            </MetaHintIcon>
        );
    }

    if (ultimo) {
        if (ultimo.status === 'falha') {
            return (
                <MetaHintIcon
                    title={
                        ultimo.erro_envio
                            ? `${truncateTooltipText(ultimo.erro_envio)} — clique para diagnóstico`
                            : 'Falha no e-mail — clique para diagnóstico'
                    }
                    className={styles.hintError}
                    interactive={Boolean(onFalhaClick)}
                    onClick={onFalhaClick ? () => onFalhaClick(ultimo) : undefined}
                >
                    <AlertCircle size={ICON_SIZE_SM} aria-hidden />
                </MetaHintIcon>
            );
        }
        if (ultimo.status === 'pendente' || ultimo.status === 'enviando') {
            return (
                <MetaHintIcon title="E-mail na fila" className={styles.hintProcessing}>
                    <Loader2 size={ICON_SIZE_SM} aria-hidden />
                </MetaHintIcon>
            );
        }
        if (ultimo.status === 'enviado' || ultimo.status === 'entregue') {
            return (
                <MetaHintIcon
                    title={ultimo.to_email ? `E-mail enviado · ${ultimo.to_email}` : 'E-mail enviado'}
                    className={styles.hintOk}
                >
                    <Check size={ICON_SIZE_SM} aria-hidden />
                </MetaHintIcon>
            );
        }
    }

    if (pedido && metaNaoAgendado) {
        return (
            <MetaHintIcon title="Notificação não enviada" className={styles.hintWarn}>
                <AlertCircle size={ICON_SIZE_SM} aria-hidden />
            </MetaHintIcon>
        );
    }

    if (pedido && !ultimo) {
        return (
            <MetaHintIcon title="Notificação por e-mail solicitada" className={styles.hintProcessing}>
                <Clock size={ICON_SIZE_SM} aria-hidden />
            </MetaHintIcon>
        );
    }

    return null;
}

function displayComentarioBody(raw: string): string {
    if (raw.includes('<')) return raw;
    return stripEmailReplyQuote(raw);
}

interface ChamadoCommentListProps {
    chamadoId: number | string;
    endpoint: string;
    onCommentAdded?: () => void;
    onCommentDeleted?: () => void;
    canDelete?: boolean;
    canRetryEmail?: boolean;
    /** E-mails da thread (agente) — mesclados como balões quando ainda não representados por um comentário (Fase 1). */
    emails?: ChamadoEmailThreadRow[];
    /** Abre "Ver detalhes do e-mail" (De/Para/CC, cabeçalhos, citação, diagnóstico) para o e-mail informado. */
    onOpenEmailDetalhes?: (email: ChamadoEmailThreadRow) => void;
}

export function ChamadoCommentList({
    chamadoId,
    endpoint,
    onCommentAdded: _onCommentAdded,
    onCommentDeleted,
    canDelete = true,
    canRetryEmail = false,
    emails,
    onOpenEmailDetalhes,
}: ChamadoCommentListProps) {
    const [comentarios, setComentarios] = useState<ChamadoComentario[]>([]);
    const [loading, setLoading] = useState(false);
    const [loadError, setLoadError] = useState(false);
    const [emailDiagnostico, setEmailDiagnostico] = useState<ChamadoEmailDiagnosticoData | null>(
        null,
    );
    const [diagnosticoOpen, setDiagnosticoOpen] = useState(false);

    useEffect(() => {
        void loadComentarios();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [chamadoId, endpoint]);

    const loadComentarios = async () => {
        try {
            setLoading(true);
            setLoadError(false);
            const response = await apiClient.get<{ data: ChamadoComentario[] }>(endpoint);
            const rows = response.data?.data;
            setComentarios(Array.isArray(rows) ? rows : []);
        } catch (error) {
            console.error('Erro ao carregar comentários:', error);
            setComentarios([]);
            setLoadError(true);
        } finally {
            setLoading(false);
        }
    };

    const handleDownloadAnexo = async (anexoId: number, nomeArquivo: string) => {
        const downloadEndpoint = API_ENDPOINTS.suporte.chamados.anexos.download(
            chamadoId,
            anexoId,
        );
        try {
            const response = await apiClient.get(downloadEndpoint, {
                responseType: 'blob',
            });
            const blob = new Blob([response.data], {
                type:
                    typeof response.headers['content-type'] === 'string'
                        ? response.headers['content-type']
                        : 'application/octet-stream',
            });
            const blobUrl = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = blobUrl;
            link.download = nomeArquivo;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(blobUrl);
        } catch {
            message.error('Erro ao transferir o arquivo');
        }
    };

    const handleVisualizarAnexo = async (anexo: ComentarioAnexoResumo) => {
        const downloadEndpoint = API_ENDPOINTS.suporte.chamados.anexos.download(
            chamadoId,
            anexo.id,
        );
        try {
            const response = await apiClient.get(downloadEndpoint, {
                responseType: 'blob',
            });
            const headerMime =
                typeof response.headers['content-type'] === 'string'
                    ? response.headers['content-type']
                    : '';
            const mime = headerMime || anexo.mime_type || 'application/octet-stream';
            const blob = new Blob([response.data], { type: mime });
            const blobUrl = window.URL.createObjectURL(blob);

            if (isPdfAnexo({ ...anexo, mime_type: mime })) {
                // Firefox: window.open(blob, …, 'noopener') invalida o blob: na nova aba.
                const win = openBlobInNewTab(blobUrl);
                if (!win) {
                    message.warning('Permita pop-ups para visualizar o PDF.');
                    window.URL.revokeObjectURL(blobUrl);
                    return;
                }
                window.setTimeout(() => window.URL.revokeObjectURL(blobUrl), 60_000);
                return;
            }

            if (isImageAnexo({ ...anexo, mime_type: mime })) {
                const win = openBlobInNewTab(blobUrl);
                if (!win) {
                    message.warning('Permita pop-ups para visualizar a imagem.');
                    window.URL.revokeObjectURL(blobUrl);
                    return;
                }
                window.setTimeout(() => window.URL.revokeObjectURL(blobUrl), 60_000);
                return;
            }

            window.URL.revokeObjectURL(blobUrl);
            message.info('Pré-visualização não disponível. Use o download.');
        } catch {
            message.error('Erro ao abrir o arquivo');
        }
    };

    const handleDelete = async (id: number) => {
        try {
            await apiClient.delete(`${endpoint}/${id}`);
            message.success('Comentário excluído com sucesso!');
            void loadComentarios();
            onCommentDeleted?.();
        } catch (error: unknown) {
            const errorMessage =
                (error as { response?: { data?: { message?: string } } })?.response?.data
                    ?.message || 'Erro ao excluir comentário';
            message.error(errorMessage);
        }
    };

    const handleOpenEmailDiagnostico = (email: ChamadoEmailDiagnosticoData) => {
        setEmailDiagnostico(email);
        setDiagnosticoOpen(true);
    };

    const emailsById = useMemo(() => buildChamadoEmailsById(emails), [emails]);

    const thread = useMemo(
        () => buildChamadoConversationThread(comentarios, emails ?? []),
        [comentarios, emails],
    );

    if (loading && comentarios.length === 0) {
        return <Empty description="Carregando conversa..." />;
    }

    if (loadError) {
        return (
            <Empty
                description={
                    <Space direction="vertical" size={8}>
                        <span>Não foi possível carregar os comentários.</span>
                        <Button size="small" onClick={() => void loadComentarios()}>
                            Tentar novamente
                        </Button>
                    </Space>
                }
            />
        );
    }

    if (thread.length === 0) {
        return <Empty description="Nenhuma mensagem ainda. Responda abaixo para iniciar a conversa." />;
    }

    let lastDay = '';

    return (
        <>
            <div className={styles.chatRoot} data-testid="chamado-comment-chat" aria-live="polite">
                {thread.map((item) => {
                    if (item.kind === 'email') {
                        const { email } = item;
                        const role = resolveEmailRole(email);
                        const iso = email.recebido_em ?? email.enviado_em ?? email.created_at ?? '';
                        const day = dayKey(iso);
                        const showDay = day !== lastDay;
                        lastDay = day;

                        const authorName =
                            role === 'cliente'
                                ? formatChamadoEmailParty(email.from_name, email.from_email)
                                : role === 'sistema' || role === 'outro'
                                  ? 'Sistema'
                                  : formatChamadoEmailParty(email.to_name, email.to_email);

                        const statusCfg =
                            CHAMADO_EMAIL_STATUS_LABELS[email.status] ?? {
                                color: 'default',
                                label: email.status,
                            };
                        const excerpt = stripEmailReplyQuote(
                            email.body_message?.trim() || '',
                        ) || '(Sem corpo de texto)';
                        const statusHintClass =
                            statusCfg.color === 'success'
                                ? styles.hintOk
                                : statusCfg.color === 'error'
                                  ? styles.hintError
                                  : statusCfg.color === 'processing'
                                    ? styles.hintProcessing
                                    : statusCfg.color === 'warning'
                                      ? styles.hintWarn
                                      : undefined;

                        return (
                            <React.Fragment key={`email-${email.id}`}>
                                {showDay ? (
                                    <div className={styles.daySeparator}>
                                        <span className={styles.daySeparatorLabel}>{dayLabel(iso)}</span>
                                    </div>
                                ) : null}
                                <div className={`${styles.row} ${rowClassFor(role)}`}>
                                    <div className={styles.bubbleWrap}>
                                        {role !== 'sistema' && role !== 'outro' ? (
                                            <Avatar size="small" icon={<User size={ICON_SIZE_MD} aria-hidden />}>
                                                {authorName.charAt(0).toUpperCase()}
                                            </Avatar>
                                        ) : null}
                                        <div
                                            className={`${styles.bubble} ${bubbleClassFor(role)}`}
                                            data-email-status={email.status}
                                        >
                                            <div className={styles.meta}>
                                                <div className={styles.metaIdentity}>
                                                    <Text className={styles.author}>{authorName}</Text>
                                                    <span
                                                        className={`${styles.roleLabel} ${roleLabelClass(role)}`}
                                                    >
                                                        {roleLabelFor(role)}
                                                    </span>
                                                </div>
                                                <div className={styles.metaAside}>
                                                    <span className={styles.metaHints}>
                                                        <MetaHintIcon title="Mensagem trocada por e-mail">
                                                            <Mail size={ICON_SIZE_SM} aria-hidden />
                                                        </MetaHintIcon>
                                                        <MetaHintIcon
                                                            title={statusCfg.label}
                                                            className={statusHintClass}
                                                        >
                                                            {statusCfg.color === 'success' ? (
                                                                <Check size={ICON_SIZE_SM} aria-hidden />
                                                            ) : statusCfg.color === 'error' ? (
                                                                <AlertCircle size={ICON_SIZE_SM} aria-hidden />
                                                            ) : statusCfg.color === 'processing' ? (
                                                                <Loader2 size={ICON_SIZE_SM} aria-hidden />
                                                            ) : (
                                                                <Mail size={ICON_SIZE_SM} aria-hidden />
                                                            )}
                                                        </MetaHintIcon>
                                                    </span>
                                                    <span className={styles.time}>
                                                        {chamadoEmailThreadTimestamp(email)}
                                                    </span>
                                                </div>
                                            </div>
                                            {email.subject?.trim() ? (
                                                <Text strong className={styles.emailBubbleSubject}>
                                                    {email.subject}
                                                </Text>
                                            ) : null}
                                            <div className={styles.body}>
                                                <Paragraph
                                                    style={{ marginBottom: 0, whiteSpace: 'pre-wrap' }}
                                                    ellipsis={{ rows: 4 }}
                                                >
                                                    {excerpt}
                                                </Paragraph>
                                            </div>
                                            {onOpenEmailDetalhes ? (
                                                <div className={styles.actions}>
                                                    <Button
                                                        type="link"
                                                        size="small"
                                                        style={{ padding: 0 }}
                                                        onClick={() => onOpenEmailDetalhes(email)}
                                                    >
                                                        Ver detalhes do e-mail
                                                    </Button>
                                                </div>
                                            ) : null}
                                        </div>
                                    </div>
                                </div>
                            </React.Fragment>
                        );
                    }

                    const { comentario } = item;
                    const role = resolveRole(comentario);
                    const day = dayKey(comentario.created_at);
                    const showDay = day !== lastDay;
                    lastDay = day;

                    const authorName =
                        comentario.usuario?.nome ||
                        comentario.metadados?.from_name ||
                        (role === 'cliente' ? 'Cliente' : role === 'sistema' ? 'Sistema' : 'Usuário');

                    const roleLabel = roleLabelFor(role);

                    const origin =
                        comentario.metadados?.via_email
                            ? 'via e-mail'
                            : comentario.tipo === 'sistema'
                              ? 'automático'
                              : comentario.tipo === 'interno'
                                ? 'nota interna'
                                : 'pelo sistema';

                    const linkedEmailId = comentario.metadados?.email_suporte_id;
                    const linkedEmail =
                        typeof linkedEmailId === 'number' ? emailsById.get(linkedEmailId) : undefined;
                    const showActionsRow =
                        (linkedEmail && onOpenEmailDetalhes) ||
                        (canDelete && comentario.tipo !== 'sistema');

                    return (
                        <React.Fragment key={comentario.id}>
                            {showDay ? (
                                <div className={styles.daySeparator}>
                                    <span className={styles.daySeparatorLabel}>
                                        {dayLabel(comentario.created_at)}
                                    </span>
                                </div>
                            ) : null}
                            <div className={`${styles.row} ${rowClassFor(role)}`}>
                                <div className={styles.bubbleWrap}>
                                    {role !== 'sistema' ? (
                                        <Avatar
                                            size="small"
                                            icon={<User size={ICON_SIZE_MD} aria-hidden />}
                                            src={comentario.usuario?.avatar}
                                        >
                                            {authorName.charAt(0).toUpperCase()}
                                        </Avatar>
                                    ) : null}
                                    <div className={`${styles.bubble} ${bubbleClassFor(role)}`}>
                                        <div className={styles.meta}>
                                            <div className={styles.metaIdentity}>
                                                <Text className={styles.author}>{authorName}</Text>
                                                <span
                                                    className={`${styles.roleLabel} ${roleLabelClass(role)}`}
                                                >
                                                    {roleLabel}
                                                </span>
                                            </div>
                                            <div className={styles.metaAside}>
                                                <span className={styles.metaHints}>
                                                    {renderEmailDeliveryHints(
                                                        comentario,
                                                        canRetryEmail
                                                            ? handleOpenEmailDiagnostico
                                                            : undefined,
                                                    )}
                                                    {comentario.metadados?.via_email ? (
                                                        <MetaHintIcon title="Recebido por e-mail do cliente">
                                                            <Mail size={ICON_SIZE_SM} aria-hidden />
                                                        </MetaHintIcon>
                                                    ) : null}
                                                </span>
                                                <span className={styles.time}>
                                                    {formatDate(comentario.created_at, true)}
                                                </span>
                                                <span className={styles.origin}>{origin}</span>
                                            </div>
                                        </div>
                                        <div className={styles.body}>
                                            {(() => {
                                                const body = displayComentarioBody(comentario.comentario);
                                                return body.includes('<') ? (
                                                    <div
                                                        className="chamado-comentario-html"
                                                        // eslint-disable-next-line react/no-danger -- HTML sanitizado
                                                        dangerouslySetInnerHTML={{
                                                            __html: sanitizeHtml(body),
                                                        }}
                                                    />
                                                ) : (
                                                    <Paragraph
                                                        style={{ marginBottom: 0, whiteSpace: 'pre-wrap' }}
                                                    >
                                                        {body}
                                                    </Paragraph>
                                                );
                                            })()}
                                        </div>
                                        {comentario.anexos && comentario.anexos.length > 0 ? (
                                            <div className={styles.anexos}>
                                                {comentario.anexos.map((a) => {
                                                    const canView =
                                                        isImageAnexo(a) || isPdfAnexo(a);
                                                    return (
                                                        <Space key={a.id} size={4}>
                                                            {canView ? (
                                                                <Button
                                                                    type="link"
                                                                    size="small"
                                                                    icon={
                                                                        <Eye
                                                                            size={ICON_SIZE_MD}
                                                                            aria-hidden
                                                                        />
                                                                    }
                                                                    style={{ padding: 0 }}
                                                                    onClick={() =>
                                                                        void handleVisualizarAnexo(a)
                                                                    }
                                                                >
                                                                    {a.nome_arquivo}
                                                                </Button>
                                                            ) : (
                                                                <Button
                                                                    type="link"
                                                                    size="small"
                                                                    icon={
                                                                        <Download
                                                                            size={ICON_SIZE_MD}
                                                                            aria-hidden
                                                                        />
                                                                    }
                                                                    style={{ padding: 0 }}
                                                                    onClick={() =>
                                                                        void handleDownloadAnexo(
                                                                            a.id,
                                                                            a.nome_arquivo,
                                                                        )
                                                                    }
                                                                >
                                                                    {a.nome_arquivo}
                                                                </Button>
                                                            )}
                                                            {canView ? (
                                                                <Button
                                                                    type="link"
                                                                    size="small"
                                                                    icon={
                                                                        <Download
                                                                            size={ICON_SIZE_MD}
                                                                            aria-hidden
                                                                        />
                                                                    }
                                                                    style={{ padding: 0 }}
                                                                    onClick={() =>
                                                                        void handleDownloadAnexo(
                                                                            a.id,
                                                                            a.nome_arquivo,
                                                                        )
                                                                    }
                                                                    aria-label={`Download ${a.nome_arquivo}`}
                                                                />
                                                            ) : null}
                                                        </Space>
                                                    );
                                                })}
                                            </div>
                                        ) : null}
                                        {showActionsRow ? (
                                            <div className={styles.actions}>
                                                {linkedEmail && onOpenEmailDetalhes ? (
                                                    <Button
                                                        type="link"
                                                        size="small"
                                                        onClick={() =>
                                                            onOpenEmailDetalhes(linkedEmail)
                                                        }
                                                    >
                                                        Ver detalhes do e-mail
                                                    </Button>
                                                ) : null}
                                                {canDelete && comentario.tipo !== 'sistema' ? (
                                                    <Popconfirm
                                                        title="Excluir comentário"
                                                        description="Tem certeza que deseja excluir este comentário?"
                                                        onConfirm={() => handleDelete(comentario.id)}
                                                        okText="Sim"
                                                        cancelText="Não"
                                                    >
                                                        <Button
                                                            type="text"
                                                            size="small"
                                                            danger
                                                            icon={
                                                                <Trash2
                                                                    size={ICON_SIZE_MD}
                                                                    aria-hidden
                                                                />
                                                            }
                                                        >
                                                            Excluir
                                                        </Button>
                                                    </Popconfirm>
                                                ) : null}
                                            </div>
                                        ) : null}
                                    </div>
                                </div>
                            </div>
                        </React.Fragment>
                    );
                })}
            </div>
            <ChamadoEmailDiagnosticoModal
                open={diagnosticoOpen}
                onClose={() => setDiagnosticoOpen(false)}
                chamadoId={String(chamadoId)}
                email={emailDiagnostico}
                canRetry={canRetryEmail}
                onRetrySuccess={() => void loadComentarios()}
            />
        </>
    );
}