'use client';

import { message } from '@/lib/feedback/message';

import React, { useState, useMemo, useCallback } from 'react';
import dynamic from 'next/dynamic';
/**
 * Listagem de testes de qualidade por projeto.
 * FRONT-S2-02.cj — extraído de `app/(dashboard)/projetos/[id]/qualidade/testes/page.tsx`.
 * Layout: `ProjetoLayout` (chrome de gestão do projeto) + estados de listagem.
 */

import { CheckCircle2, Clock, Filter, Menu, Percent, XCircle } from 'lucide-react';
import {
    Alert,
    Badge,
    Button,
    Col,
    Modal,
    Result,
    Row,
    Select,
    Space,
    Tag,
    Tooltip,
    Typography,
} from 'antd';
import { ICON_SIZE_MD } from '@/components/icons';
import { LazyExportButton, LazyDataTable } from '@/components/lazy';
import type { ColumnsType } from 'antd/es/table';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useMutationCache } from '@/hooks/useMutationCache';
import { useResponsiveModalProps } from '@/hooks/useResponsiveModalProps';
import { useListingMobileChrome } from '@/components/mobile';
import { MobilePageActionBar } from '@/components/filters/MobilePageActionBar';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { queryKeys } from '@/lib/cache/queryKeys';
import { extractProjetoApiErrorMessage } from '@/features/projetos/utils/extractProjetoApiErrorMessage';
import { formatDate } from '@/lib/utils/export';
import { listingTableVirtualScrollProps } from '@/lib/listings/listingTableVirtualScrollProps';
import dayjs from 'dayjs';
import btnHeaderStyles from '@/components/ui/buttons/ButtonHeaderIcon/ButtonHeaderIcon.module.scss';
import { useRouter } from 'next/navigation';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import MetricsGrid from '@/components/layouts/MetricsGrid';
import MetricCard from '@/components/layouts/MetricCard';
import { FormGroup } from '@/components/form';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';
import { ButtonHeaderIcon } from '@/components/ui';
import { getLaravelApiErrorMessage } from '@/lib/api/laravelApiErrorMessage';
import type { ProjetoQualidadeTeste } from './types';
import { getProjetoQualidadeTesteStatusTag, getProjetoQualidadeTesteTipoTag } from './testesDisplay';
import { FiltrosModalFooterPadrao, ListPageCreateFloatButton } from '@/components/listings';
import { useProjetoWriteGates } from '@/features/projetos/hooks/useProjetoWriteGates';
import { LoadingState } from '@/components/ui/LoadingState';

const ModalOpcoesTeste = dynamic(
    () => import('./ModalOpcoesTeste').then((m) => m.ModalOpcoesTeste),
    { ssr: false },
);

export interface ProjetoQualidadeTestesScreenProps {
    projetoId: string;
}

