import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
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 BedVisualization() {
  const { sensorConfig, sensorData, setSelectedSensor, setIsModalOpen } = useBedPressureStore()

  const handleSensorClick = (sensorId: string) => {
    setSelectedSensor(sensorId)
    setIsModalOpen(true)
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Sensor Value Distribution Map</CardTitle>
        <p className="text-sm text-gray-600">Click on any sensor point to view detailed value graphs</p>
      </CardHeader>
      <CardContent>
        <div className="relative">
          {/* Bed outline */}
          <svg viewBox="0 0 100 100" className="w-full h-96 border-2 border-gray-200 rounded-lg bg-white">
            {/* Bed frame */}
            <rect x="25" y="10" width="50" height="80" fill="none" stroke="#e5e7eb" strokeWidth="2" rx="8" />

            {/* Pillow area */}
            <rect x="30" y="12" width="40" height="15" fill="#f3f4f6" stroke="#d1d5db" strokeWidth="1" rx="4" />

            {/* Pressure sensors */}
            {sensorConfig.map((sensor) => {
              const sensorInfo = sensorData[sensor.id]
              if (!sensorInfo) return null

              return (
                <circle
                  key={sensor.id}
                  cx={sensor.x}
                  cy={sensor.y}
                  r="3"
                  fill={getValueColor(sensorInfo.currentValue)}
                  stroke="white"
                  strokeWidth="1"
                  className="cursor-pointer transition-all duration-200 hover:r-4 hover:opacity-80"
                  onClick={() => handleSensorClick(sensor.id)}
                />
              )
            })}
          </svg>

          {/* Value Legend */}
          <div className="mt-4 flex items-center justify-center gap-6 text-sm">
            <div className="flex items-center gap-2">
              <div className="w-3 h-3 rounded-full bg-green-500"></div>
              <span>Low ({"<"}1500)</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
              <span>Medium (1500-2500)</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-3 h-3 rounded-full bg-orange-500"></div>
              <span>High (2500-3500)</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-3 h-3 rounded-full bg-red-500"></div>
              <span>Critical ({">"}3500)</span>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}