'use client';

/**
 * Épicos cross-programa no contexto do produto.
 *
 * @route /projetos/[id]/produto/epicos
 */

import React from 'react';
import { useParams } from 'next/navigation';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import { useQueryCache } from '@/hooks/useQueryCache';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { queryKeys } from '@/lib/cache/queryKeys';
import {
    normalizarProjetoResponse,
    type ProjetoShowApiResponse,
} from '@/features/projetos/utils/normalizeProjetoShowResponse';
import { ProjetoEpicosCrossPanel } from '@/features/projetos/projeto-epicos-cross/ProjetoEpicosCrossPanel';

export function ProjetoProdutoEpicosScreen() {
    const params = useParams();
    const projetoId = params?.id as string;

    const { data: projetoRaw } = useQueryCache<ProjetoShowApiResponse>({
        queryKey: queryKeys.projetos.detail(projetoId),
        endpoint: API_ENDPOINTS.projetos.show(projetoId),
        enabled: Boolean(projetoId),
    });

    const projeto = normalizarProjetoResponse(projetoRaw);

    return (
        <ProjetoLayout projetoId={projetoId} pageTitle="Épicos cross-programa" titleSection="Épicos">
            <ProjetoEpicosCrossPanel programaId={projetoId} programaNome={projeto?.nome} />
        </ProjetoLayout>
    );
}