export function ProjetoQualidadeTestesScreen({ projetoId }: ProjetoQualidadeTestesScreenProps) {
    const router = useRouter();
    const { isMobile } = useListingMobileChrome();
    const { canEditar, permsLoading } = useProjetoWriteGates();
    const [selectedTeste, setSelectedTeste] = useState<ProjetoQualidadeTeste | null>(null);
    const [modalDetalhes, setModalDetalhes] = useState(false);
    const [filtroStatus, setFiltroStatus] = useState<number | undefined>(undefined);
    const [filtroTipo, setFiltroTipo] = useState<number | undefined>(undefined);
    const [filtrosModalOpen, setFiltrosModalOpen] = useState(false);
    const [draftFiltroStatus, setDraftFiltroStatus] = useState<number | undefined>(undefined);
    const [draftFiltroTipo, setDraftFiltroTipo] = useState<number | undefined>(undefined);
    const [opcoesItem, setOpcoesItem] = useState<ProjetoQualidadeTeste | null>(null);
    const filtrosModalLayout = useResponsiveModalProps();
    const detalheModalLayout = useResponsiveModalProps();

    const { data: statusData } = useQueryCache<{
        data: Array<{ id: number; nome: string; codigo: string }>;
    }>({
        queryKey: queryKeys.qa.testes.status(),
        endpoint: API_ENDPOINTS.qa?.testes?.status || '/api/v1/qa/testes/status',
        staleTime: 30 * 60 * 1000,
        gcTime: 60 * 60 * 1000});

    const { data: tiposData } = useQueryCache<{
        data: Array<{ id: number; nome: string; codigo: string }>;
    }>({
        queryKey: queryKeys.qa.testes.tipos(),
        endpoint: API_ENDPOINTS.qa?.testes?.tipos || '/api/v1/qa/testes/tipos',
        staleTime: 30 * 60 * 1000,
        gcTime: 60 * 60 * 1000});

    const statusOptions =
        statusData?.data?.map((status) => ({
            label: status.nome,
            value: status.id})) || [];

    const tipoOptions =
        tiposData?.data?.map((tipo) => ({
            label: tipo.nome,
            value: tipo.id})) || [];

    const [page, setPage] = useState(1);
    const [pageSize, setPageSize] = useState(15);

    const {
        data: testesData,
        isLoading,
        isError: testesQueryIsError,
        error: testesQueryError,
        refetch} = useQueryCache<{ data: ProjetoQualidadeTeste[]; total?: number; per_page?: number; current_page?: number }>({
        // TASK-PSC-039 — listagem sempre paginada (máx. per_page 100)
        queryKey: queryKeys.qa.testes.listFiltered(projetoId, filtroStatus, filtroTipo, page, pageSize),
        endpoint: API_ENDPOINTS.qa?.testes?.index || '/api/v1/qa/testes',
        params: {
            projeto_id: Number(projetoId),
            page,
            per_page: pageSize,
            ...(filtroStatus && { status_id: filtroStatus }),
            ...(filtroTipo && { tipo_id: filtroTipo })},
        staleTime: 1 * 60 * 1000,
        gcTime: 5 * 60 * 1000,
        enabled: !!projetoId && !Number.isNaN(Number(projetoId))});

    const testes = useMemo(() => testesData?.data ?? [], [testesData?.data]);
    const testesTotal = testesData?.total ?? testes.length;

    const limparTodosFiltros = useCallback(() => {
        setFiltroStatus(undefined);
        setFiltroTipo(undefined);
        setDraftFiltroStatus(undefined);
        setDraftFiltroTipo(undefined);
        setPage(1);
    }, []);

    const abrirModalFiltros = useCallback(() => {
        setDraftFiltroStatus(filtroStatus);
        setDraftFiltroTipo(filtroTipo);
        setFiltrosModalOpen(true);
    }, [filtroStatus, filtroTipo]);

    const reporRascunhoFiltros = useCallback(() => {
        setDraftFiltroStatus(undefined);
        setDraftFiltroTipo(undefined);
    }, []);

    const aplicarFiltrosModal = useCallback(() => {
        setFiltroStatus(draftFiltroStatus);
        setFiltroTipo(draftFiltroTipo);
        setPage(1);
        setFiltrosModalOpen(false);
    }, [draftFiltroStatus, draftFiltroTipo]);

    /**
     * `POST /v1/qa/testes/{id}/executar` — a API coloca o teste em "executando" e regista executor
     * e data de execução. Confirmação ao usuário só depois da resposta OK (TASK-PSC-002).
     */
    const executarTesteMutation = useMutationCache<unknown, { id: number; nome: string }>({
        endpoint: (variables) => API_ENDPOINTS.qa.testes.executar(variables.id),
        method: 'POST',
        buildBody: () => ({}),
        onSuccess: (_data, variables) => {
            message.success(`Execução iniciada para "${variables.nome}".`);
            setOpcoesItem(null);
            void refetch();
        },
        onError: (error) =>
            message.error(
                extractProjetoApiErrorMessage(
                    error,
                    'Não foi possível executar o teste. Tente novamente.'
                )
            )});

    const handleExecutar = (teste: ProjetoQualidadeTeste) => {
        executarTesteMutation.mutate({ id: teste.id, nome: teste.nome });
    };

    const columns: ColumnsType<ProjetoQualidadeTeste> = useMemo(
        () => [
            {
                title: 'Nome',
                dataIndex: 'nome',
                key: 'nome',
                sorter: (a, b) => String(a.nome ?? '').localeCompare(String(b.nome ?? ''), 'pt'),
                render: (text: string) => <span style={{ fontWeight: 600, color: '#2c3e50' }}>{text}</span>},
            {
                title: 'Tipo',
                dataIndex: 'tipo',
                key: 'tipo',
                sorter: (a, b) => String(a.tipo ?? '').localeCompare(String(b.tipo ?? ''), 'pt'),
                render: (tipo: string) => getProjetoQualidadeTesteTipoTag(tipo)},
            {
                title: 'Status',
                dataIndex: 'status',
                key: 'status',
                sorter: (a, b) => String(a.status ?? '').localeCompare(String(b.status ?? ''), 'pt'),
                render: (status: string) => getProjetoQualidadeTesteStatusTag(status)},
            {
                title: 'Projeto',
                key: 'projeto',
                sorter: (a, b) =>
                    String(a.projeto?.nome ?? '').localeCompare(String(b.projeto?.nome ?? ''), 'pt'),
                render: (_: unknown, record: ProjetoQualidadeTeste) => (
                    <span>{record.projeto?.nome || '-'}</span>
                )},
            {
                title: 'Módulo',
                key: 'modulo',
                sorter: (a, b) =>
                    String(a.modulo?.nome ?? '').localeCompare(String(b.modulo?.nome ?? ''), 'pt'),
                render: (_: unknown, record: ProjetoQualidadeTeste) => (
                    <span>{record.modulo?.nome || '-'}</span>
                )},
            {
                title: 'Tempo',
                dataIndex: 'tempo_execucao',
                key: 'tempo_execucao',
                sorter: (a, b) => (a.tempo_execucao ?? 0) - (b.tempo_execucao ?? 0),
                render: (tempo?: number) => (tempo ? `${tempo}s` : '-')},
            {
                title: 'Última Execução',
                dataIndex: 'data_execucao',
                key: 'data_execucao',
                sorter: (a, b) => dayjs(a.data_execucao).valueOf() - dayjs(b.data_execucao).valueOf(),
                render: (data?: string) => (data ? formatDate(data) : '-')},
            {
                title: '',
                key: 'acoes',
                width: 56,
                align: 'center',
                onCell: () => ({ onClick: (e: React.MouseEvent) => e.stopPropagation() }),
                render: (_: unknown, record: ProjetoQualidadeTeste) => (
                    <Button
                        type="text"
                        size="small"
                        icon={<Menu />}
                        onClick={() => setOpcoesItem(record)}
                        aria-label="Opções"
                    />
                )},
        ],
        []
    );

    const testesPassaram = testes.filter((t) => t.status === 'passou').length;
    const testesFalharam = testes.filter((t) => t.status === 'falhou').length;
    const testesPendentes = testes.filter((t) => t.status === 'pendente').length;
    const taxaSucesso =
        testes.length > 0
            ? ((testesPassaram / (testesPassaram + testesFalharam)) * 100).toFixed(1)
            : '0';

    const resumoPorTipo = useMemo(() => {
        const map = new Map<string, number>();
        for (const t of testes) {
            const key = String(t.tipo || 'outro');
            map.set(key, (map.get(key) ?? 0) + 1);
        }
        return Array.from(map.entries())
            .map(([tipo, count]) => ({ tipo, count }))
            .sort((a, b) => b.count - a.count || a.tipo.localeCompare(b.tipo, 'pt-BR'));
    }, [testes]);

    const idValid = Boolean(projetoId.trim()) && !Number.isNaN(Number(projetoId));

    const fetchState = useMemo((): 'not_found' | 'error' | 'loading' | 'ready' => {
        if (!idValid) return 'not_found';
        if (testesQueryIsError && !testesData) return 'error';
        if (isLoading && !testesData) return 'loading';
        return 'ready';
    }, [idValid, testesQueryIsError, testesData, isLoading]);

    const listErrorMessage = useMemo(
        () => getLaravelApiErrorMessage(testesQueryError, 'Não foi possível carregar os testes.'),
        [testesQueryError],
    );

    const filtrosAtivosCount = useMemo(() => {
        let n = 0;
        if (filtroStatus !== undefined && filtroStatus !== null) n += 1;
        if (filtroTipo !== undefined && filtroTipo !== null) n += 1;
        return n;
    }, [filtroStatus, filtroTipo]);
    const filtrosComAlgumAtivo = filtrosAtivosCount > 0;

    const resumoFiltrosAplicados = useMemo(() => {
        const partes: string[] = [];
        if (filtroStatus != null) {
            const nome =
                statusData?.data?.find((s) => s.id === filtroStatus)?.nome ?? String(filtroStatus);
            partes.push(`Status: ${nome}`);
        }
        if (filtroTipo != null) {
            const nome = tiposData?.data?.find((t) => t.id === filtroTipo)?.nome ?? String(filtroTipo);
            partes.push(`Tipo: ${nome}`);
        }
        return partes.length ? partes.join(' · ') : '';
    }, [filtroStatus, filtroTipo, statusData?.data, tiposData?.data]);

    const headerAction =
        fetchState === 'ready' && !isMobile ? (
            <Space wrap size={8} align="center">
                <Tooltip
                    title={
                        filtrosComAlgumAtivo
                            ? `Filtros ativos (${filtrosAtivosCount}) — abrir para alterar status ou tipo`
                            : 'Definir status e tipo de teste na listagem'
                    }
                >
                    <span style={{ display: 'inline-block' }}>
                        <Badge dot={filtrosComAlgumAtivo} color="geekblue">
                            <ButtonHeaderIcon
                                data-testid="projeto-qualidade-testes-abrir-filtros"
                                icon={<Filter size={ICON_SIZE_MD} aria-hidden />}
                                title={
                                    filtrosAtivosCount > 0
                                        ? `Filtros (${filtrosAtivosCount})`
                                        : 'Filtros'
                                }
                                aria-label="Abrir filtros de testes"
                                aria-expanded={filtrosModalOpen}
                                aria-haspopup="dialog"
                                onClick={abrirModalFiltros}
                                className={btnHeaderStyles.btnHeaderIcon}
                            />
                        </Badge>
                    </span>
                </Tooltip>
                <Tooltip title="Exportar testes visíveis (Excel, PDF, CSV ou JSON)">
                    <span style={{ display: 'inline-block' }}>
                        <LazyExportButton
                            data={testes as unknown as Record<string, unknown>[]}
                            columns={[
                                { key: 'nome', label: 'Nome' },
                                { key: 'tipo', label: 'Tipo' },
                                { key: 'status', label: 'Status' },
                            ]}
                            filename="testes"
                            iconOnly
                            title="Exportar testes de qualidade"
                            size="large"
                            exportMenuMode="modal"
                            className={btnHeaderStyles.btnHeaderIcon}
                        />
                    </span>
                </Tooltip>
            </Space>
        ) : undefined;

    if (!idValid) {
        return (
            <Result
                status="404"
                title="Projeto inválido"
                subTitle="O identificador do projeto é inválido na rota."
                extra={
                    <Button type="primary" onClick={() => router.push('/projetos')}>
                        Voltar aos projetos
                    </Button>
                }
            />
        );
    }

    return (
        <ProjetoLayout
            projetoId={projetoId}
            pageTitle="Testes"
            showPageTitleIcon={false}
            titleSection="Testes e QA"
            breadcrumbItems={[
                { title: 'PROJETO' },
                { title: 'Projeto', path: `/projetos/${projetoId}` },
                { title: 'Qualidade' },
                { title: 'Testes' },
            ]}
            headerAction={headerAction}
        >
            {fetchState === 'loading' ? (
                <div style={{ textAlign: 'center', padding: 48 }} role="status" aria-busy="true">
                    <LoadingState size="large" label="Carregando testes…" />
                </div>
            ) : null}

            {fetchState === 'error' ? (
                <Result
                    status="error"
                    title="Erro ao carregar testes"
                    subTitle={listErrorMessage}
                    extra={
                        <Button type="primary" onClick={() => void refetch()}>
                            Tentar novamente
                        </Button>
                    }
                />
            ) : null}

            {fetchState === 'ready' ? (
                <>
            <OperativeRouteHint
                message="Cobertura e risco por fluxo"
                description={
                    isMobile
                        ? 'Use Filtros na barra inferior para status e tipo. Priorize retestar falhas de fluxos críticos antes de aprovar entrega.'
                        : 'Use Filtros no cabeçalho para status e tipo. Priorize retestar falhas associadas a fluxos críticos de negócio; pendentes prolongados aumentam risco de regressão em release — alinhe com o backlog antes de aprovar entrega.'
                }
            >
                <Space wrap>
                    <Button onClick={() => router.push(`/projetos/${projetoId}/planejamento/sprints`)}>
                        Ver sprints
                    </Button>
                </Space>
            </OperativeRouteHint>

            <Alert
                    type={testesFalharam > 0 ? 'warning' : 'info'}
                    showIcon
                    style={{ marginBottom: 24 }}
                    message="Leitura rápida deste recorte"
                    description={
                        <Space direction="vertical" size={8} style={{ width: '100%' }}>
                            <span>
                                {testesFalharam > 0 ? (
                                    <span>
                                        <strong>{testesFalharam}</strong> teste(s) com falha — exigem análise
                                        antes de release.{' '}
                                    </span>
                                ) : null}
                                {testesPendentes > 0 ? (
                                    <span>
                                        <strong>{testesPendentes}</strong> pendente(s) de execução.{' '}
                                    </span>
                                ) : null}
                                Taxa de sucesso (passou / passou+falhou): <strong>{taxaSucesso}%</strong>.
                            </span>
                            {resumoPorTipo.length > 0 ? (
                                <Space wrap size={[6, 6]} data-testid="projeto-qualidade-testes-por-tipo">
                                    <Typography.Text type="secondary">Por tipo:</Typography.Text>
                                    {resumoPorTipo.map((item) => (
                                        <Tag key={item.tipo}>
                                            {item.tipo}: {item.count}
                                        </Tag>
                                    ))}
                                </Space>
                            ) : null}
                        </Space>
                    }
                />

            <MetricsGrid columns={4} style={{ marginBottom: 24 }}>
                <MetricCard
                    icon={<CheckCircle2 size={ICON_SIZE_MD} aria-hidden />}
                    label="Testes Passaram"
                    value={testesPassaram}
                    variant="concluidos"
                />
                <MetricCard
                    icon={<XCircle size={ICON_SIZE_MD} aria-hidden />}
                    label="Testes Falharam"
                    value={testesFalharam}
                    variant="gradientRed"
                />
                <MetricCard
                    icon={<Clock size={ICON_SIZE_MD} aria-hidden />}
                    label="Pendentes"
                    value={testesPendentes}
                    variant="planejamento"
                />
                <MetricCard
                    icon={<Percent size={ICON_SIZE_MD} aria-hidden />}
                    label="Taxa de Sucesso"
                    value={`${taxaSucesso}%`}
                    variant="projetos"
                />
            </MetricsGrid>

            <Modal
                title="Filtrar por status e tipo"
                data-testid="projeto-qualidade-testes-filtros-modal"
                open={filtrosModalOpen}
                onCancel={() => setFiltrosModalOpen(false)}
                width={filtrosModalLayout.width ?? 640}
                centered={filtrosModalLayout.centered}
                styles={filtrosModalLayout.styles}
                footer={
                    <FiltrosModalFooterPadrao
                        onLimparTodos={reporRascunhoFiltros}
                        onFechar={() => setFiltrosModalOpen(false)}
                        showFiltrarPrimary
                        onFiltrar={aplicarFiltrosModal}
                        dataTestIdLimparTodos="projeto-qualidade-testes-filtros-modal-limpar-todos"
                    />
                }
                destroyOnHidden
                keyboard
                focusTriggerAfterClose
            >
                <Row gutter={16}>
                    <Col xs={24} md={12}>
                        <FormGroup label="Status">
                            <Select
                                placeholder="Todos"
                                style={{ width: '100%' }}
                                allowClear
                                value={draftFiltroStatus}
                                onChange={(value) => setDraftFiltroStatus(value ?? undefined)}
                                options={statusOptions}
                            />
                        </FormGroup>
                    </Col>
                    <Col xs={24} md={12}>
                        <FormGroup label="Tipo">
                            <Select
                                placeholder="Todos"
                                style={{ width: '100%' }}
                                allowClear
                                value={draftFiltroTipo}
                                onChange={(value) => setDraftFiltroTipo(value ?? undefined)}
                                options={tipoOptions}
                            />
                        </FormGroup>
                    </Col>
                </Row>
            </Modal>

            {filtrosComAlgumAtivo ? (
                <Alert
                    type="info"
                    showIcon
                    style={{ marginBottom: 16 }}
                    message={`Filtros aplicados (${filtrosAtivosCount})`}
                    description={
                        <>
                            {resumoFiltrosAplicados}
                            <Button type="link" onClick={limparTodosFiltros} style={{ paddingLeft: 8 }}>
                                Limpar filtros
                            </Button>
                        </>
                    }
                />
            ) : null}

            <div style={{ marginTop: filtrosComAlgumAtivo ? 0 : 24 }}>
                <LazyDataTable<ProjetoQualidadeTeste>
                    columns={columns}
                    data={testes}
                    loading={isLoading}
                    onRefresh={refetch}
                    {...listingTableVirtualScrollProps(testes.length)}
                    pagination={{
                        current: page,
                        pageSize,
                        total: testesTotal,
                        showSizeChanger: true,
                        pageSizeOptions: ['15', '30', '50', '100'],
                        onChange: (p, ps) => {
                            setPage(p);
                            setPageSize(ps);
                        },
                    }}
                    onRow={(record: unknown) => ({
                        onClick: () => setOpcoesItem(record as ProjetoQualidadeTeste),
                        style: { cursor: 'pointer' },
                    })}
                    autoMobileFromColumns={{
                        testIdPrefix: 'projeto-qualidade-testes',
                        listHeading: 'Lista de testes',
                        getFallbackTitle: (record: any) =>
                            record.nome?.trim() || `Teste ${record.id}`,
                        getSubtitle: (record: any) => {
                            const parts = [
                                record.tipo,
                                record.status,
                                record.tempo_execucao
                                    ? `${record.tempo_execucao}s`
                                    : null,
                            ].filter(Boolean);
                            return parts.length ? parts.join(' · ') : undefined;
                        },
                        excludeFieldKeys: ['nome', 'tipo', 'status', 'acoes'],
                        onCardClick: (item) => setOpcoesItem(item),
                        onOpenOptions: (item) => setOpcoesItem(item),
                    }}
                />
            </div>

            <ModalOpcoesTeste
                open={opcoesItem !== null}
                onClose={() => setOpcoesItem(null)}
                item={opcoesItem}
                onVerDetalhes={(item) => {
                    setOpcoesItem(null);
                    setSelectedTeste(item as ProjetoQualidadeTeste);
                    setModalDetalhes(true);
                }}
                onExecutar={(item) => handleExecutar(item as ProjetoQualidadeTeste)}
                executando={executarTesteMutation.isPending}
            />

            <Modal
                title={selectedTeste?.nome}
                open={modalDetalhes}
                onCancel={() => {
                    setModalDetalhes(false);
                    setSelectedTeste(null);
                }}
                footer={[
                    <Button
                        key="close"
                        onClick={() => {
                            setModalDetalhes(false);
                            setSelectedTeste(null);
                        }}
                    >
                        Fechar
                    </Button>,
                ]}
                width={detalheModalLayout.width ?? 800}
                centered={detalheModalLayout.centered}
                styles={detalheModalLayout.styles}
                destroyOnHidden
                keyboard
                focusTriggerAfterClose
                data-testid="projeto-qualidade-testes-detalhes-modal"
            >
                {selectedTeste && (
                    <div>
                        <Row gutter={[16, 8]} style={{ marginBottom: 16 }}>
                            <Col xs={24} md={12}>
                                <p>
                                    <strong>Tipo:</strong> {getProjetoQualidadeTesteTipoTag(selectedTeste.tipo)}
                                </p>
                                <p>
                                    <strong>Status:</strong>{' '}
                                    {getProjetoQualidadeTesteStatusTag(selectedTeste.status)}
                                </p>
                                {selectedTeste.tempo_execucao && (
                                    <p>
                                        <strong>Tempo de execução:</strong> {selectedTeste.tempo_execucao}s
                                    </p>
                                )}
                            </Col>
                            <Col xs={24} md={12}>
                                {selectedTeste.projeto && (
                                    <p>
                                        <strong>Projeto:</strong> {selectedTeste.projeto.nome}
                                    </p>
                                )}
                                {selectedTeste.modulo && (
                                    <p>
                                        <strong>Módulo:</strong> {selectedTeste.modulo.nome}
                                    </p>
                                )}
                                {selectedTeste.responsavel && (
                                    <p>
                                        <strong>Responsável:</strong> {selectedTeste.responsavel.nome}
                                    </p>
                                )}
                                {selectedTeste.data_execucao && (
                                    <p>
                                        <strong>Última execução:</strong>{' '}
                                        {formatDate(selectedTeste.data_execucao)}
                                    </p>
                                )}
                            </Col>
                        </Row>
                        {selectedTeste.descricao && (
                            <div style={{ marginBottom: 16 }}>
                                <p>
                                    <strong>Descrição:</strong>
                                </p>
                                <p>{selectedTeste.descricao}</p>
                            </div>
                        )}
                        {selectedTeste.resultado && (
                            <div style={{ marginBottom: 16 }}>
                                <p>
                                    <strong>Resultado:</strong>
                                </p>
                                <p
                                    style={{
                                        color:
                                            selectedTeste.status === 'falhou' ? '#cf1322' : '#3f8600'}}
                                >
                                    {selectedTeste.resultado}
                                </p>
                            </div>
                        )}
                    </div>
                )}
            </Modal>

                {!permsLoading && canEditar ? (
                    <ListPageCreateFloatButton
                        data-testid="projeto-qualidade-testes-fab-novo"
                        tooltip={{
                            title: isMobile
                                ? 'Novo teste — refine o recorte com Filtros na barra inferior'
                                : 'Novo teste — refine o recorte com Filtros no cabeçalho',
                        }}
                        onClick={() => router.push(`/projetos/${projetoId}/qualidade/testes/create`)}
                    />
                ) : null}
                </>
            ) : null}

            {isMobile && fetchState === 'ready' ? (
                <MobilePageActionBar
                    onOpenFilters={abrirModalFiltros}
                    activeFiltersCount={filtrosAtivosCount}
                    filterButtonLabel="Filtros"
                    onRefresh={() => void refetch()}
                    refreshLoading={isLoading}
                    opcoesContent={
                        <LazyExportButton
                            data={testes as unknown as Record<string, unknown>[]}
                            columns={[
                                { key: 'nome', label: 'Nome' },
                                { key: 'tipo', label: 'Tipo' },
                                { key: 'status', label: 'Status' },
                            ]}
                            filename="testes"
                            title="Exportar testes de qualidade"
                            exportMenuMode="modal"
                        />
                    }
                />
            ) : null}
        </ProjetoLayout>
    );
}