iotDashboard/frontend/src/components/widgets/AirQualityWidget.tsx

import { useQuery } from '@tanstack/react-query'
import type { WidgetConfig } from '../../hooks'
import { weatherApi } from '../../api'
import './widget-styles.css'

interface AirQualityWidgetProps {
  config: WidgetConfig
}

export default function AirQualityWidget({ config }: AirQualityWidgetProps) {
  // Get city from config or use default (Pulse.eco city)
  const city = (config.visualization as Record<string, unknown>)?.city as string || 'skopje'

  const { data: airQuality, isLoading, error } = useQuery({
    queryKey: ['air-quality', city],
    queryFn: async () => {
      const response = await weatherApi.getAirQuality(city)
      return response.data
    },
    refetchInterval: 300000, // Refresh every 5 minutes
    staleTime: 240000, // Consider fresh for 4 minutes
  })

  if (isLoading) {
    return (
      <div className="widget-card card bg-base-100 h-full">
        <div className="card-body flex items-center justify-center">
          <span className="loading loading-spinner loading-lg"></span>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="widget-card card bg-base-100 h-full">
        <div className="card-body">
          <h2 className="card-title text-sm truncate">{config.title}</h2>
          <div className="flex flex-col items-center justify-center flex-1">
            <p className="text-error text-sm text-center">
              Failed to load air quality data for {city}
            </p>
            <p className="text-xs text-base-content/60 mt-2">
              Try: skopje, bitola, tetovo
            </p>
          </div>
        </div>
      </div>
    )
  }

  if (!airQuality) return null

  // Get AQI color based on status
  const getStatusColor = (status: string) => {
    switch (status.toLowerCase()) {
      case 'good':
        return 'success'
      case 'moderate':
        return 'warning'
      case 'unhealthy for sensitive groups':
      case 'unhealthy':
        return 'error'
      case 'very unhealthy':
      case 'hazardous':
        return 'error'
      default:
        return 'base-content/40'
    }
  }

  const statusColor = getStatusColor(airQuality.status)
  const pm10 = airQuality.measurements.pm10
  const pm25 = airQuality.measurements.pm25

  return (
    <div className="widget-card card bg-base-100 h-full">
      <div className="card-body">
        <h2 className="card-title text-sm truncate">{config.title}</h2>
        <div className="flex flex-col items-center justify-center flex-1">
          {/* Air quality icon */}
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className={`h-12 w-12 text-${statusColor} mb-1`}
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
            />
          </svg>

          {/* PM Values */}
          <div className="grid grid-cols-2 gap-2 w-full mb-2">
            {pm10 && (
              <div className="text-center">
                <div className="text-xl font-bold">{pm10.average.toFixed(1)}</div>
                <div className="text-xs text-base-content/60">PM10 μg/m³</div>
              </div>
            )}
            {pm25 && (
              <div className="text-center">
                <div className="text-xl font-bold">{pm25.average.toFixed(1)}</div>
                <div className="text-xs text-base-content/60">PM2.5 μg/m³</div>
              </div>
            )}
          </div>

          {/* AQI Status badge */}
          <div className={`badge badge-${statusColor} truncate max-w-full`}>
            {airQuality.status}
          </div>

          {/* Additional pollutants */}
          <div className="grid grid-cols-2 gap-2 mt-2 w-full text-xs">
            {Object.entries(airQuality.measurements).map(([pollutant, data]) => {
              if (pollutant === 'pm10' || pollutant === 'pm25') return null
              return (
                <div key={pollutant} className="flex justify-between">
                  <span className="opacity-60">{pollutant.toUpperCase()}:</span>
                  <span className="font-semibold">{data.average.toFixed(1)}</span>
                </div>
              )
            })}
          </div>

          {/* City and sensor count */}
          <div className="text-xs text-base-content/40 mt-2 px-2 w-full overflow-hidden">
            <div className="truncate text-center">
              {airQuality.city.charAt(0).toUpperCase() + airQuality.city.slice(1)} • {airQuality.sensor_count} sensors
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}