import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { AlertTriangle, VolumeX, CheckCircle, Bell } from "lucide-react"
import { useBedPressureStore } from "@/stores/bedPressureStore"
import { useEffect, useState } from "react"

export function AlarmDashboard() {
  const { 
    activeAlarms, 
    isConnected,
    acknowledgeAlarm, 
    silenceAllAlarms 
  } = useBedPressureStore()
  const [unsilencedAlarms, setUnsilencedAlarms] = useState(0)
  // Update alarm counts
  useEffect(() => {
    const unsilenced = activeAlarms.filter(alarm => !alarm.silenced).length
    setUnsilencedAlarms(unsilenced)
  }, [activeAlarms])

  const getSystemStatus = () => {
    const alarmCount = activeAlarms.filter(a => a.type === 'alarm' && !a.silenced).length
    const warningCount = activeAlarms.filter(a => a.type === 'warning' && !a.silenced).length
    
    if (alarmCount > 0) return { status: 'ALARM', color: 'text-red-600 bg-red-50 border-red-200', count: alarmCount }
    if (warningCount > 0) return { status: 'WARNING', color: 'text-yellow-600 bg-yellow-50 border-yellow-200', count: warningCount }
    return { status: 'NORMAL', color: 'text-green-600 bg-green-50 border-green-200', count: 0 }
  }

  const systemStatus = getSystemStatus()

  return (
    <div className="space-y-4">
      {/* System Status Overview */}
      <Card className={`border-2 ${systemStatus.color}`}>
        <CardHeader className="pb-3">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className={`p-2 rounded-full ${systemStatus.color}`}>
                {systemStatus.status === 'ALARM' ? (
                  <AlertTriangle className="w-6 h-6 animate-pulse" />
                ) : systemStatus.status === 'WARNING' ? (
                  <AlertTriangle className="w-6 h-6" />
                ) : (
                  <CheckCircle className="w-6 h-6" />
                )}
              </div>
              <div>
                <CardTitle className={`text-lg ${systemStatus.status === 'ALARM' ? 'text-red-700' : systemStatus.status === 'WARNING' ? 'text-yellow-700' : 'text-green-700'}`}>
                  SYSTEM STATUS: {systemStatus.status}
                </CardTitle>                <p className="text-sm text-gray-600">
                  {isConnected ? 'Hardware Connected' : 'Hardware Offline'} • 
                  {activeAlarms.length} Active Alarms • 
                  {unsilencedAlarms} Unsilenced
                </p>
              </div>
            </div>
            
            <div className="flex items-center gap-2">
              {systemStatus.count > 0 && (
                <Badge variant="destructive" className="text-lg px-3 py-1">
                  {systemStatus.count}
                </Badge>
              )}
              {unsilencedAlarms > 0 && (
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => silenceAllAlarms(300000)}
                  className="text-orange-600 hover:text-orange-700"
                >
                  <VolumeX className="w-4 h-4 mr-1" />
                  Silence All (5m)
                </Button>
              )}
            </div>
          </div>
        </CardHeader>
      </Card>

      {/* Active Alarms Summary */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4 text-center">
            <div className="flex items-center justify-center gap-2 mb-2">
              <AlertTriangle className="w-5 h-5 text-red-600" />
              <span className="text-sm font-medium text-gray-600">Critical Alarms</span>
            </div>
            <p className="text-2xl font-bold text-red-600">
              {activeAlarms.filter(a => a.type === 'alarm' && !a.silenced).length}
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-4 text-center">
            <div className="flex items-center justify-center gap-2 mb-2">
              <AlertTriangle className="w-5 h-5 text-yellow-600" />
              <span className="text-sm font-medium text-gray-600">Warnings</span>
            </div>
            <p className="text-2xl font-bold text-yellow-600">
              {activeAlarms.filter(a => a.type === 'warning' && !a.silenced).length}
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-4 text-center">
            <div className="flex items-center justify-center gap-2 mb-2">
              <VolumeX className="w-5 h-5 text-gray-600" />
              <span className="text-sm font-medium text-gray-600">Silenced</span>
            </div>
            <p className="text-2xl font-bold text-gray-600">
              {activeAlarms.filter(a => a.silenced).length}
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-4 text-center">
            <div className="flex items-center justify-center gap-2 mb-2">
              <CheckCircle className="w-5 h-5 text-green-600" />
              <span className="text-sm font-medium text-gray-600">Acknowledged</span>
            </div>
            <p className="text-2xl font-bold text-green-600">
              {activeAlarms.filter(a => a.acknowledged).length}
            </p>
          </CardContent>        </Card>
      </div>

      {/* Recent Alarm Activity */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Bell className="w-5 h-5" />
            Recent Alarm Activity
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-2 max-h-48 overflow-y-auto">
            {activeAlarms.length === 0 ? (
              <div className="text-center py-4">
                <CheckCircle className="w-8 h-8 text-green-500 mx-auto mb-2" />
                <p className="text-sm text-gray-500">No active alarms</p>
              </div>
            ) : (
              activeAlarms.slice(0, 5).map((alarm) => (
                <div
                  key={alarm.id}
                  className="flex items-center justify-between p-2 bg-gray-50 rounded border"
                >
                  <div className="flex items-center gap-2">
                    <AlertTriangle className={`w-4 h-4 ${
                      alarm.type === 'alarm' ? 'text-red-600' : 'text-yellow-600'
                    }`} />
                    <div>
                      <p className="text-sm font-medium">{alarm.sensorLabel}</p>
                      <p className="text-xs text-gray-600">
                        {alarm.type.toUpperCase()} • Value: {alarm.value.toFixed(0)} • {alarm.time}
                      </p>
                    </div>
                  </div>
                  
                  <div className="flex items-center gap-1">
                    {alarm.silenced && (
                      <Badge variant="secondary" className="text-xs">
                        <VolumeX className="w-3 h-3 mr-1" />
                        Silenced
                      </Badge>
                    )}
                    {alarm.acknowledged && (
                      <Badge variant="outline" className="text-xs">
                        <CheckCircle className="w-3 h-3 mr-1" />
                        ACK
                      </Badge>
                    )}
                    {!alarm.acknowledged && (
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => acknowledgeAlarm(alarm.id)}
                        className="text-xs h-6 px-2"
                      >
                        ACK
                      </Button>
                    )}
                  </div>
                </div>
              ))
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}