'use client';

import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { CheckCircle2, AlertCircle, Radio, Activity } from 'lucide-react';
import { SensorDevice } from './environmentMonitoringReducer';

interface DeviceOverviewProps {
  sensorDevices: SensorDevice[];
}

export function DeviceOverview({ sensorDevices }: DeviceOverviewProps) {
  const onlineDevices = sensorDevices.filter(d => d.status === 'online').length;
  const warningDevices = sensorDevices.filter(d => d.status === 'warning').length;
  const offlineDevices = sensorDevices.filter(d => d.status === 'offline').length;

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
      <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">
          <div>
            <p className="text-xs text-muted-foreground">在线设备</p>
            <p className="mt-2 text-2xl text-green-600 dark:text-green-400">{onlineDevices}</p>
          </div>
          <CheckCircle2 className="w-10 h-10 text-green-600 dark:text-green-400 opacity-50" />
        </div>
      </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">
          <div>
            <p className="text-xs text-muted-foreground">警告设备</p>
            <p className="mt-2 text-2xl text-yellow-600 dark:text-yellow-400">{warningDevices}</p>
          </div>
          <AlertCircle className="w-10 h-10 text-yellow-600 dark:text-yellow-400 opacity-50" />
        </div>
      </Card>

      <Card className="p-4 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 border-gray-200 dark:border-gray-600">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs text-muted-foreground">离线设备</p>
            <p className="mt-2 text-2xl text-muted-foreground">{offlineDevices}</p>
          </div>
          <Radio className="w-10 h-10 text-muted-foreground opacity-50" />
        </div>
      </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">
          <div>
            <p className="text-xs text-muted-foreground">设备总数</p>
            <p className="mt-2 text-2xl text-blue-600 dark:text-blue-400">{sensorDevices.length}</p>
          </div>
          <Activity className="w-10 h-10 text-blue-600 dark:text-blue-400 opacity-50" />
        </div>
      </Card>
    </div>
  );
}