sa4cps-frontend/src/components/cards/AirQualityCard.vue

<template>
  <div class="bg-white rounded-2xl shadow-sm p-4">
    <h6 class="text-sm font-bold text-gray-500 mb-4">Air Quality Status</h6>

    <!-- Overall Status -->
    <div class="mb-4 p-3 rounded-lg" :class="getOverallStatusBg()">
      <div class="flex items-center justify-between">
        <div>
          <div class="font-medium" :class="getOverallStatusText()">
            {{ getOverallStatus() }}
          </div>
          <div class="text-sm" :class="getOverallStatusText()">
            Building Average: {{ overallCO2.toFixed(0) }} ppm
          </div>
        </div>
        <div
          class="w-12 h-12 rounded-full flex items-center justify-center"
          :class="getOverallStatusIconBg()"
        >
          <svg
            class="w-6 h-6"
            :class="getOverallStatusText()"
            fill="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              d="M12,2C6.5,2 2,6.5 2,12C2,17.5 6.5,22 12,22C17.5,22 22,17.5 22,12C22,6.5 17.5,2 12,2M10,16.5L6,12.5L7.5,11L10,13.5L16.5,7L18,8.5L10,16.5Z"
              v-if="overallStatus === 'good'"
            />
            <path
              d="M12,2C6.5,2 2,6.5 2,12C2,17.5 6.5,22 12,22C17.5,22 22,17.5 22,12C22,6.5 17.5,2 12,2M12,7L17,12L12,17L7,12L12,7Z"
              v-else-if="overallStatus === 'moderate'"
            />
            <path
              d="M12,2C6.5,2 2,6.5 2,12C2,17.5 6.5,22 12,22C17.5,22 22,17.5 22,12C22,6.5 17.5,2 12,2M12,7L17,12L12,17L7,12L12,7Z"
              v-else
            />
          </svg>
        </div>
      </div>
    </div>

    <!-- Room Status List -->
    <div class="space-y-2 mb-4">
      <div v-if="roomsList.length === 0" class="text-center text-gray-500 py-4">
        No air quality data available
      </div>

      <div
        v-for="room in roomsList"
        :key="room.room"
        class="flex items-center justify-between p-2 rounded"
      >
        <div class="flex items-center gap-2">
          <div
            class="w-3 h-3 rounded-full"
            :class="getCO2StatusColor(room.co2?.status || 'good')"
          ></div>
          <span class="text-sm font-medium text-gray-900">{{ room.room }}</span>
        </div>
        <div class="text-right">
          <div class="text-sm text-gray-900">{{ Math.round(room.co2?.current || 0) }} ppm</div>
          <div class="text-xs" :class="getCO2TextColor(room.co2?.status || 'good')">
            {{ (room.co2?.status || 'good').toUpperCase() }}
          </div>
        </div>
      </div>
    </div>

    <!-- Quick Stats -->
    <div class="grid grid-cols-2 gap-3 pt-3 border-t border-gray-100">
      <div class="text-center">
        <div class="text-lg font-bold text-gray-900">{{ roomsWithGoodAir }}</div>
        <div class="text-xs text-green-600">Good Air Quality</div>
      </div>
      <div class="text-center">
        <div class="text-lg font-bold text-gray-900">{{ roomsNeedingAttention }}</div>
        <div class="text-xs text-orange-600">Need Attention</div>
      </div>
    </div>

    <!-- Recommendations -->
    <div v-if="recommendations.length > 0" class="mt-4 p-2 bg-blue-50 rounded text-sm">
      <div class="font-medium text-blue-900 mb-1">Recommendations:</div>
      <ul class="text-blue-700 text-xs space-y-1">
        <li v-for="rec in recommendations" :key="rec">• {{ rec }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoomStore } from '@/stores/room'

const roomStore = useRoomStore()

const roomsList = computed(() => {
  return Array.from(roomStore.roomsData.values())
    .filter((room) => room.co2) // Only include rooms with CO2 data
    .sort(
      (a, b) => (b.co2?.current || 0) - (a.co2?.current || 0), // Sort by CO2 level descending
    )
})

const overallCO2 = computed(() => {
  if (roomsList.value.length === 0) return 0
  const total = roomsList.value.reduce((sum, room) => sum + (room.co2?.current || 0), 0)
  return total / roomsList.value.length
})

const overallStatus = computed(() => {
  return roomStore.getCO2Status(overallCO2.value)
})

const roomsWithGoodAir = computed(() => {
  return roomsList.value.filter((room) => room.co2?.status === 'good').length
})

const roomsNeedingAttention = computed(() => {
  return roomsList.value.filter(
    (room) => room.co2?.status && ['poor', 'critical'].includes(room.co2.status),
  ).length
})

const recommendations = computed(() => {
  const recs = []
  const criticalRooms = roomsList.value.filter((room) => room.co2?.status === 'critical')
  const poorRooms = roomsList.value.filter((room) => room.co2?.status === 'poor')

  if (criticalRooms.length > 0) {
    recs.push(`Immediate ventilation needed in ${criticalRooms[0].room}`)
  }
  if (poorRooms.length > 0) {
    recs.push(
      `Increase air circulation in ${poorRooms.length} room${poorRooms.length > 1 ? 's' : ''}`,
    )
  }
  if (overallCO2.value > 800) {
    recs.push('Consider adjusting HVAC settings building-wide')
  }

  return recs.slice(0, 3) // Max 3 recommendations
})

const getOverallStatus = () => {
  switch (overallStatus.value) {
    case 'good':
      return 'Excellent Air Quality'
    case 'moderate':
      return 'Moderate Air Quality'
    case 'poor':
      return 'Poor Air Quality'
    case 'critical':
      return 'Critical - Action Required'
    default:
      return 'Unknown Status'
  }
}

const getOverallStatusBg = () => {
  switch (overallStatus.value) {
    case 'good':
      return 'bg-green-50 border border-green-200'
    case 'moderate':
      return 'bg-yellow-50 border border-yellow-200'
    case 'poor':
      return 'bg-orange-50 border border-orange-200'
    case 'critical':
      return 'bg-red-50 border border-red-200'
    default:
      return 'bg-gray-50 border border-gray-200'
  }
}

const getOverallStatusText = () => {
  switch (overallStatus.value) {
    case 'good':
      return 'text-green-700'
    case 'moderate':
      return 'text-yellow-700'
    case 'poor':
      return 'text-orange-700'
    case 'critical':
      return 'text-red-700'
    default:
      return 'text-gray-700'
  }
}

const getOverallStatusIconBg = () => {
  switch (overallStatus.value) {
    case 'good':
      return 'bg-green-100'
    case 'moderate':
      return 'bg-yellow-100'
    case 'poor':
      return 'bg-orange-100'
    case 'critical':
      return 'bg-red-100'
    default:
      return 'bg-gray-100'
  }
}

const getCO2StatusColor = (status: string) => {
  switch (status) {
    case 'good':
      return 'bg-green-500'
    case 'moderate':
      return 'bg-yellow-500'
    case 'poor':
      return 'bg-orange-500'
    case 'critical':
      return 'bg-red-500'
    default:
      return 'bg-gray-500'
  }
}

const getCO2TextColor = (status: string) => {
  switch (status) {
    case 'good':
      return 'text-green-600'
    case 'moderate':
      return 'text-yellow-600'
    case 'poor':
      return 'text-orange-600'
    case 'critical':
      return 'text-red-600'
    default:
      return 'text-gray-600'
  }
}
</script>