'use client';

import React from 'react';
import { useRouter } from 'next/navigation';
import { Button, Space } from 'antd';
import { message } from '@/lib/feedback/message';
import dynamic from 'next/dynamic';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import { useMutationCache } from '@/hooks/useMutationCache';
import { useQueryCache } from '@/hooks/useQueryCache';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { queryKeys } from '@/lib/cache/queryKeys';
import { getLaravelApiErrorMessage } from '@/lib/api/laravelApiErrorMessage';
import { projetosProjetoCanonical } from '@/lib/routes/projetosProjetoCanonical';
import { useProjetoWriteGates } from '@/features/projetos/hooks/useProjetoWriteGates';
import type { CasoUsoGrafo } from './types';

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

export function ProjetoCasosUsoDiagramaScreen({ projetoId }: { projetoId: string }) {
    const router = useRouter();
    const { canEditar } = useProjetoWriteGates();

    const { data: grafo, refetch } = useQueryCache<CasoUsoGrafo>({
        queryKey: queryKeys.projetos.casosUsoDiagrama(projetoId, 'uml_casos_uso'),
        endpoint: API_ENDPOINTS.projetos.casosUso.diagrama(projetoId),
        params: { tipo: 'uml_casos_uso' },
        unwrapApiEnvelope: true,
    });

    const { mutateAsync: salvar } = useMutationCache({
        endpoint: API_ENDPOINTS.projetos.casosUso.diagrama(projetoId),
        method: 'PUT',
        invalidateQueries: [queryKeys.projetos.casosUsoDiagrama(projetoId, 'uml_casos_uso')],
    });

    return (
        <ProjetoLayout projetoId={projetoId} pageTitle="Diagrama de casos de uso" titleSection="Planejamento">
            <Space style={{ marginBottom: 16 }}>
                <Button onClick={() => router.push(projetosProjetoCanonical.planejamentoCasosDeUso(projetoId))}>
                    Voltar à listagem
                </Button>
            </Space>
            <CasoUsoFlowCanvas
                grafo={grafo ?? { nodes: [], edges: [] }}
                variant="uml"
                readOnly={!canEditar}
                onSave={async (g) => {
                    try {
                        await salvar({ tipo: 'uml_casos_uso', grafo: g });
                        message.success('Diagrama salvo.');
                        void refetch();
                    } catch (e) {
                        message.error(getLaravelApiErrorMessage(e));
                    }
                }}
            />
        </ProjetoLayout>
    );
}