import { useQuery } from '@tanstack/react-query';
import { api } from '../client';

interface DiagramLayout {
  width?: number;
  height?: number;
  nodes?: Array<{ id?: string; label?: string; type?: string; x?: number; y?: number; width?: number; height?: number }>;
  edges?: Array<{ from?: string; to?: string }>;
}

export function useDiagramLayout(contentHash: string | null) {
  return useQuery({
    queryKey: ['diagrams', 'layout', contentHash],
    queryFn: async () => {
      const { data, error } = await api.GET('/diagrams/{contentHash}/render', {
        params: { path: { contentHash: contentHash! } },
        headers: { Accept: 'application/json' },
      });
      if (error) throw new Error('Failed to load diagram layout');
      return data as DiagramLayout;
    },
    enabled: !!contentHash,
  });
}

export function useDiagramByRoute(application: string | undefined, routeId: string | undefined) {
  return useQuery({
    queryKey: ['diagrams', 'byRoute', application, routeId],
    queryFn: async () => {
      const { data, error } = await api.GET('/diagrams', {
        params: { query: { application: application!, routeId: routeId! } },
      });
      if (error) throw new Error('Failed to load diagram for route');
      return data!;
    },
    enabled: !!application && !!routeId,
  });
}