'use client';

/**
 * Drawer de pré-visualização rápida do módulo (atalho opcional).
 * Preferir a página de gestão completa: `/estrutura/modulos/[moduloId]`.
 */
import React from 'react';
import Link from 'next/link';
import { Button, Drawer, Space } from 'antd';
import { ExternalLink } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import { useIsMobile } from '@/hooks/useIsMobile';
import { useQueryCache } from '@/hooks/useQueryCache';
import { queryKeys } from '@/lib/cache/queryKeys';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { projetosProjetoCanonical } from '@/lib/routes/projetosProjetoCanonical';
import { ModuloGestaoTabs } from './ModuloGestaoTabs';
import type { ProjetoModulo } from './types';

export interface ModuloDetalheDrawerProps {
    open: boolean;
    onClose: () => void;
    projetoId: string;
    /** Dados da listagem (abertura imediata). */
    modulo: ProjetoModulo | null;
    canEditar: boolean;
    /** Mapa id→nome para resolver dependências. */
    moduloNomeById: Map<number, string>;
}

export function ModuloDetalheDrawer({
    open,
    onClose,
    projetoId,
    modulo,
    canEditar,
    moduloNomeById,
}: ModuloDetalheDrawerProps) {
    const isMobile = useIsMobile();
    const moduloId = modulo?.id;

    const { data: showData, isLoading: showLoading } = useQueryCache<ProjetoModulo>({
        queryKey: moduloId ? queryKeys.projetos.modulo(projetoId, moduloId) : ['projetos', 'modulo', 'idle'],
        endpoint: moduloId
            ? API_ENDPOINTS.projetos.modulos.show(projetoId, moduloId)
            : '',
        enabled: open && !!moduloId && !!projetoId,
        staleTime: 30 * 1000,
    });

    const detalhe = showData ?? modulo;

    if (!modulo || !moduloId) return null;

    const gestaoHref = projetosProjetoCanonical.estruturaModulo(projetoId, moduloId);

    return (
        <Drawer
            open={open}
            onClose={onClose}
            width={isMobile ? '100%' : 560}
            destroyOnHidden
            title={detalhe?.nome ?? modulo.nome}
            data-testid="estrutura-modulos-detalhe-drawer"
            extra={
                <Space wrap>
                    <Link href={gestaoHref}>
                        <Button
                            type="primary"
                            size="small"
                            icon={<ExternalLink size={ICON_SIZE_MD} aria-hidden />}
                        >
                            Abrir gestão
                        </Button>
                    </Link>
                </Space>
            }
        >
            <ModuloGestaoTabs
                projetoId={projetoId}
                moduloId={moduloId}
                detalhe={detalhe}
                showLoading={showLoading}
                canEditar={canEditar}
                moduloNomeById={moduloNomeById}
                compact
            />
        </Drawer>
    );
}