'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 do projeto no contexto Planejamento (tabela, CRUD, drawer).
 * FRONT-S2-02 — extraído de `app/(dashboard)/projetos/[id]/planejamento/backlog/page.tsx`.
 */

import { Calendar, Clock, Filter, History, List, Menu, Pencil } from 'lucide-react';
import {
    Alert,
    Badge,
    Button,
    Col,
    Drawer,
    Form,
    Input,
    InputNumber,
    Modal,
    Row,
    Select,
    Space,
    Tag,
    Tooltip,
    Typography,
} from 'antd';
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 { usePermissions } from '@/contexts/PermissionsContext';
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 { formatDate } from '@/lib/utils/export';
import { listingTableVirtualScrollProps } from '@/lib/listings/listingTableVirtualScrollProps';
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 { FiltrosModalFooterPadrao,
    ListPageCreateFloatButton} from '@/components/listings';
import btnHeaderStyles from '@/components/ui/buttons/ButtonHeaderIcon/ButtonHeaderIcon.module.scss';
import {
    PRIORIDADE_OPTIONS,
    STATUS_OPTIONS,
    TIPO_OPTIONS,
    type PlanejamentoBacklogItem} from './types';
import { normalizeBacklogListResponse } from '@/features/projetos/desenvolvimento-backlog/normalizeBacklogListResponse';

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

const ModalOpcoesBacklog = dynamic(
    () =>
        import('@/features/projetos/desenvolvimento-backlog').then((m) => m.ModalOpcoesBacklog),
    { ssr: false },
);
const OperativeRouteHint = dynamic(
    () => import('@/components/layouts').then((m) => m.OperativeRouteHint),
    { ssr: false },
);

function routeSegmentId(params: ReturnType<typeof useParams>): string {
    const raw = params?.id;
    if (typeof raw === 'string') return raw;
    if (Array.isArray(raw)) return raw[0] ?? '';
    return '';
}

