import { Card, CardContent } from "@/components/ui/card"
import { AlertTriangle, User } from "lucide-react"
import { useBedPressureStore } from "@/stores/bedPressureStore"

const getValueColor = (value: number) => {
  if (value < 1500) return "#22c55e" // Green - Low value
  if (value < 2500) return "#eab308" // Yellow - Medium value
  if (value < 3500) return "#f97316" // Orange - High value
  return "#ef4444" // Red - Very high value
}

export function StatsCards() {
  const { sensorData, averageValue, criticalSensors } = useBedPressureStore()

  const avgValue = averageValue()
  const criticalCount = criticalSensors()
  const activeSensors = Object.keys(sensorData).length

  return (
    <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
      <Card>
        <CardContent className="p-4">
          <div className="flex items-center gap-2">
            <User className="w-5 h-5 text-blue-600" />
            <div>
              <p className="text-sm text-gray-600">Patient</p>
              <p className="font-semibold">John Doe - Room 204</p>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-4">
          <div className="text-center">
            <p className="text-sm text-gray-600">Average Value</p>
            <p className="text-2xl font-bold" style={{ color: getValueColor(avgValue) }}>
              {avgValue.toFixed(0)}
            </p>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-4">
          <div className="text-center">
            <p className="text-sm text-gray-600">Active Sensors</p>
            <p className="text-2xl font-bold text-green-600">{activeSensors}</p>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-4">
          <div className="flex items-center gap-2">
            <AlertTriangle className={`w-5 h-5 ${criticalCount > 0 ? "text-red-600" : "text-gray-400"}`} />
            <div>
              <p className="text-sm text-gray-600">Critical Alerts</p>
              <p className={`text-2xl font-bold ${criticalCount > 0 ? "text-red-600" : "text-gray-600"}`}>
                {criticalCount}
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}