'use client';

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

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

import React, { useState, useMemo, useCallback } from 'react';
import dynamic from 'next/dynamic';
/**
 * Backlog de desenvolvimento (tabela + Kanban).
 * FRONT-S2-02 — extraído de `app/(dashboard)/projetos/[id]/desenvolvimento/backlog/page.tsx`.
 */

    
import { Calendar, Clock, Filter, Folder, History, LayoutGrid, List, Loader2, Menu } from 'lucide-react';
import {
    Alert,
    Badge,
    Button,
    Card,
    Col,
    Drawer,
    Modal,
    Radio,
    Row,
    Select,
    Space,
    Table,
    Tag,
    Tooltip,
    Typography,
} from 'antd';
import { ICON_SIZE_MD } from '@/components/icons';
import { LazyExportButton } from '@/components/lazy';
import { LazyDataTable } from '@/components/lazy';
import type { ColumnsType } from 'antd/es/table';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useResponsiveModalProps } from '@/hooks/useResponsiveModalProps';
import { queryKeys } from '@/lib/cache/queryKeys';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { formatDate } from '@/lib/utils/export';
import { listingTableVirtualScrollProps } from '@/lib/listings/listingTableVirtualScrollProps';
import btnHeaderStyles from '@/components/ui/buttons/ButtonHeaderIcon/ButtonHeaderIcon.module.scss';
import { useParams, useRouter } from 'next/navigation';
import { usePermissions } from '@/contexts/PermissionsContext';
import apiClient from '@/lib/api/client';
import KanbanBoard, { KanbanItem, KanbanColumn } from '@/components/kanban/KanbanBoard';
import PageWrapper from '@/components/layouts/PageWrapper';
import PageHeaderPagina from '@/components/layouts/PageHeaderPagina';
import MetricsGrid from '@/components/layouts/MetricsGrid';
import MetricCard from '@/components/layouts/MetricCard';
import ContentCard from '@/components/layouts/ContentCard';
import { FormGroup } from '@/components/form';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';
import { ButtonHeaderIcon } from '@/components/ui';
import { FiltrosModalFooterPadrao,
    ListPageCreateFloatButton} from '@/components/listings';
import type { BacklogItem, KanbanData, ViewMode } from './types';
import { normalizeBacklogListResponse } from './normalizeBacklogListResponse';

/** Espelha `BacklogPolicy::create` (Administrador | Gerente | Desenvolvedor | Analista). */
const BACKLOG_CREATE_ROLES = ['Administrador', 'Gerente', 'Desenvolvedor', 'Analista'] as const;

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

const STATUS_FILTRO_LABELS: Record<string, string> = {
    backlog: 'Backlog',
    planejado: 'Planejado',
    em_andamento: 'Em Andamento',
    concluido: 'Concluído',
    cancelado: 'Cancelado'};

const TIPO_FILTRO_LABELS: Record<string, string> = {
    feature: 'Feature',
    bug: 'Bug',
    melhoria: 'Melhoria',
    refatoracao: 'Refatoração',
    documentacao: 'Documentação'};

const PRIORIDADE_FILTRO_LABELS: Record<string, string> = {
    baixa: 'Baixa',
    media: 'Média',
    alta: 'Alta',
    critica: 'Crítica'};