export function ProjetoPlanejamentoBacklogScreen() {
    const params = useParams();
    const projetoId = routeSegmentId(params);
    const { hasAnyRole, loading: permLoading } = usePermissions();
    /** Alinhado a `BacklogPolicy::create`. */
    const canCreate = hasAnyRole([...BACKLOG_CREATE_ROLES]);

    const [opcoesItem, setOpcoesItem] = useState<PlanejamentoBacklogItem | null>(null);
    const [selectedItem, setSelectedItem] = useState<PlanejamentoBacklogItem | null>(null);
    const [drawerVisible, setDrawerVisible] = useState(false);
    const [modalOpen, setModalOpen] = useState(false);
    const [editingItem, setEditingItem] = useState<PlanejamentoBacklogItem | null>(null);
    const [filtroStatus, setFiltroStatus] = useState<string>('');
    const [filtroTipo, setFiltroTipo] = useState<string>('');
    const [filtroPrioridade, setFiltroPrioridade] = useState<string>('');
    const [filtrosModalOpen, setFiltrosModalOpen] = useState(false);
    const [draftFiltroStatus, setDraftFiltroStatus] = useState('');
    const [draftFiltroTipo, setDraftFiltroTipo] = useState('');
    const [draftFiltroPrioridade, setDraftFiltroPrioridade] = useState('');
    const [form] = Form.useForm();
    const formModalLayout = useWaygestFormModalProps();
    const filtrosModalLayout = useResponsiveModalProps();

    const {
        data: backlogData,
        isLoading,
        refetch} = useQueryCache<PlanejamentoBacklogItem[] | { data: PlanejamentoBacklogItem[] }>({
        queryKey: queryKeys.desenvolvimento.backlog.list({
            projeto_id: projetoId,
            status: filtroStatus,
            tipo: filtroTipo,
            prioridade: filtroPrioridade,
        }),
        endpoint: API_ENDPOINTS.desenvolvimento.backlog.index,
        params: {
            projeto_id: projetoId,
            ...(filtroStatus && { status: filtroStatus }),
            ...(filtroTipo && { tipo: filtroTipo }),
            ...(filtroPrioridade && { prioridade: filtroPrioridade })},
        staleTime: 1 * 60 * 1000,
        gcTime: 5 * 60 * 1000,
        enabled: !!projetoId});

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

    const storeMutation = useMutationCache<PlanejamentoBacklogItem, Record<string, unknown>>({
        endpoint: API_ENDPOINTS.desenvolvimento.backlog.store,
        method: 'POST',
        invalidateQueries: [queryKeys.desenvolvimento.backlog.lists()],
        onSuccess: () => {
            message.success('Item criado com sucesso!');
            setModalOpen(false);
            form.resetFields();
            refetch();
        },
        onError: (err: unknown) => {
            const e = err as { response?: { data?: { message?: string } } };
            message.error(e?.response?.data?.message || 'Erro ao criar item');
        }});

    const updateMutation = useMutationCache<
        PlanejamentoBacklogItem,
        { id: number } & Record<string, unknown>
    >({
        endpoint: (vars) => API_ENDPOINTS.desenvolvimento.backlog.update(vars.id),
        method: 'PUT',
        invalidateQueries: [queryKeys.desenvolvimento.backlog.lists()],
        onSuccess: () => {
            message.success('Item atualizado com sucesso!');
            setModalOpen(false);
            setEditingItem(null);
            form.resetFields();
            refetch();
        },
        onError: (err: unknown) => {
            const e = err as { response?: { data?: { message?: string } } };
            message.error(e?.response?.data?.message || 'Erro ao atualizar item');
        }});

    const destroyMutation = useMutationCache<void, number>({
        endpoint: (itemId) => API_ENDPOINTS.desenvolvimento.backlog.destroy(itemId),
        method: 'DELETE',
        invalidateQueries: [queryKeys.desenvolvimento.backlog.lists()],
        onSuccess: () => {
            message.success('Item excluído com sucesso!');
            refetch();
        },
        onError: (err: unknown) => {
            const e = err as { response?: { data?: { message?: string } } };
            message.error(e?.response?.data?.message || 'Erro ao excluir item');
        }});

    const openCreate = () => {
        setEditingItem(null);
        form.setFieldsValue({
            titulo: '',
            descricao: undefined,
            tipo: 'feature',
            prioridade: 'media',
            status: 'backlog',
            estimativa: undefined});
        setModalOpen(true);
    };

    const openEdit = (record: PlanejamentoBacklogItem) => {
        setEditingItem(record);
        form.setFieldsValue({
            titulo: record.titulo,
            descricao: record.descricao || undefined,
            tipo: record.tipo || 'feature',
            prioridade: record.prioridade || 'media',
            status: record.status || 'backlog',
            estimativa: record.estimativa});
        setModalOpen(true);
    };

    const handleSubmit = () => {
        form.validateFields().then((values) => {
            const payload: Record<string, unknown> = {
                projeto_id: Number(projetoId),
                titulo: values.titulo,
                descricao: values.descricao || null,
                tipo: values.tipo || null,
                prioridade: values.prioridade || null,
                status: values.status || 'backlog',
                estimativa: values.estimativa ?? null};
            if (editingItem) {
                updateMutation.mutate({ id: editingItem.id, ...payload });
            } else {
                storeMutation.mutate(payload);
            }
        });
    };

    const handleDelete = (item: PlanejamentoBacklogItem) => {
        confirmDialog({
            title: 'Excluir item',
            content: `Deseja realmente excluir "${item.titulo}"?`,
            okText: 'Excluir',
            okType: 'danger',
            cancelText: 'Cancelar',
            onOk: () => destroyMutation.mutate(item.id)});
    };

    const getStatusTag = (status: string) => {
        const config: 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 c = config[status] || { color: 'default', label: status };
        return <Tag color={c.color}>{c.label}</Tag>;
    };

    const getTipoTag = (tipo: string) => {
        const config: 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 c = config[tipo] || { color: 'default', label: tipo };
        return <Tag color={c.color}>{c.label}</Tag>;
    };

    const getPrioridadeTag = (prioridade: string) => {
        const config: 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 c = config[prioridade] || { color: 'default', label: prioridade };
        return <Tag color={c.color}>{c.label}</Tag>;
    };

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

    const itensBacklog = backlogItems.filter((i) => i.status === 'backlog').length;
    const itensPlanejados = backlogItems.filter((i) => i.status === 'planejado').length;
    const itensEmAndamento = backlogItems.filter((i) => i.status === 'em_andamento').length;
    const estimativaTotal = backlogItems
        .filter((i) => i.status !== 'concluido' && i.status !== 'cancelado')
        .reduce((s, i) => s + (i.estimativa || 0), 0);

    const itensAltaPrioridadeAbertos = useMemo(
        () =>
            backlogItems.filter(
                (i) =>
                    (i.prioridade === 'alta' || i.prioridade === 'critica') &&
                    i.status !== 'concluido' &&
                    i.status !== 'cancelado',
            ).length,
        [backlogItems],
    );

    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_OPTIONS.find((o) => o.value === filtroStatus)?.label ?? filtroStatus}`,
            );
        }
        if (filtroTipo) {
            partes.push(`Tipo: ${TIPO_OPTIONS.find((o) => o.value === filtroTipo)?.label ?? filtroTipo}`);
        }
        if (filtroPrioridade) {
            partes.push(
                `Prioridade: ${PRIORIDADE_OPTIONS.find((o) => o.value === filtroPrioridade)?.label ?? filtroPrioridade}`,
            );
        }
        return partes.length ? partes.join(' · ') : 'Nenhum critério extra (lista completa do projeto).';
    }, [filtroStatus, filtroTipo, filtroPrioridade]);

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

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

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

    if (!projetoId) {
        return (
            <ProjetoLayout projetoId="" pageTitle="Backlog" showPageTitleIcon={false} titleSection="Backlog">
                <ContentCard>
                    <Typography.Text type="secondary">Projeto inválido.</Typography.Text>
                </ContentCard>
            </ProjetoLayout>
        );
    }

    return (
        <ProjetoLayout
            projetoId={projetoId}
            pageTitle="Backlog"
            showPageTitleIcon={false}
            titleSection="Backlog"
            headerAction={
                <Space wrap size={8} align="center">
                    <Tooltip
                        title={
                            filtrosAtivosCount > 0
                                ? `Filtros ativos (${filtrosAtivosCount}) — abrir para alterar status, tipo e prioridade`
                                : 'Definir filtros da listagem (status, tipo e prioridade)'
                        }
                    >
                        <span style={{ display: 'inline-block' }}>
                            <Badge dot={filtrosComAlgumAtivo} color="geekblue">
                                <ButtonHeaderIcon
                                    data-testid="planejamento-backlog-abrir-filtros"
                                    icon={<Filter size={ICON_SIZE_MD} aria-hidden />}
                                    title={
                                        filtrosAtivosCount > 0
                                            ? `Filtros (${filtrosAtivosCount})`
                                            : 'Filtros'
                                    }
                                    onClick={abrirModalFiltros}
                                    className={btnHeaderStyles.btnHeaderIcon}
                                    aria-label="Abrir filtros do backlog"
                                    aria-expanded={filtrosModalOpen}
                                    aria-haspopup="dialog"
                                />
                            </Badge>
                        </span>
                    </Tooltip>
                    <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' },
                                    { key: 'status', label: 'Status' },
                                ]}
                                filename="backlog"
                                iconOnly
                                title="Exportar backlog"
                                size="large"
                                exportMenuMode="modal"
                                className={btnHeaderStyles.btnHeaderIcon}
                            />
                        </span>
                    </Tooltip>
                </Space>
            }
        >

            <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="emAndamento"
                />
                <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>

            <OperativeRouteHint
                type={itensAltaPrioridadeAbertos > 0 ? 'warning' : 'info'}
                message="Priorização e prontidão para execução"
                description={
                    itensAltaPrioridadeAbertos > 0
                        ? `${itensAltaPrioridadeAbertos} item(ns) com prioridade alta ou crítica ainda em aberto — refine estimativa, responsável e dependências antes de puxar novo trabalho.`
                        : 'Mantenha itens com valor e risco explícitos; use Filtros no cabeçalho para separar o que já está pronto a entrar em sprint do que ainda precisa de clarificação.'
                }
            />

            <Modal
                title="Filtrar backlog do projeto"
                data-testid="planejamento-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="planejamento-backlog-filtros-modal-limpar-todos"
                    />
                }
                destroyOnHidden
                keyboard
                focusTriggerAfterClose
            >
                <Space direction="vertical" size="middle" style={{ width: '100%' }}>
                    <FormGroup label="Status">
                        <Select
                            placeholder="Todos"
                            allowClear
                            style={{ width: '100%' }}
                            value={draftFiltroStatus || undefined}
                            onChange={(v) => setDraftFiltroStatus(v ?? '')}
                        >
                            {STATUS_OPTIONS.map((o) => (
                                <Select.Option key={o.value} value={o.value}>
                                    {o.label}
                                </Select.Option>
                            ))}
                        </Select>
                    </FormGroup>
                    <Row gutter={16}>
                        <Col xs={24} sm={12}>
                            <FormGroup label="Tipo">
                                <Select
                                    placeholder="Todos"
                                    allowClear
                                    style={{ width: '100%' }}
                                    value={draftFiltroTipo || undefined}
                                    onChange={(v) => setDraftFiltroTipo(v ?? '')}
                                >
                                    {TIPO_OPTIONS.map((o) => (
                                        <Select.Option key={o.value} value={o.value}>
                                            {o.label}
                                        </Select.Option>
                                    ))}
                                </Select>
                            </FormGroup>
                        </Col>
                        <Col xs={24} sm={12}>
                            <FormGroup label="Prioridade">
                                <Select
                                    placeholder="Todas"
                                    allowClear
                                    style={{ width: '100%' }}
                                    value={draftFiltroPrioridade || undefined}
                                    onChange={(v) => setDraftFiltroPrioridade(v ?? '')}
                                >
                                    {PRIORIDADE_OPTIONS.map((o) => (
                                        <Select.Option key={o.value} value={o.value}>
                                            {o.label}
                                        </Select.Option>
                                    ))}
                                </Select>
                            </FormGroup>
                        </Col>
                    </Row>
                </Space>
            </Modal>

            {filtrosComAlgumAtivo ? (
                <Alert
                    type="info"
                    showIcon
                    style={{ marginBottom: 16 }}
                    message={`Filtros aplicados (${filtrosAtivosCount})`}
                    description={resumoFiltrosAplicados}
                />
            ) : null}

            
            <LazyDataTable
                columns={columns}
                data={backlogItems}
                loading={isLoading}
                onRefresh={refetch}
                {...listingTableVirtualScrollProps(backlogItems.length)}
                onRow={(record: PlanejamentoBacklogItem) => ({
                    onClick: () => setOpcoesItem(record),
                    style: { cursor: 'pointer' }})}
            />
            

            <Modal
                title={editingItem ? 'Editar item' : 'Novo item'}
                open={modalOpen}
                onCancel={() => {
                    setModalOpen(false);
                    setEditingItem(null);
                    form.resetFields();
                }}
                footer={
                    <div className={waygestFormModalFooterClassName}>
                        <Button
                            onClick={() => {
                                setModalOpen(false);
                                setEditingItem(null);
                                form.resetFields();
                            }}
                        >
                            Cancelar
                        </Button>
                        <Button
                            type="primary"
                            loading={storeMutation.isPending || updateMutation.isPending}
                            onClick={() => form.submit()}
                        >
                            {editingItem ? 'Salvar' : 'Criar'}
                        </Button>
                    </div>
                }
                width={formModalLayout.width ?? 560}
                centered={formModalLayout.centered ?? true}
                className={formModalLayout.className}

                styles={formModalLayout.styles ?? {}}
                destroyOnHidden
                keyboard
                focusTriggerAfterClose
                data-testid="projeto-planejamento-backlog-form-modal"
            >
                <Form form={form} layout="vertical" onFinish={handleSubmit}>
                    <FormGroup>
                        <Form.Item
                            name="titulo"
                            label="Título"
                            rules={[{ required: true, message: 'Informe o título' }]}
                        >
                            <Input placeholder="Título do item" />
                        </Form.Item>
                    </FormGroup>
                    <FormGroup>
                        <Form.Item name="descricao" label="Descrição">
                            <Input.TextArea rows={3} placeholder="Descrição" />
                        </Form.Item>
                    </FormGroup>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item name="tipo" label="Tipo">
                                <Select placeholder="Tipo" options={[...TIPO_OPTIONS]} />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item name="prioridade" label="Prioridade">
                                <Select placeholder="Prioridade" options={[...PRIORIDADE_OPTIONS]} />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item name="status" label="Status">
                                <Select placeholder="Status" options={[...STATUS_OPTIONS]} />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item name="estimativa" label="Estimativa (horas)">
                                <InputNumber min={0} placeholder="Horas" style={{ width: '100%' }} />
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Modal>

            <ModalOpcoesBacklog
                open={opcoesItem !== null}
                onClose={() => setOpcoesItem(null)}
                item={opcoesItem}
                onVerDetalhes={(item) => {
                    setOpcoesItem(null);
                    const full = backlogItems.find((c) => c.id === item.id);
                    if (full) {
                        setSelectedItem(full);
                        setDrawerVisible(true);
                    }
                }}
                onEditar={(item) => {
                    setOpcoesItem(null);
                    const full = backlogItems.find((c) => c.id === item.id);
                    if (full) openEdit(full);
                }}
                onExcluir={(item) => {
                    setOpcoesItem(null);
                    const full = backlogItems.find((c) => c.id === item.id);
                    if (full) handleDelete(full);
                }}
            />

            <Drawer
                title={selectedItem?.titulo}
                placement="right"
                onClose={() => {
                    setDrawerVisible(false);
                    setSelectedItem(null);
                }}
                open={drawerVisible}
                width={560}
            >
                {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 != null ? `${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.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 style={{ marginTop: 16 }}>
                            <Button type="primary" onClick={() => openEdit(selectedItem)}>
                                <Pencil size={ICON_SIZE_MD} style={{ marginRight: 8 }} aria-hidden />
                                Editar
                            </Button>
                        </div>
                    </div>
                )}
            </Drawer>

            {!permLoading && canCreate ? (
                <ListPageCreateFloatButton
                    data-testid="projeto-planejamento-backlog-fab-novo"
                    tooltip={{ title: 'Novo item no backlog — refine a listagem com Filtros no cabeçalho' }}
                    onClick={openCreate}
                />
            ) : null}
        </ProjetoLayout>
    );
}