useReportesStore

<script setup>
import { useReportesStore } from '@/stores/reportes.store'
import { useAuthStore } from '@/stores/auth.store'
import { onMounted, computed } from 'vue'

const reportesStore = useReportesStore()
const authStore = useAuthStore()

const misReportes = computed(() => reportesStore.reportes)

onMounted(async () => {
  // Fetch current user's reports
  await reportesStore.fetchReportes({
    usuario_id: authStore.user?.id
  })
})
</script>

<template>
  <div>
    <h2>Mis Reportes ({{ misReportes.length }})</h2>
    <div v-for="reporte in misReportes" :key="reporte.id">
      <h3>{{ reporte.titulo }}</h3>
      <span>Estado: {{ reporte.estado }}</span>
    </div>
  </div>
</template>

<script setup>
import { useReportesStore } from '@/stores/reportes.store'

const reportesStore = useReportesStore()

async function marcarEnProceso(reporteId: string) {
  const result = await reportesStore.actualizarReporte(reporteId, {
    estado: 'en_proceso',
    prioridad: 'alta',
    respuesta_admin: 'Hemos recibido tu reporte y estamos trabajando en ello'
  })
  
  if (result.success) {
    console.log('Estado actualizado')
  }
}

async function resolverReporte(reporteId: string) {
  const result = await reportesStore.actualizarReporte(reporteId, {
    estado: 'resuelto',
    respuesta_admin: 'El problema ha sido resuelto exitosamente'
  })
}
</script>

<script setup>
import { useReportesStore } from '@/stores/reportes.store'
import { onMounted, onUnmounted } from 'vue'

const reportesStore = useReportesStore()
let subscription: any = null

onMounted(async () => {
  // Fetch initial data
  await reportesStore.fetchReportes()
  
  // Subscribe to real-time updates
  subscription = reportesStore.subscribeToReportes()
  
  console.log('Suscrito a cambios en reportes')
})

onUnmounted(() => {
  // Clean up subscription
  if (subscription) {
    subscription.unsubscribe()
    console.log('Desuscrito de reportes')
  }
})
</script>

<script setup>
import { useReportesStore } from '@/stores/reportes.store'
import { ref } from 'vue'

const reportesStore = useReportesStore()
const estadoFiltro = ref<'pendiente' | 'en_proceso' | 'resuelto'>('pendiente')

async function cargarReportes() {
  await reportesStore.fetchReportes({
    estado: estadoFiltro.value
  })
}

async function cambiarFiltro(nuevoEstado: typeof estadoFiltro.value) {
  estadoFiltro.value = nuevoEstado
  await cargarReportes()
}
</script>

<template>
  <div>
    <button @click="cambiarFiltro('pendiente')">Pendientes</button>
    <button @click="cambiarFiltro('en_proceso')">En Proceso</button>
    <button @click="cambiarFiltro('resuelto')">Resueltos</button>
    
    <div v-for="reporte in reportesStore.reportes" :key="reporte.id">
      {{ reporte.titulo }}
    </div>
  </div>
</template>