'use client';

import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import {
  Thermometer,
  Droplets,
  Leaf,
  Eye,
  Wind,
  TrendingUp,
  Battery
} from 'lucide-react';
import { SensorDevice } from './environmentMonitoringReducer';

interface RealTimeMonitoringProps {
  selectedDevice: string;
  sensorDevices: SensorDevice[];
  onDeviceChange: (value: string) => void;
}

export function RealTimeMonitoring({
  selectedDevice,
  sensorDevices,
  onDeviceChange
}: RealTimeMonitoringProps) {
  const currentDevice = sensorDevices.find(d => d.id === selectedDevice) || sensorDevices[0];

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'online': return 'bg-green-500';
      case 'offline': return 'bg-gray-500';
      case 'warning': return 'bg-yellow-500';
      default: return 'bg-gray-500';
    }
  };

  const getStatusLabel = (status: string) => {
    switch (status) {
      case 'online': return '在线';
      case 'offline': return '离线';
      case 'warning': return '警告';
      default: return '未知';
    }
  };

  const getCO2Level = (co2: number) => {
    if (co2 < 400) return { label: '正常', color: 'text-green-600 dark:text-green-400' };
    if (co2 < 600) return { label: '良好', color: 'text-blue-600 dark:text-blue-400' };
    if (co2 < 1000) return { label: '偏高', color: 'text-yellow-600 dark:text-yellow-400' };
    return { label: '过高', color: 'text-red-600 dark:text-red-400' };
  };

  const getPM25Level = (pm25: number) => {
    if (pm25 < 35) return { label: '优', color: 'text-green-600 dark:text-green-400' };
    if (pm25 < 75) return { label: '良', color: 'text-blue-600 dark:text-blue-400' };
    if (pm25 < 115) return { label: '轻度污染', color: 'text-yellow-600 dark:text-yellow-400' };
    return { label: '重度污染', color: 'text-red-600 dark:text-red-400' };
  };

  return (
    <Card className="p-4">
      <div className="flex items-center gap-4 mb-4 flex-wrap">
        <Label className="text-sm">选择设备查看实时数据:</Label>
        <Select value={selectedDevice} onValueChange={onDeviceChange}>
          <SelectTrigger className="w-80">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {sensorDevices.map((device) => (
              <SelectItem key={device.id} value={device.id}>
                {device.name} - {device.fieldName} - {device.type}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Badge variant="outline" className={`${getStatusColor(currentDevice.status)} text-white`}>
          {getStatusLabel(currentDevice.status)}
        </Badge>
        <Badge variant="outline" className="flex items-center gap-1">
          <Battery className={`w-3 h-3 ${currentDevice.battery < 40 ? 'text-red-500' : 'text-green-500'}`} />
          电量: {currentDevice.battery}%
        </Badge>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
        <Card className="p-4 bg-gradient-to-br from-red-50 to-red-100 dark:from-red-950 dark:to-red-900 border-red-200 dark:border-red-800">
          <div className="flex items-center justify-between mb-2">
            <Thermometer className="w-6 h-6 text-red-600 dark:text-red-400" />
            <Badge variant="outline">实时</Badge>
          </div>
          <p className="text-xs text-muted-foreground">空气温度</p>
          <p className="mt-2 text-2xl text-red-600 dark:text-red-400">{currentDevice.sensors.temperature}°C</p>
          <p className="text-xs text-green-600 dark:text-green-400 mt-1">↑ 0.5°C</p>
        </Card>

        <Card className="p-4 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-950 dark:to-blue-900 border-blue-200 dark:border-blue-800">
          <div className="flex items-center justify-between mb-2">
            <Droplets className="w-6 h-6 text-blue-600 dark:text-blue-400" />
            <Badge variant="outline">实时</Badge>
          </div>
          <p className="text-xs text-muted-foreground">空气湿度</p>
          <p className="mt-2 text-2xl text-blue-600 dark:text-blue-400">{currentDevice.sensors.humidity}%</p>
          <p className="text-xs text-red-600 dark:text-red-400 mt-1">↓ 3%</p>
        </Card>

        <Card className="p-4 bg-gradient-to-br from-green-50 to-green-100 dark:from-green-950 dark:to-green-900 border-green-200 dark:border-green-800">
          <div className="flex items-center justify-between mb-2">
            <Leaf className="w-6 h-6 text-green-600 dark:text-green-400" />
            <Badge variant="outline">实时</Badge>
          </div>
          <p className="text-xs text-muted-foreground">CO₂浓度</p>
          <p className="mt-2 text-2xl text-green-600 dark:text-green-400">{currentDevice.sensors.co2}</p>
          <p className="text-xs text-muted-foreground mt-1">ppm</p>
        </Card>

        <Card className="p-4 bg-gradient-to-br from-yellow-50 to-yellow-100 dark:from-yellow-950 dark:to-yellow-900 border-yellow-200 dark:border-yellow-800">
          <div className="flex items-center justify-between mb-2">
            <Eye className="w-6 h-6 text-yellow-600 dark:text-yellow-400" />
            <Badge variant="outline">实时</Badge>
          </div>
          <p className="text-xs text-muted-foreground">光照强度</p>
          <p className="mt-2 text-2xl text-yellow-600 dark:text-yellow-400">{(currentDevice.sensors.light! / 1000).toFixed(0)}k</p>
          <p className="text-xs text-muted-foreground mt-1">lux</p>
        </Card>

        <Card className="p-4 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-950 dark:to-purple-900 border-purple-200 dark:border-purple-800">
          <div className="flex items-center justify-between mb-2">
            <Wind className="w-6 h-6 text-purple-600 dark:text-purple-400" />
            <Badge variant="outline">实时</Badge>
          </div>
          <p className="text-xs text-muted-foreground">PM2.5</p>
          <p className="mt-2 text-2xl text-purple-600 dark:text-purple-400">{currentDevice.sensors.pm25}</p>
          <p className="text-xs text-muted-foreground mt-1">μg/m³</p>
        </Card>
      </div>

      <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
        <Card className="p-4 bg-gradient-to-br from-green-50 to-white dark:from-green-950 dark:to-card border-green-200 dark:border-green-800">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs text-muted-foreground">CO₂水平评估</p>
              <p className={`mt-2 ${getCO2Level(currentDevice.sensors.co2!).color}`}>
                {getCO2Level(currentDevice.sensors.co2!).label}
              </p>
            </div>
            <TrendingUp className="w-8 h-8 text-green-600 dark:text-green-400 opacity-30" />
          </div>
        </Card>

        <Card className="p-4 bg-gradient-to-br from-purple-50 to-white dark:from-purple-950 dark:to-card border-purple-200 dark:border-purple-800">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs text-muted-foreground">空气质量评估</p>
              <p className={`mt-2 ${getPM25Level(currentDevice.sensors.pm25!).color}`}>
                {getPM25Level(currentDevice.sensors.pm25!).label}
              </p>
            </div>
            <Wind className="w-8 h-8 text-purple-600 dark:text-purple-400 opacity-30" />
          </div>
        </Card>
      </div>
    </Card>
  );
}