frontend/app/composables/useReports.ts

import type {
  CreateReportRequest,
  CreateReportResponse, FeedbackRequest, FlagRequest, FlagResponse,
  MediaUploadResponse,
  MessageListResponse, MessageRequest, OkResponse,
  ReportDetailResponse,
  ReportListResponse
} from "~/types/api";

export const useReports = () => {
  const getReports = (query?: { area_id?: number; category_id?: number; status?: string }) =>
      useApiFetch<ReportListResponse>('/api/v1/reports', { method: 'GET', query })

  const createReport = (body: CreateReportRequest) =>
      useApiFetch<CreateReportResponse>('/api/v1/reports', { method: 'POST', body })

  const getReportDetail = (id: number) =>
      useApiFetch<ReportDetailResponse>(`/api/v1/reports/${id}`, { method: 'GET' })
  
  const uploadMedia = (id: number, formData: FormData) =>
      useApiFetch<MediaUploadResponse>(`/api/v1/reports/${id}/media`, { method: 'POST', body: formData })

  const getMessages = (id: number) =>
      useApiFetch<MessageListResponse>(`/api/v1/reports/${id}/messages`, { method: 'GET' })

  const addMessage = (id: number, body: MessageRequest) =>
      useApiFetch<OkResponse>(`/api/v1/reports/${id}/messages`, { method: 'POST', body })

  const addFeedback = (id: number, body: FeedbackRequest) =>
      useApiFetch<OkResponse>(`/api/v1/reports/${id}/feedback`, { method: 'POST', body })

  const flagReport = (id: number, body: FlagRequest) =>
      useApiFetch<FlagResponse>(`/api/v1/reports/${id}/flags`, { method: 'POST', body })

  const flagMessage = (reportId: number, messageId: number, body: FlagRequest) =>
      useApiFetch<FlagResponse>(`/api/v1/reports/${reportId}/messages/${messageId}/flags`, { method: 'POST', body })

  return {
    getReports,
    createReport,
    getReportDetail,
    uploadMedia,
    getMessages,
    addMessage,
    addFeedback,
    flagReport,
    flagMessage,
  }
}