import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { apiFetch } from '../lib/api'

export interface Device {
  id: string
  deviceLabel: string | null
  userAgent: string | null
  createdAt: string
  lastSeenAt: string
  disabledAt: string | null
}

export interface DeliveryAttempt {
  status: string
  httpStatus: number | null
  errorMessage: string | null
  attemptedAt: string
}

export interface DiagnosticsDevice extends Device {
  lastDeliveryAttempt: DeliveryAttempt | null
}

export function useDevices() {
  return useQuery({
    queryKey: ['devices'],
    queryFn: () => apiFetch<{ devices: Device[] }>('/api/v1/devices').then((r) => r.devices),
  })
}

export function usePushDiagnostics() {
  return useQuery({
    queryKey: ['push-diagnostics'],
    queryFn: () =>
      apiFetch<{ vapidConfigured: boolean; devices: DiagnosticsDevice[] }>(
        '/api/v1/push/diagnostics',
      ),
  })
}

export function useDeleteDevice() {
  const queryClient = useQueryClient()
  return useMutation({
    mutationFn: (id: string) => apiFetch(`/api/v1/devices/${id}`, { method: 'DELETE' }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['devices'] })
      queryClient.invalidateQueries({ queryKey: ['push-diagnostics'] })
    },
  })
}