智能家居控制面板

// SmartHomeDashboard.js
import React, { useState, useEffect } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Camera } from "lucide-react";

export default function SmartHomeDashboard() {
  const [deviceData, setDeviceData] = useState({
    temperature: "25°C",
    voltage: "230V",
    power: "100W",
    current: "0.5A",
    load: "20%",
  });

  const [deviceOn, setDeviceOn] = useState(true);
  const [scannedBarcode, setScannedBarcode] = useState("");
  const [showScanner, setShowScanner] = useState(false);
  const [suggestions, setSuggestions] = useState([]);
  const [alerts, setAlerts] = useState([]);
  const [deviceList, setDeviceList] = useState(["Device#1234", "Device#5678"]);

  useEffect(() => {
    // Simulate AI-based suggestions
    setSuggestions([
      "Consider replacing Device#1234 with a more efficient model.",
      "Schedule auto power-off for idle hours.",
      "Reduce device usage during peak load times."
    ]);

    // Simulate alerts
    setAlerts([
      "High power consumption detected in Device#1234.",
      "Temperature nearing threshold: 25°C."
    ]);
  }, []);

  const handleToggle = () => {
    setDeviceOn(!deviceOn);
  };

  const handleBarcodeScan = (event) => {
    const file = event.target.files[0];
    if (file) {
      setScannedBarcode("SCANNED: Device#1234");
      setDeviceList((prev) => [...new Set([...prev, "Device#1234"])]);
    }
  };

  const githubThemeStyle = "bg-[#0d1117] text-white border border-[#30363d]";

  return (
    <div className="p-6 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      {/* Device Monitoring Cards */}
      {Object.entries(deviceData).map(([key, value]) => (
        <Card key={key} className={`rounded-2xl shadow-xl ${githubThemeStyle}`}>
          <CardContent className="p-4">
            <h2 className="text-xl font-semibold capitalize">{key}</h2>
            <p className="text-2xl mt-2">{value}</p>
          </CardContent>
        </Card>
      ))}

      {/* Device Control */}
      <Card className={`col-span-1 rounded-2xl shadow-xl ${githubThemeStyle}`}>
        <CardContent className="p-4 flex flex-col gap-4">
          <h2 className="text-xl font-semibold">Smart Control</h2>
          <div className="flex items-center justify-between">
            <span>Device Status</span>
            <Switch checked={deviceOn} onCheckedChange={handleToggle} />
          </div>
          <div className="flex flex-col gap-2">
            <p className="text-sm text-muted-foreground">Barcode Scanner</p>
            <Input type="file" accept="image/*" onChange={handleBarcodeScan} />
            <p className="text-green-400 font-semibold">{scannedBarcode}</p>
          </div>
        </CardContent>
      </Card>

      {/* AI-based Suggestions */}
      <Card className={`col-span-1 rounded-2xl shadow-xl ${githubThemeStyle}`}>
        <CardContent className="p-4">
          <h2 className="text-xl font-semibold mb-2">AI Suggestions</h2>
          <ul className="list-disc pl-5 space-y-1 text-gray-300">
            {suggestions.map((tip, index) => (
              <li key={index} className="text-sm">{tip}</li>
            ))}
          </ul>
        </CardContent>
      </Card>

      {/* Real-Time Alerts */}
      <Card className={`col-span-1 rounded-2xl shadow-xl ${githubThemeStyle}`}>
        <CardContent className="p-4">
          <h2 className="text-xl font-semibold mb-2 text-red-500">Real-Time Alerts</h2>
          <ul className="list-disc pl-5 space-y-1">
            {alerts.map((alert, index) => (
              <li key={index} className="text-sm text-red-400">{alert}</li>
            ))}
          </ul>
        </CardContent>
      </Card>

      {/* Device List */}
      <Card className={`col-span-1 rounded-2xl shadow-xl ${githubThemeStyle}`}>
        <CardContent className="p-4">
          <h2 className="text-xl font-semibold mb-2">Connected Devices</h2>
          <ul className="list-disc pl-5 space-y-1 text-gray-300">
            {deviceList.map((device, idx) => (
              <li key={idx} className="text-sm">{device}</li>
            ))}
          </ul>
        </CardContent>
      </Card>
    </div>
  );
}