export function DesenvolvimentoBacklogScreen() {
    const params = useParams();
    const projetoId =
        typeof params?.id === 'string' ? params.id : Array.isArray(params?.id) ? params?.id[0] : '';
    const router = useRouter();
    const { hasAnyRole, loading: permLoading } = usePermissions();
    /** Alinhado a `BacklogPolicy::create`. */
    const canCreate = hasAnyRole([...BACKLOG_CREATE_ROLES]);
    const [viewMode, setViewMode] = useState<ViewMode>('table');
    const [selectedItem, setSelectedItem] = useState<BacklogItem | null>(null);
    const [drawerVisible, setDrawerVisible] = useState(false);
    const [opcoesItem, setOpcoesItem] = useState<BacklogItem | null>(null);
    const [filtroStatus, setFiltroStatus] = useState<string>('');
    const [filtroTipo, setFiltroTipo] = useState<string>('');
    const [filtroPrioridade, setFiltroPrioridade] = useState<string>('');
    const [filtrosModalOpen, setFiltrosModalOpen] = useState(false);
    const [draftStatus, setDraftStatus] = useState('');
    const [draftTipo, setDraftTipo] = useState('');
    const [draftPrioridade, setDraftPrioridade] = useState('');
    const filtrosModalLayout = useResponsiveModalProps();

    const {
        data: backlogData,
        isLoading,
        refetch} = useQueryCache<BacklogItem[] | { data: BacklogItem[] }>({
        queryKey: queryKeys.desenvolvimento.backlog.list({
            projeto_id: projetoId,
            status: filtroStatus,
            tipo: filtroTipo,
            prioridade: filtroPrioridade}),
        endpoint:
            API_ENDPOINTS.desenvolvimento?.backlog?.index || '/api/v1/backlogs',
        params: {
            projeto_id: projetoId,
            ...(filtroStatus && { status: filtroStatus }),
            ...(filtroTipo && { tipo: filtroTipo }),
            ...(filtroPrioridade && { prioridade: filtroPrioridade })},
        staleTime: 1 * 60 * 1000,
        gcTime: 5 * 60 * 1000,
        enabled: viewMode === 'table' && Boolean(projetoId)});

    const {
        data: kanbanData,
        isLoading: loadingKanban,
        refetch: refetchKanban} = useQueryCache<KanbanData>({
        queryKey: queryKeys.desenvolvimento.backlog.kanban({
            projeto_id: projetoId,
            tipo: filtroTipo || undefined,
            prioridade: filtroPrioridade || undefined}),
        endpoint: API_ENDPOINTS.desenvolvimento.backlog.kanban,
        params: {
            projeto_id: projetoId,
            ...(filtroTipo && { tipo: filtroTipo }),
            ...(filtroPrioridade && { prioridade: filtroPrioridade })},
        staleTime: 1 * 60 * 1000,
        gcTime: 5 * 60 * 1000,
        enabled: viewMode === 'kanban' && Boolean(projetoId)});

    const backlogItems = useMemo(
        () => normalizeBacklogListResponse(backlogData),
        [backlogData],
    );

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

    const resumoFiltrosAplicados = useMemo(() => {
        const partes: string[] = [];
        if (filtroStatus)
            partes.push(`Status: ${STATUS_FILTRO_LABELS[filtroStatus] ?? filtroStatus}`);
        if (filtroTipo) partes.push(`Tipo: ${TIPO_FILTRO_LABELS[filtroTipo] ?? filtroTipo}`);
        if (filtroPrioridade)
            partes.push(
                `Prioridade: ${PRIORIDADE_FILTRO_LABELS[filtroPrioridade] ?? filtroPrioridade}`,
            );
        return partes.length ? partes.join(' · ') : '';
    }, [filtroStatus, filtroTipo, filtroPrioridade]);

    const limparTodosFiltros = useCallback(() => {
        setFiltroStatus('');
        setFiltroTipo('');
        setFiltroPrioridade('');
        setDraftStatus('');
        setDraftTipo('');
        setDraftPrioridade('');
    }, []);

    const abrirModalFiltros = useCallback(() => {
        setDraftStatus(filtroStatus);
        setDraftTipo(filtroTipo);
        setDraftPrioridade(filtroPrioridade);
        setFiltrosModalOpen(true);
    }, [filtroStatus, filtroTipo, filtroPrioridade]);

    const reporRascunhoFiltros = useCallback(() => {
        setDraftStatus('');
        setDraftTipo('');
        setDraftPrioridade('');
    }, []);

    const aplicarFiltrosModal = useCallback(() => {
        setFiltroStatus(draftStatus);
        setFiltroTipo(draftTipo);
        setFiltroPrioridade(draftPrioridade);
        setFiltrosModalOpen(false);
    }, [draftStatus, draftTipo, draftPrioridade]);

    const handleBacklogMove = async (itemId: string | number, newStatus: string) => {
        try {
            await apiClient.put(API_ENDPOINTS.desenvolvimento.backlog.update(itemId), {
                status: newStatus});
            message.success('Status do item atualizado com sucesso!');
            refetch();
            refetchKanban();
        } catch (error: unknown) {
            const errorMessage =
                (error as { response?: { data?: { message?: string } } })?.response?.data
                    ?.message || 'Erro ao atualizar status do item';
            message.error(errorMessage);
        }
    };

    const handleDelete = async (item: BacklogItem) => {
        confirmDialog({
            title: 'Confirmar exclusão',
            content: `Deseja realmente excluir o item "${item.titulo}"?`,
            okText: 'Excluir',
            okType: 'danger',
            cancelText: 'Cancelar',
            onOk: async () => {
                try {
                    message.success('Item excluído com sucesso!');
                    refetch();
                } catch (error: unknown) {
                    const errorMessage =
                        (error as { response?: { data?: { message?: string } } })?.response?.data
                            ?.message || 'Erro ao excluir item';
                    message.error(errorMessage);
                }
            }});
    };

    const getStatusTag = (status: string) => {
        const statusConfig: Record<string, { color: string; label: string }> = {
            backlog: { color: 'default', label: 'Backlog' },
            planejado: { color: 'blue', label: 'Planejado' },
            em_andamento: { color: 'processing', label: 'Em Andamento' },
            concluido: { color: 'success', label: 'Concluído' },
            cancelado: { color: 'error', label: 'Cancelado' }};
        const config = statusConfig[status] || { color: 'default', label: status };
        return <Tag color={config.color}>{config.label}</Tag>;
    };

    const getTipoTag = (tipo: string) => {
        const tipoConfig: Record<string, { color: string; label: string }> = {
            feature: { color: 'blue', label: 'Feature' },
            bug: { color: 'red', label: 'Bug' },
            melhoria: { color: 'green', label: 'Melhoria' },
            refatoracao: { color: 'orange', label: 'Refatoração' },
            documentacao: { color: 'purple', label: 'Documentação' }};
        const config = tipoConfig[tipo] || { color: 'default', label: tipo };
        return <Tag color={config.color}>{config.label}</Tag>;
    };

    const getPrioridadeTag = (prioridade: string) => {
        const prioridadeConfig: Record<string, { color: string; label: string }> = {
            baixa: { color: 'default', label: 'Baixa' },
            media: { color: 'blue', label: 'Média' },
            alta: { color: 'orange', label: 'Alta' },
            critica: { color: 'red', label: 'Crítica' }};
        const config = prioridadeConfig[prioridade] || { color: 'default', label: prioridade };
        return <Tag color={config.color}>{config.label}</Tag>;
    };

    const columns: ColumnsType<BacklogItem> = [
        {
            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: 'Tipo',
            dataIndex: 'tipo',
            key: 'tipo',
            sorter: (a, b) =>
                String(a.tipo ?? '').localeCompare(String(b.tipo ?? ''), 'pt'),
            render: (tipo: string) => getTipoTag(tipo)},
        {
            title: 'Prioridade',
            dataIndex: 'prioridade',
            key: 'prioridade',
            sorter: (a, b) =>
                String(a.prioridade ?? '').localeCompare(String(b.prioridade ?? ''), 'pt'),
            render: (prioridade: string) => getPrioridadeTag(prioridade)},
        {
            title: 'Status',
            dataIndex: 'status',
            key: 'status',
            sorter: (a, b) =>
                String(a.status ?? '').localeCompare(String(b.status ?? ''), 'pt'),
            render: (status: string) => getStatusTag(status)},
        {
            title: 'Projeto',
            key: 'projeto',
            sorter: (a, b) =>
                String(a.projeto?.nome ?? '').localeCompare(String(b.projeto?.nome ?? ''), 'pt'),
            render: (_: unknown, record: BacklogItem) => (
                <span>{record.projeto?.nome || '-'}</span>
            )},
        {
            title: 'Estimativa',
            dataIndex: 'estimativa',
            key: 'estimativa',
            sorter: (a, b) => (a.estimativa ?? 0) - (b.estimativa ?? 0),
            render: (estimativa?: number) => (estimativa ? `${estimativa}h` : '-')},
        {
            title: 'Responsável',
            key: 'responsavel',
            sorter: (a, b) =>
                String(a.responsavel?.nome ?? '').localeCompare(
                    String(b.responsavel?.nome ?? ''),
                    'pt',
                ),
            render: (_: unknown, record: BacklogItem) => (
                <span>{record.responsavel?.nome || '-'}</span>
            )},
        {
            title: '',
            key: 'menu',
            width: 56,
            align: 'center',
            onCell: () => ({ onClick: (e: React.MouseEvent) => e.stopPropagation() }),
            render: (_: unknown, record: BacklogItem) => (
                <Button
                    type="text"
                    size="small"
                    icon={<Menu />}
                    onClick={() => setOpcoesItem(record)}
                    aria-label="Opções"
                />
            )},
    ];

    const itensBacklog = useMemo(() => {
        if (viewMode === 'kanban' && kanbanData) {
            const colunaBacklog = kanbanData.colunas.find((col) => col.id === 'backlog');
            return colunaBacklog?.itens.length || 0;
        }
        return backlogItems.filter((item) => item.status === 'backlog').length;
    }, [viewMode, kanbanData, backlogItems]);

    const itensPlanejados = useMemo(() => {
        if (viewMode === 'kanban' && kanbanData) {
            const colunaPlanejado = kanbanData.colunas.find((col) => col.id === 'planejado');
            return colunaPlanejado?.itens.length || 0;
        }
        return backlogItems.filter((item) => item.status === 'planejado').length;
    }, [viewMode, kanbanData, backlogItems]);

    const itensEmAndamento = useMemo(() => {
        if (viewMode === 'kanban' && kanbanData) {
            const colunaEmAndamento = kanbanData.colunas.find((col) => col.id === 'em_andamento');
            return colunaEmAndamento?.itens.length || 0;
        }
        return backlogItems.filter((item) => item.status === 'em_andamento').length;
    }, [viewMode, kanbanData, backlogItems]);

    const estimativaTotal = useMemo(() => {
        if (viewMode === 'kanban' && kanbanData) {
            return kanbanData.colunas
                .filter((col) => col.id !== 'concluido' && col.id !== 'cancelado')
                .flatMap((col) => col.itens)
                .reduce((sum, item) => sum + (item.estimativa || 0), 0);
        }
        return backlogItems
            .filter((item) => item.status !== 'concluido' && item.status !== 'cancelado')
            .reduce((sum, item) => sum + (item.estimativa || 0), 0);
    }, [viewMode, kanbanData, backlogItems]);

    const kanbanColumns: KanbanColumn[] = useMemo(() => {
        if (!kanbanData) return [];

        return kanbanData.colunas.map((coluna) => ({
            id: coluna.id,
            title: coluna.titulo,
            color: coluna.cor,
            items: coluna.itens.map((item) => ({
                ...item,
                id: item.id,
                title: item.titulo,
                description: item.descricao || undefined,
                status: item.status}))}));
    }, [kanbanData]);

    const handleBacklogClick = (item: KanbanItem) => {
        setSelectedItem(item as unknown as BacklogItem);
        setDrawerVisible(true);
    };

    const renderBacklogCard = (item: KanbanItem) => {
        const backlogItem = item as unknown as BacklogItem;
        return (
            <Card
                hoverable
                onClick={() => handleBacklogClick(item)}
                style={{ marginBottom: 8, cursor: 'pointer' }}
            >
                <div>
                    <Typography.Text strong style={{ display: 'block', marginBottom: 4 }}>
                        {backlogItem.titulo}
                    </Typography.Text>
                    {backlogItem.descricao && (
                        <Typography.Text
                            type="secondary"
                            style={{ display: 'block', marginBottom: 8, fontSize: 12 }}
                        >
                            {backlogItem.descricao.substring(0, 100)}
                            {backlogItem.descricao.length > 100 ? '...' : ''}
                        </Typography.Text>
                    )}
                    <Space wrap>
                        {getTipoTag(backlogItem.tipo)}
                        {getPrioridadeTag(backlogItem.prioridade)}
                        {backlogItem.estimativa && (
                            <Tag color="blue">{backlogItem.estimativa}h</Tag>
                        )}
                    </Space>
                    {backlogItem.projeto && (
                        <div style={{ marginTop: 8 }}>
                            <Typography.Text type="secondary" style={{ fontSize: 11 }}>
                                <Folder size={ICON_SIZE_MD} style={{ marginRight: 4 }} aria-hidden />
                                {backlogItem.projeto.nome}
                            </Typography.Text>
                        </div>
                    )}
                </div>
            </Card>
        );
    };

    return (
        <PageWrapper>
            <PageHeaderPagina
                title="Backlog"
                actions={
                    <Space wrap size={8} align="center">
                        <Tooltip
                            title={
                                filtrosComAlgumAtivo
                                    ? `Filtros ativos (${filtrosAtivosCount}) — afetam tabela e Kanban; abrir para alterar status, tipo ou prioridade`
                                    : 'Definir status, tipo e prioridade (tabela e Kanban)'
                            }
                        >
                            <span style={{ display: 'inline-block' }}>
                            <Badge dot={filtrosComAlgumAtivo} color="geekblue">
                                <ButtonHeaderIcon
                                    data-testid="desenvolvimento-backlog-abrir-filtros"
                                    icon={<Filter size={ICON_SIZE_MD} aria-hidden />}
                                    title={
                                        filtrosAtivosCount > 0
                                            ? `Filtros (${filtrosAtivosCount})`
                                            : 'Filtros'
                                    }
                                    aria-label="Abrir filtros do backlog"
                                    aria-expanded={filtrosModalOpen}
                                    aria-haspopup="dialog"
                                    onClick={abrirModalFiltros}
                                    className={btnHeaderStyles.btnHeaderIcon}
                                />
                            </Badge>
                            </span>
                        </Tooltip>
                        {viewMode === 'table' && (
                            <Tooltip title="Exportar itens do backlog visíveis (Excel, PDF, CSV ou JSON)">
                                <span style={{ display: 'inline-block' }}>
                                    <LazyExportButton
                                        data={backlogItems as unknown as Record<string, unknown>[]}
                                        columns={[
                                            { key: 'titulo', label: 'Título' },
                                            { key: 'tipo', label: 'Tipo' },
                                            { key: 'prioridade', label: 'Prioridade' },
                                        ]}
                                        filename="backlog"
                                        iconOnly
                                        title="Exportar backlog técnico"
                                        size="large"
                                        exportMenuMode="modal"
                                        className={btnHeaderStyles.btnHeaderIcon}
                                    />
                                </span>
                            </Tooltip>
                        )}
                        <Radio.Group
                            value={viewMode}
                            onChange={(e) => setViewMode(e.target.value)}
                            buttonStyle="solid"
                        >
                            <Radio.Button value="table">
                                <Table /> Tabela
                            </Radio.Button>
                            <Radio.Button value="kanban">
                                <LayoutGrid /> Kanban
                            </Radio.Button>
                        </Radio.Group>
                    </Space>
                }
            />

            {projetoId ? (
                <OperativeRouteHint
                    message="Prontidão para planejamento"
                    description="Depois de priorizar aqui, alinhe datas e capacidade com as sprints e o board do mesmo projeto. Use Filtros no cabeçalho para refinar a tabela e o Kanban."
                >
                    <Space wrap>
                        <Button type="primary" onClick={() => router.push(`/projetos/${projetoId}/planejamento/sprints`)}>
                            Sprints
                        </Button>
                        <Button onClick={() => router.push(`/projetos/${projetoId}/kanban`)}>Kanban</Button>
                    </Space>
                </OperativeRouteHint>
            ) : null}

            <MetricsGrid columns={4} style={{ marginBottom: 24 }}>
                <MetricCard
                    icon={<List size={ICON_SIZE_MD} aria-hidden />}
                    label="Backlog"
                    value={itensBacklog}
                    variant="projetos"
                />
                <MetricCard
                    icon={<Calendar size={ICON_SIZE_MD} aria-hidden />}
                    label="Planejados"
                    value={itensPlanejados}
                    variant="planejamento"
                />
                <MetricCard
                    icon={<Clock size={ICON_SIZE_MD} aria-hidden />}
                    label="Em Andamento"
                    value={itensEmAndamento}
                    variant="emAndamento"
                />
                <MetricCard
                    icon={<History size={ICON_SIZE_MD} aria-hidden />}
                    label="Estimativa Total"
                    value={`${estimativaTotal}h`}
                    variant="concluidos"
                />
            </MetricsGrid>

            <Modal
                title="Filtrar backlog (tabela e Kanban)"
                data-testid="desenvolvimento-backlog-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-backlog-filtros-modal-limpar-todos"
                    />
                }
                destroyOnHidden
                keyboard
                focusTriggerAfterClose
            >
                <Row gutter={16}>
                    <Col xs={24} sm={8}>
                        <FormGroup label="Status">
                            <Select
                                placeholder="Todos"
                                style={{ width: '100%' }}
                                allowClear
                                value={draftStatus || undefined}
                                onChange={(value) => setDraftStatus(value ?? '')}
                            >
                                <Select.Option value="backlog">Backlog</Select.Option>
                                <Select.Option value="planejado">Planejado</Select.Option>
                                <Select.Option value="em_andamento">Em Andamento</Select.Option>
                                <Select.Option value="concluido">Concluído</Select.Option>
                                <Select.Option value="cancelado">Cancelado</Select.Option>
                            </Select>
                        </FormGroup>
                    </Col>
                    <Col xs={24} sm={8}>
                        <FormGroup label="Tipo">
                            <Select
                                placeholder="Todos"
                                style={{ width: '100%' }}
                                allowClear
                                value={draftTipo || undefined}
                                onChange={(value) => setDraftTipo(value ?? '')}
                            >
                                <Select.Option value="feature">Feature</Select.Option>
                                <Select.Option value="bug">Bug</Select.Option>
                                <Select.Option value="melhoria">Melhoria</Select.Option>
                                <Select.Option value="refatoracao">Refatoração</Select.Option>
                                <Select.Option value="documentacao">Documentação</Select.Option>
                            </Select>
                        </FormGroup>
                    </Col>
                    <Col xs={24} sm={8}>
                        <FormGroup label="Prioridade">
                            <Select
                                placeholder="Todos"
                                style={{ width: '100%' }}
                                allowClear
                                value={draftPrioridade || undefined}
                                onChange={(value) => setDraftPrioridade(value ?? '')}
                            >
                                <Select.Option value="baixa">Baixa</Select.Option>
                                <Select.Option value="media">Média</Select.Option>
                                <Select.Option value="alta">Alta</Select.Option>
                                <Select.Option value="critica">Crítica</Select.Option>
                            </Select>
                        </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}

            {viewMode === 'table' ? (
                <div style={{ marginTop: filtrosComAlgumAtivo ? 0 : 24 }}>
                    <LazyDataTable
                        columns={columns}
                        data={backlogItems}
                        loading={isLoading}
                        onRefresh={refetch}
                        {...listingTableVirtualScrollProps(backlogItems.length)}
                        onRow={(record: unknown) => ({
                            onClick: () => setOpcoesItem(record as BacklogItem),
                            style: { cursor: 'pointer' },
                        })}
                    />
                </div>
            ) : (
                <ContentCard style={{ marginTop: filtrosComAlgumAtivo ? 0 : 24 }}>
                    {loadingKanban ? (
                        <div style={{ textAlign: 'center', padding: '40px' }}>
                            <Space direction="vertical" size="large">
                                <Loader2 size={ICON_SIZE_MD} style={{ fontSize: 32, color: '#1890ff' }} className="animate-spin" aria-hidden />
                                <Typography.Text type="secondary">
                                    Carregando backlog...
                                </Typography.Text>
                            </Space>
                        </div>
                    ) : kanbanColumns.length > 0 ? (
                        <KanbanBoard
                            dataTestId="projeto-backlog"
                            columns={kanbanColumns}
                            onItemMove={handleBacklogMove}
                            onItemClick={handleBacklogClick}
                            renderItem={renderBacklogCard}
                            loading={loadingKanban}
                        />
                    ) : (
                        <div style={{ textAlign: 'center', padding: '40px' }}>
                            <Typography.Text type="secondary">
                                Nenhum item do backlog encontrado
                            </Typography.Text>
                        </div>
                    )}
                </ContentCard>
            )}

            <ModalOpcoesBacklog
                open={opcoesItem !== null}
                onClose={() => setOpcoesItem(null)}
                item={opcoesItem}
                onVerDetalhes={(item) => {
                    setOpcoesItem(null);
                    setSelectedItem(item as BacklogItem);
                    setDrawerVisible(true);
                }}
                onEditar={(item) => {
                    setOpcoesItem(null);
                    window.location.href = `/desenvolvimento/backlog/${item.id}/edit`;
                }}
                onExcluir={(item) => {
                    setOpcoesItem(null);
                    handleDelete(item as BacklogItem);
                }}
            />

            <Drawer
                title={selectedItem?.titulo}
                placement="right"
                onClose={() => {
                    setDrawerVisible(false);
                    setSelectedItem(null);
                }}
                open={drawerVisible}
                width={600}
            >
                {selectedItem && (
                    <div>
                        <Row gutter={16} style={{ marginBottom: 16 }}>
                            <Col span={12}>
                                <Typography.Text strong>Tipo:</Typography.Text>
                                <div style={{ marginTop: 4 }}>{getTipoTag(selectedItem.tipo)}</div>
                            </Col>
                            <Col span={12}>
                                <Typography.Text strong>Prioridade:</Typography.Text>
                                <div style={{ marginTop: 4 }}>
                                    {getPrioridadeTag(selectedItem.prioridade)}
                                </div>
                            </Col>
                        </Row>
                        <Row gutter={16} style={{ marginBottom: 16 }}>
                            <Col span={12}>
                                <Typography.Text strong>Status:</Typography.Text>
                                <div style={{ marginTop: 4 }}>
                                    {getStatusTag(selectedItem.status)}
                                </div>
                            </Col>
                            <Col span={12}>
                                <Typography.Text strong>Estimativa:</Typography.Text>
                                <div style={{ marginTop: 4 }}>
                                    {selectedItem.estimativa ? `${selectedItem.estimativa}h` : '-'}
                                </div>
                            </Col>
                        </Row>
                        {selectedItem.projeto && (
                            <div style={{ marginBottom: 16 }}>
                                <Typography.Text strong>Projeto:</Typography.Text>
                                <div style={{ marginTop: 4 }}>{selectedItem.projeto.nome}</div>
                            </div>
                        )}
                        {selectedItem.sprint && (
                            <div style={{ marginBottom: 16 }}>
                                <Typography.Text strong>Sprint:</Typography.Text>
                                <div style={{ marginTop: 4 }}>{selectedItem.sprint.nome}</div>
                            </div>
                        )}
                        {selectedItem.responsavel && (
                            <div style={{ marginBottom: 16 }}>
                                <Typography.Text strong>Responsável:</Typography.Text>
                                <div style={{ marginTop: 4 }}>{selectedItem.responsavel.nome}</div>
                            </div>
                        )}
                        {selectedItem.descricao && (
                            <div style={{ marginBottom: 16 }}>
                                <Typography.Text strong>Descrição:</Typography.Text>
                                <div style={{ marginTop: 4, whiteSpace: 'pre-wrap' }}>
                                    {selectedItem.descricao}
                                </div>
                            </div>
                        )}
                        <div style={{ marginTop: 24 }}>
                            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                                Criado em: {formatDate(selectedItem.created_at)}
                            </Typography.Text>
                            <br />
                            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                                Atualizado em: {formatDate(selectedItem.updated_at)}
                            </Typography.Text>
                        </div>
                    </div>
                )}
            </Drawer>

            {!permLoading && canCreate ? (
                <ListPageCreateFloatButton
                    data-testid="desenvolvimento-backlog-fab-novo"
                    tooltip={{
                        title: 'Novo item no backlog — refine a vista com Filtros no cabeçalho',
                    }}
                    onClick={() => router.push('/desenvolvimento/backlog/create')}
                />
            ) : null}
        </PageWrapper>
    );
}