import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
import type { Ref } from 'vue'
import { apiClient } from '@/lib/axios'
import type {
  RegistrationFormField,
  RegistrationFormFieldCreateDTO,
  RegistrationFormFieldUpdateDTO,
} from '@/types/registration-form-field'

interface ApiResponse<T> {
  success: boolean
  data: T
  message?: string
}

export function useRegistrationFormFields(eventId: Ref<string>) {
  return useQuery({
    queryKey: ['registration-form-fields', eventId],
    queryFn: async () => {
      const { data } = await apiClient.get<{ data: RegistrationFormField[] }>(
        `/events/${eventId.value}/registration-fields`,
      )

      return data.data
    },
    enabled: () => !!eventId.value,
    staleTime: Infinity,
  })
}

export function useCreateRegistrationFormField(eventId: Ref<string>) {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: async (payload: RegistrationFormFieldCreateDTO) => {
      const { data } = await apiClient.post<ApiResponse<RegistrationFormField>>(
        `/events/${eventId.value}/registration-fields`,
        payload,
      )

      return data.data
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['registration-form-fields', eventId] })
    },
  })
}

export function useUpdateRegistrationFormField(eventId: Ref<string>) {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: async ({ id, ...payload }: RegistrationFormFieldUpdateDTO & { id: string }) => {
      const { data } = await apiClient.put<ApiResponse<RegistrationFormField>>(
        `/events/${eventId.value}/registration-fields/${id}`,
        payload,
      )

      return data.data
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['registration-form-fields', eventId] })
    },
  })
}

export function useDeleteRegistrationFormField(eventId: Ref<string>) {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: async (id: string) => {
      await apiClient.delete(`/events/${eventId.value}/registration-fields/${id}`)
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['registration-form-fields', eventId] })
    },
  })
}

export function useReorderRegistrationFormFields(eventId: Ref<string>) {
  const queryClient = useQueryClient()
  let previousFields: RegistrationFormField[] | undefined

  return useMutation({
    mutationFn: async (orderedIds: string[]) => {
      await apiClient.post(`/events/${eventId.value}/registration-fields/reorder`, {
        ids: orderedIds,
      })
    },
    onMutate: async (orderedIds) => {
      await queryClient.cancelQueries({ queryKey: ['registration-form-fields', eventId.value] })
      previousFields = queryClient.getQueryData<RegistrationFormField[]>(['registration-form-fields', eventId.value])

      if (previousFields) {
        const byId = new Map(previousFields.map(f => [f.id, f]))
        const reordered = orderedIds
          .map(id => byId.get(id))
          .filter((f): f is RegistrationFormField => !!f)
        queryClient.setQueryData(['registration-form-fields', eventId.value], reordered)
      }
    },
    onError: () => {
      if (previousFields) {
        queryClient.setQueryData(['registration-form-fields', eventId.value], previousFields)
      }
    },
  })
}

export function useCreateFieldFromTemplate(eventId: Ref<string>) {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: async (templateId: string) => {
      const { data } = await apiClient.post<ApiResponse<RegistrationFormField>>(
        `/events/${eventId.value}/registration-fields/from-template`,
        { template_id: templateId },
      )

      return data.data
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['registration-form-fields', eventId] })
    },
  })
}

export function useImportFieldsFromEvent(eventId: Ref<string>) {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: async (sourceEventId: string) => {
      const { data } = await apiClient.post<ApiResponse<RegistrationFormField[]>>(
        `/events/${eventId.value}/registration-fields/import-from-event`,
        { source_event_id: sourceEventId },
      )

      return data.data
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['registration-form-fields', eventId] })
    },
  })
}