'use client';

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

import React, { useState, useMemo, useCallback } from 'react';
/**
 * @route /projetos/[id]/desenvolvimento/atas
 */

import { CheckCircle2, Eye, FileText, Filter, Menu } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import { LazyDataTable } from '@/components/lazy';
import { LazyExportButton } from '@/components/lazy';
import type { ColumnsType } from 'antd/es/table';
import { useParams } from 'next/navigation';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useMutationCache } from '@/hooks/useMutationCache';
import { useResponsiveModalProps } from '@/hooks/useResponsiveModalProps';
import {
    useWaygestFormModalProps,
    waygestFormModalFooterClassName,
} from '@/hooks/useWaygestFormModalProps';
import { queryKeys } from '@/lib/cache/queryKeys';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { PaginatedResponse } from '@/types';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import MetricsGrid from '@/components/layouts/MetricsGrid';
import MetricCard from '@/components/layouts/MetricCard';
import ContentCard from '@/components/layouts/ContentCard';
import { FormGroup } from '@/components/form';
import { ButtonHeaderIcon } from '@/components/ui';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';
import { FiltrosModalFooterPadrao, ListPageCreateFloatButton } from '@/components/listings';
import { FormDatePicker, FormInput, FormTextarea, FormTimePicker } from '@/components/form';
import { Alert, Badge, Button, Col, Form, Input, Modal, Row, Select, Space, Tag, Tooltip } from 'antd';
import { message } from '@/lib/feedback/message';
import { ModalOpcoesAta } from './components/ModalOpcoesAta';
import { getAtaTipoLabel } from './ataTipoDisplay';
import { ProjetoAntiSecretsBanner } from '@/features/projetos/ProjetoAntiSecretsBanner';
import btnHeaderStyles from '@/components/ui/buttons/ButtonHeaderIcon/ButtonHeaderIcon.module.scss';
import dayjs, { type Dayjs } from 'dayjs';

interface Ata {
    id: number;
    titulo: string;
    descricao?: string;
    tipo?: string;
    data?: string;
    projeto_id?: number;
    projeto?: {
        id: number;
        nome: string;
    };
    aprovada?: boolean;
    aprovada_por?: number;
    aprovada_em?: string;
    created_at: string;
    updated_at: string;
}

/** Payload alinhado a `StoreAtaRequest` (titulo, data, hora_inicio obrigatórios). */
interface CreateAtaFormValues {
    titulo: string;
    descricao?: string;
    data: Dayjs;
    hora_inicio: Dayjs;
    hora_fim?: Dayjs;
}

interface CreateAtaPayload {
    titulo: string;
    descricao?: string;
    data: string;
    hora_inicio: string;
    hora_fim?: string;
    projeto_id: number;
}

const STATUS_ATAS_LABEL: Record<string, string> = {
    aprovada: 'Aprovada',
    pendente: 'Pendente',
};

/**
 * Com `projeto_id`, a API (`AtaController@index` → `listarPorProjeto`) devolve Collection
 * JSON (array); sem filtro devolve LengthAwarePaginator `{ data, meta }`.
 * Normaliza ambos para o contrato da listagem Waygest.
 */
function normalizeAtasListResponse(raw: unknown): PaginatedResponse<Ata> | undefined {
    if (raw == null) return undefined;
    if (Array.isArray(raw)) {
        const data = raw as Ata[];
        const total = data.length;
        return {
            data,
            meta: {
                total,
                current_page: 1,
                per_page: total || 10,
                last_page: 1,
                from: total > 0 ? 1 : 0,
                to: total,
            },
            links: {
                first: '',
                last: '',
                prev: null,
                next: null,
            },
        };
    }
    if (typeof raw === 'object' && Array.isArray((raw as PaginatedResponse<Ata>).data)) {
        return raw as PaginatedResponse<Ata>;
    }
    return undefined;
}

