'use client';

/**
 * Logs do projeto — mesmo módulo de `/suporte/logs` ({@see SuporteLogsScreen}),
 * apenas com `projeto_id` fixo. Sem UI paralela de métricas/CTA.
 * @route /projetos/[id]/observabilidade/logs
 */
import React, { useState, type ReactNode } from 'react';
import Link from 'next/link';
import { Alert, Spin } from 'antd';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import { useQueryCache } from '@/hooks/useQueryCache';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { SuporteLogsScreen } from '@/features/suporte/logs/SuporteLogsScreen';
import type { ConfigGeralSuporte } from '@/features/suporte/logs/types';
import { queryKeys } from '@/lib/cache/queryKeys';

export interface ProjetoObservabilidadeLogsScreenProps {
    projetoId: string;
}

export function ProjetoObservabilidadeLogsScreen({ projetoId }: ProjetoObservabilidadeLogsScreenProps) {
    const pid = projetoId ? String(projetoId) : '';
    const endpointGerais = API_ENDPOINTS.customerSuccess?.configuracoesGeraisSuporte?.show;
    const [headerAction, setHeaderAction] = useState<ReactNode>(null);

    const { data: configGerais, isLoading: loadingConfig } = useQueryCache<ConfigGeralSuporte>({
        queryKey: queryKeys.suporte.configuracoesGerais(),
        endpoint: endpointGerais ?? '',
        staleTime: 5 * 60 * 1000,
        enabled: !!endpointGerais && !!pid,
    });

    if (!pid) return null;

    if (endpointGerais && loadingConfig) {
        return (
            <ProjetoLayout projetoId={pid} pageTitle="Logs" titleSection="Observabilidade — logs">
                <div style={{ textAlign: 'center', padding: 48 }}>
                    <Spin size="large" />
                </div>
            </ProjetoLayout>
        );
    }

    if (configGerais?.habilitar_pagina_logs === false) {
        return (
            <ProjetoLayout projetoId={pid} pageTitle="Logs" titleSection="Observabilidade — logs">
                <Alert
                    type="warning"
                    showIcon
                    message="Lista de logs desativada pela organização"
                    description={
                        <>
                            Ative a página de logs em{' '}
                            <Link href="/suporte/configuracoes/configuracoes-gerais">
                                Configurações gerais do suporte
                            </Link>{' '}
                            ou consulte a{' '}
                            <Link href="/suporte/logs">vista global em Suporte</Link> se tiver permissão.
                        </>
                    }
                />
            </ProjetoLayout>
        );
    }

    return (
        <ProjetoLayout
            projetoId={pid}
            pageTitle="Logs do projeto"
            titleSection="Observabilidade — logs"
            headerAction={headerAction}
        >
            <SuporteLogsScreen
                projetoIdFixo={pid}
                embeddedInProjeto
                onHeaderActionsChange={setHeaderAction}
            />
        </ProjetoLayout>
    );
}