'use client';

import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Eye, Edit, Trash2, Battery } from 'lucide-react';
import { SensorDevice } from './environmentMonitoringReducer';

interface DeviceManagementProps {
  sensorDevices: SensorDevice[];
  onViewDevice: (device: SensorDevice) => void;
  onEditDevice: (device: SensorDevice) => void;
  onDeleteDevice: (deviceId: string) => void;
}

export function DeviceManagement({
  sensorDevices,
  onViewDevice,
  onEditDevice,
  onDeleteDevice
}: DeviceManagementProps) {
  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 '未知';
    }
  };

  return (
    <Card className="p-4">
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead>
            <tr className="border-b">
              <th className="text-left p-2">设备名称</th>
              <th className="text-left p-2">类型</th>
              <th className="text-left p-2">地块</th>
              <th className="text-left p-2">位置</th>
              <th className="text-left p-2">状态</th>
              <th className="text-left p-2">电量</th>
              <th className="text-left p-2">最后更新</th>
              <th className="text-left p-2">操作</th>
            </tr>
          </thead>
          <tbody>
            {sensorDevices.map((device) => (
              <tr key={device.id} className="border-b hover:bg-muted/50">
                <td className="p-2">{device.name}</td>
                <td className="p-2">{device.type}</td>
                <td className="p-2">{device.fieldName}</td>
                <td className="p-2">{device.location}</td>
                <td className="p-2">
                  <Badge variant="outline" className={`${getStatusColor(device.status)} text-white`}>
                    {getStatusLabel(device.status)}
                  </Badge>
                </td>
                <td className="p-2">
                  <div className="flex items-center gap-1">
                    <Battery className={`w-4 h-4 ${device.battery < 40 ? 'text-red-500' : 'text-green-500'}`} />
                    <span className={device.battery < 40 ? 'text-red-600 dark:text-red-400' : ''}>
                      {device.battery}%
                    </span>
                  </div>
                </td>
                <td className="p-2 text-sm text-muted-foreground">{device.lastUpdate}</td>
                <td className="p-2">
                  <div className="flex gap-2">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onViewDevice(device)}
                    >
                      <Eye className="w-4 h-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onEditDevice(device)}
                    >
                      <Edit className="w-4 h-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onDeleteDevice(device.id)}
                    >
                      <Trash2 className="w-4 h-4 text-red-500" />
                    </Button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Card>
  );
}