export default function AtasPage() {
    const params = useParams();
    const projetoId = params?.id as string;
    const projetoIdNum = Number(projetoId);
    const projetoIdValido = Number.isFinite(projetoIdNum) && projetoIdNum > 0;
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);
    const [searchValue, setSearchValue] = useState('');
    const [searchInput, setSearchInput] = useState('');
    const [statusFilter, setStatusFilter] = useState<string>('');
    const [opcoesItem, setOpcoesItem] = useState<Ata | null>(null);
    const [detalheItem, setDetalheItem] = useState<Ata | null>(null);
    const [filtrosModalOpen, setFiltrosModalOpen] = useState(false);
    const [createModalOpen, setCreateModalOpen] = useState(false);
    const [draftStatusFilter, setDraftStatusFilter] = useState<string>('');
    const [draftSearchInput, setDraftSearchInput] = useState('');
    const [createForm] = Form.useForm<CreateAtaFormValues>();
    const filtrosModalLayout = useResponsiveModalProps();
    const createModalLayout = useWaygestFormModalProps();
    const detalheModalLayout = useResponsiveModalProps();

    const listFilters = useMemo(
        () => ({
            page: currentPage,
            pageSize,
            search: searchValue,
            status: statusFilter,
            projeto_id: projetoIdValido ? projetoIdNum : undefined,
        }),
        [currentPage, pageSize, searchValue, statusFilter, projetoIdValido, projetoIdNum]
    );

    const {
        data: atasRaw,
        isLoading,
        isError,
        error: atasQueryError,
        refetch,
    } = useQueryCache<PaginatedResponse<Ata> | Ata[]>({
        queryKey: queryKeys.desenvolvimento.atas.list(listFilters),
        endpoint: API_ENDPOINTS.desenvolvimento.atas.index,
        params: {
            page: currentPage,
            per_page: pageSize,
            ...(projetoIdValido ? { projeto_id: projetoIdNum } : {}),
            ...(searchValue && { search: searchValue }),
            ...(statusFilter && { status: statusFilter }),
        },
        enabled: projetoIdValido,
        staleTime: 1 * 60 * 1000,
        gcTime: 5 * 60 * 1000,
    });

    const atas = useMemo(() => normalizeAtasListResponse(atasRaw), [atasRaw]);

    const approveMutation = useMutationCache<Record<string, unknown>, number>({
        endpoint: (id) => API_ENDPOINTS.desenvolvimento.atas.aprovar(id),
        method: 'POST',
        invalidateQueries: [queryKeys.desenvolvimento.atas.lists()],
        onSuccess: () => {
            message.success('Ata aprovada com sucesso!');
            refetch();
        },
        onError: (err: unknown) => {
            const errorMessage =
                (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
                'Erro ao aprovar ata';
            message.error(errorMessage);
        },
    });

    const createMutation = useMutationCache<Ata, CreateAtaPayload>({
        endpoint: API_ENDPOINTS.desenvolvimento.atas.store,
        method: 'POST',
        invalidateQueries: [queryKeys.desenvolvimento.atas.lists()],
        onSuccess: () => {
            message.success('Ata criada com sucesso!');
            setCreateModalOpen(false);
            createForm.resetFields();
            setCurrentPage(1);
            refetch();
        },
        onError: (err: unknown) => {
            const errorMessage =
                (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
                'Não foi possível criar a ata. Verifique os campos e tente novamente.';
            message.error(errorMessage);
        },
    });

    const limparTodosFiltros = useCallback(() => {
        setStatusFilter('');
        setSearchValue('');
        setSearchInput('');
        setDraftStatusFilter('');
        setDraftSearchInput('');
        setCurrentPage(1);
    }, []);

    const handlePageChange = (page: number, size?: number) => {
        setCurrentPage(page);
        if (size) setPageSize(size);
    };

    const abrirModalFiltros = useCallback(() => {
        setDraftStatusFilter(statusFilter);
        setDraftSearchInput(searchInput);
        setFiltrosModalOpen(true);
    }, [statusFilter, searchInput]);

    const abrirModalCreate = useCallback(() => {
        createForm.resetFields();
        createForm.setFieldsValue({
            data: dayjs(),
            hora_inicio: dayjs().hour(9).minute(0).second(0),
        });
        setCreateModalOpen(true);
    }, [createForm]);

    const reporRascunhoFiltros = useCallback(() => {
        setDraftStatusFilter('');
        setDraftSearchInput('');
    }, []);

    const aplicarFiltrosModal = useCallback(() => {
        setStatusFilter(draftStatusFilter);
        const q = draftSearchInput.trim();
        setSearchValue(q);
        setSearchInput(q);
        setCurrentPage(1);
        setFiltrosModalOpen(false);
    }, [draftStatusFilter, draftSearchInput]);

    const handleApprove = async (id: number) => {
        confirmDialog({
            title: 'Aprovar Ata',
            content: 'Deseja realmente aprovar esta ata?',
            okText: 'Aprovar',
            okType: 'primary',
            cancelText: 'Cancelar',
            onOk: () => approveMutation.mutate(id),
        });
    };

    const handleCreateSubmit = (values: CreateAtaFormValues) => {
        if (!projetoIdValido) {
            message.error('Projeto inválido — não é possível criar a ata.');
            return;
        }
        const payload: CreateAtaPayload = {
            titulo: values.titulo.trim(),
            data: values.data.format('YYYY-MM-DD'),
            hora_inicio: values.hora_inicio.format('HH:mm'),
            projeto_id: projetoIdNum,
        };
        const descricao = values.descricao?.trim();
        if (descricao) payload.descricao = descricao;
        if (values.hora_fim?.isValid()) {
            payload.hora_fim = values.hora_fim.format('HH:mm');
        }
        createMutation.mutate(payload);
    };

    const columns: ColumnsType<Ata> = [
        {
            title: 'Título',
            dataIndex: 'titulo',
            key: 'titulo',
            sorter: (a, b) =>
                String(a.titulo ?? '').localeCompare(String(b.titulo ?? ''), 'pt'),
            render: (text: string) => <span style={{ fontWeight: 600, color: '#2c3e50' }}>{text}</span>,
        },
        {
            title: 'Projeto',
            dataIndex: ['projeto', 'nome'],
            key: 'projeto',
            sorter: (a, b) =>
                String(a.projeto?.nome ?? '').localeCompare(String(b.projeto?.nome ?? ''), 'pt'),
            render: (text: string) => text || '-',
        },
        {
            title: 'Tipo',
            dataIndex: 'tipo',
            key: 'tipo',
            sorter: (a, b) =>
                getAtaTipoLabel(a.tipo).localeCompare(getAtaTipoLabel(b.tipo), 'pt'),
            render: (tipo: string) =>
                tipo ? <Tag color="blue">{getAtaTipoLabel(tipo)}</Tag> : '—',
        },
        {
            title: 'Data',
            dataIndex: 'data',
            key: 'data',
            sorter: (a, b) => dayjs(a.data).valueOf() - dayjs(b.data).valueOf(),
            render: (data: string) => (data ? new Date(data).toLocaleDateString('pt-BR') : '-'),
        },
        {
            title: 'Status',
            dataIndex: 'aprovada',
            key: 'status',
            sorter: (a, b) => Number(!!a.aprovada) - Number(!!b.aprovada),
            render: (aprovada: boolean) => (
                <Tag color={aprovada ? 'success' : 'default'}>
                    {aprovada ? 'Aprovada' : 'Pendente'}
                </Tag>
            ),
        },
        {
            title: '',
            key: 'menu',
            width: 56,
            align: 'center',
            onCell: () => ({ onClick: (e: React.MouseEvent) => e.stopPropagation() }),
            render: (_: unknown, record: Ata) => (
                <Button
                    type="text"
                    size="small"
                    icon={<Menu />}
                    onClick={() => setOpcoesItem(record)}
                    aria-label="Opções"
                />
            ),
        },
    ];

    /** Garante array mesmo se a API devolver envelope sem `data` (evita crash no DataTable). */
    const listaAtas = useMemo(
        () => (Array.isArray(atas?.data) ? atas.data : []),
        [atas?.data]
    );
    const atasPaginadas = useMemo(
        () => (Array.isArray(atas?.data) ? atas : undefined),
        [atas]
    );

    const aprovadas = listaAtas.filter((a) => a.aprovada).length || 0;
    const pendentes = listaAtas.filter((a) => !a.aprovada).length || 0;

    const filtrosAtivosCount = useMemo(() => {
        let n = 0;
        if (statusFilter) n += 1;
        if (searchValue.trim()) n += 1;
        return n;
    }, [statusFilter, searchValue]);
    const filtrosComAlgumAtivo = filtrosAtivosCount > 0;

    const resumoFiltrosAplicados = useMemo(() => {
        const partes: string[] = [];
        if (statusFilter) {
            partes.push(`Estado: ${STATUS_ATAS_LABEL[statusFilter] ?? statusFilter}`);
        }
        const q = searchValue.trim();
        if (q) partes.push(`Pesquisa: "${q}"`);
        return partes.length ? partes.join(' · ') : '';
    }, [statusFilter, searchValue]);

    const listErrorMessage =
        (atasQueryError as { response?: { data?: { message?: string } }; message?: string })
            ?.response?.data?.message ||
        (atasQueryError as { message?: string })?.message ||
        'Não foi possível carregar as atas deste projeto.';

    return (
        <ProjetoLayout
            projetoId={projetoIdValido ? projetoId : ''}
            pageTitle="Atas"
            showPageTitleIcon={false}
            titleSection="Atas"
            headerAction={
                <Space wrap size={8} align="center">
                    <Tooltip
                        title={
                            filtrosComAlgumAtivo
                                ? `Filtros ativos (${filtrosAtivosCount}) — abrir para alterar estado ou pesquisa`
                                : 'Definir estado e texto de pesquisa na listagem'
                        }
                    >
                        <span style={{ display: 'inline-block' }}>
                            <Badge dot={filtrosComAlgumAtivo} color="geekblue">
                                <ButtonHeaderIcon
                                    data-testid="desenvolvimento-atas-abrir-filtros"
                                    icon={<Filter size={ICON_SIZE_MD} aria-hidden />}
                                    title={
                                        filtrosAtivosCount > 0
                                            ? `Filtros (${filtrosAtivosCount})`
                                            : 'Filtros'
                                    }
                                    aria-label="Abrir filtros de atas"
                                    aria-expanded={filtrosModalOpen}
                                    aria-haspopup="dialog"
                                    onClick={abrirModalFiltros}
                                    className={btnHeaderStyles.btnHeaderIcon}
                                />
                            </Badge>
                        </span>
                    </Tooltip>
                    <Tooltip title="Exportar atas visíveis nesta página (Excel, PDF, CSV ou JSON)">
                        <span style={{ display: 'inline-block' }}>
                            <LazyExportButton
                                data={(listaAtas || []) as unknown as Record<string, unknown>[]}
                                columns={[
                                    { key: 'titulo', label: 'Título' },
                                    { key: 'tipo', label: 'Tipo' },
                                    { key: 'data', label: 'Data' },
                                ]}
                                filename="atas"
                                title="Exportar atas"
                                iconOnly
                                size="large"
                                exportMenuMode="modal"
                                className={btnHeaderStyles.btnHeaderIcon}
                            />
                        </span>
                    </Tooltip>
                </Space>
            }
        >
            <OperativeRouteHint
                message="Atas mais acionáveis"
                description={'Use o estado "Pendente" para priorizar aprovações; após rever, exporte o conjunto para arquivo ou auditoria.'}
            >
                <Space wrap>
                    <Button type="primary" onClick={abrirModalCreate} data-testid="desenvolvimento-atas-hint-nova">
                        Nova ata
                    </Button>
                    <Button
                        onClick={() => {
                            setStatusFilter('pendente');
                            setDraftStatusFilter('pendente');
                            setCurrentPage(1);
                        }}
                        data-testid="desenvolvimento-atas-hint-pendentes"
                    >
                        Ver pendentes
                    </Button>
                </Space>
            </OperativeRouteHint>

            <ProjetoAntiSecretsBanner variant="atas" />

            {!projetoIdValido ? (
                <Alert
                    type="error"
                    showIcon
                    style={{ marginBottom: 16 }}
                    message="Projeto inválido"
                    description="Não foi possível identificar o projeto nesta rota. Volte à visão geral e abra as atas novamente."
                />
            ) : null}

            {isError ? (
                <Alert
                    type="error"
                    showIcon
                    style={{ marginBottom: 16 }}
                    message="Erro ao carregar atas"
                    description={
                        <Space direction="vertical" size={8}>
                            <span>{listErrorMessage}</span>
                            <Button size="small" onClick={() => refetch()}>
                                Tentar novamente
                            </Button>
                        </Space>
                    }
                />
            ) : null}

            {atas && !isError ? (
                <MetricsGrid columns={3} style={{ marginBottom: 24 }}>
                    <MetricCard
                        icon={<FileText size={ICON_SIZE_MD} aria-hidden />}
                        label="Total de Atas"
                        value={atas.meta?.total || listaAtas.length}
                        variant="projetos"
                    />
                    <MetricCard
                        icon={<CheckCircle2 size={ICON_SIZE_MD} aria-hidden />}
                        label="Aprovadas"
                        value={aprovadas}
                        variant="concluidos"
                    />
                    <MetricCard
                        icon={<Eye size={ICON_SIZE_MD} aria-hidden />}
                        label="Pendentes"
                        value={pendentes}
                        variant="planejamento"
                    />
                </MetricsGrid>
            ) : null}

            <Modal
                title="Filtrar e pesquisar"
                data-testid="desenvolvimento-atas-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="desenvolvimento-atas-filtros-modal-limpar-todos"
                    />
                }
                destroyOnHidden
                keyboard
                focusTriggerAfterClose
            >
                <Row gutter={16}>
                    <Col xs={24} sm={12}>
                        <FormGroup label="Estado">
                            <Select
                                placeholder="Filtrar por status"
                                allowClear
                                style={{ width: '100%' }}
                                value={draftStatusFilter || undefined}
                                onChange={(v) => setDraftStatusFilter(v ?? '')}
                            >
                                <Select.Option value="aprovada">Aprovada</Select.Option>
                                <Select.Option value="pendente">Pendente</Select.Option>
                            </Select>
                        </FormGroup>
                    </Col>
                </Row>
                <Row gutter={16} style={{ marginTop: 16 }}>
                    <Col xs={24}>
                        <FormGroup label="Pesquisa">
                            <Input.Search
                                placeholder={'Buscar atas (título…) — confirme com "Filtrar" ou Enter em "Pesquisar"'}
                                allowClear
                                value={draftSearchInput}
                                onChange={(e) => setDraftSearchInput(e.target.value)}
                                onSearch={() => aplicarFiltrosModal()}
                                enterButton="Pesquisar"
                                aria-label="Pesquisar atas na listagem"
                            />
                        </FormGroup>
                    </Col>
                </Row>
            </Modal>

            <Modal
                title="Nova ata"
                data-testid="desenvolvimento-atas-create-modal"
                open={createModalOpen}
                onCancel={() => {
                    if (createMutation.isPending) return;
                    setCreateModalOpen(false);
                    createForm.resetFields();
                }}
                footer={
                    <div className={waygestFormModalFooterClassName}>
                        <Button
                            onClick={() => {
                                setCreateModalOpen(false);
                                createForm.resetFields();
                            }}
                            disabled={createMutation.isPending}
                        >
                            Cancelar
                        </Button>
                        <Button
                            type="primary"
                            loading={createMutation.isPending}
                            onClick={() => createForm.submit()}
                        >
                            Criar ata
                        </Button>
                    </div>
                }
                width={createModalLayout.width ?? 640}
                centered={createModalLayout.centered ?? true}
                className={createModalLayout.className}
                styles={createModalLayout.styles ?? {}}
                zIndex={createModalLayout.zIndex}
                keyboard={!createMutation.isPending}
                focusTriggerAfterClose
                destroyOnHidden
                maskClosable={!createMutation.isPending}
            >
                <ProjetoAntiSecretsBanner
                    variant="atas"
                    style={{ marginBottom: 0, marginTop: 8 }}
                />
                <Form
                    form={createForm}
                    layout="vertical"
                    onFinish={handleCreateSubmit}
                    style={{ marginTop: 16 }}
                    disabled={createMutation.isPending}
                >
                    <FormInput
                        name="titulo"
                        label="Título"
                        placeholder="Ex.: Reunião de alinhamento de sprint"
                        rules={[{ required: true, message: 'Informe o título da ata.' }]}
                    />
                    <FormTextarea
                        name="descricao"
                        label="Descrição"
                        rows={3}
                        placeholder="Resumo opcional da reunião…"
                    />
                    <Row gutter={16}>
                        <Col xs={24} sm={12}>
                            <FormDatePicker
                                name="data"
                                label="Data"
                                required
                                format="DD/MM/YYYY"
                            />
                        </Col>
                        <Col xs={24} sm={12}>
                            <FormTimePicker
                                name="hora_inicio"
                                label="Hora de início"
                                required
                                format="HH:mm"
                            />
                        </Col>
                    </Row>
                    <Row gutter={16}>
                        <Col xs={24} sm={12}>
                            <FormTimePicker
                                name="hora_fim"
                                label="Hora de fim"
                                format="HH:mm"
                                placeholder="Opcional"
                            />
                        </Col>
                    </Row>
                </Form>
            </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}

            <ContentCard style={{ marginTop: filtrosComAlgumAtivo ? 0 : undefined }}>
                <LazyDataTable
                    columns={columns}
                    data={listaAtas}
                    paginatedData={atasPaginadas}
                    loading={isLoading && !isError}
                    onRefresh={refetch}
                    onPageChange={handlePageChange}
                    onRow={(record: unknown) => ({
                        onClick: () => setOpcoesItem(record as Ata),
                        style: { cursor: 'pointer' },
                    })}
                />
            </ContentCard>

            <ModalOpcoesAta
                open={opcoesItem !== null}
                onClose={() => setOpcoesItem(null)}
                item={opcoesItem}
                onVer={(item) => {
                    setOpcoesItem(null);
                    setDetalheItem(item as Ata);
                }}
                onAprovar={(item) => {
                    setOpcoesItem(null);
                    handleApprove(item.id);
                }}
                hideAprovar={opcoesItem?.aprovada === true}
            />

            <Modal
                title={detalheItem?.titulo ?? 'Detalhe da ata'}
                open={detalheItem !== null}
                onCancel={() => setDetalheItem(null)}
                footer={
                    <Button type="primary" onClick={() => setDetalheItem(null)}>
                        Fechar
                    </Button>
                }
                width={detalheModalLayout.width ?? 640}
                centered={detalheModalLayout.centered}
                styles={detalheModalLayout.styles}
                destroyOnHidden
                keyboard
                focusTriggerAfterClose
                data-testid="desenvolvimento-atas-detalhe-modal"
            >
                {detalheItem ? (
                    <Space direction="vertical" size={12} style={{ width: '100%' }}>
                        <ProjetoAntiSecretsBanner
                            variant="atas"
                            style={{ marginBottom: 0 }}
                        />
                        <div>
                            <strong>Tipo:</strong>{' '}
                            {detalheItem.tipo ? (
                                <Tag color="blue">{getAtaTipoLabel(detalheItem.tipo)}</Tag>
                            ) : (
                                '—'
                            )}
                        </div>
                        <div>
                            <strong>Estado:</strong>{' '}
                            <Tag color={detalheItem.aprovada ? 'success' : 'default'}>
                                {detalheItem.aprovada ? 'Aprovada' : 'Pendente'}
                            </Tag>
                        </div>
                        <div>
                            <strong>Data:</strong>{' '}
                            {detalheItem.data
                                ? new Date(detalheItem.data).toLocaleDateString('pt-BR')
                                : '—'}
                        </div>
                        {detalheItem.descricao ? (
                            <div>
                                <strong>Descrição:</strong>
                                <div style={{ marginTop: 4, color: 'rgba(0,0,0,0.65)' }}>
                                    {detalheItem.descricao}
                                </div>
                            </div>
                        ) : null}
                        <Alert
                            type="info"
                            showIcon
                            message="Continua no hub tipológico deste projeto"
                            description={'Esta vista mantém o menu do projeto. Use "Fechar" para voltar à listagem de atas.'}
                        />
                    </Space>
                ) : null}
            </Modal>

            <ListPageCreateFloatButton
                data-testid="desenvolvimento-atas-fab-novo"
                tooltip={{ title: 'Nova ata vinculada a este projeto' }}
                onClick={abrirModalCreate}
            />
        </ProjetoLayout>
    );
}