import React, { useState } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { 
  Home, 
  Thermometer, 
  Zap, 
  Lightbulb, 
  Clock, 
  Activity 
} from 'lucide-react';

const AIEnergySaver = () => {
  // State management for various energy-saving features
  const [temperature, setTemperature] = useState(72);
  const [energySavings, setEnergySavings] = useState(0);
  const [deviceStatus, setDeviceStatus] = useState({
    lights: false,
    heating: false,
    cooling: false,
    smartAppliances: false
  });

  // Simulated energy optimization function
  const optimizeEnergy = () => {
    // Simulate smart energy-saving adjustments
    const savedPercentage = Math.floor(Math.random() * 15) + 5; // 5-20% savings
    setEnergySavings(prev => prev + savedPercentage);

    // Smart device adjustments
    setDeviceStatus(prev => ({
      lights: Math.random() > 0.5,
      heating: temperature > 70 ? false : prev.heating,
      cooling: temperature < 70 ? false : prev.cooling,
      smartAppliances: Math.random() > 0.3
    }));
  };

  // Temperature adjustment functions
  const adjustTemperature = (change) => {
    setTemperature(prev => {
      const newTemp = prev + change;
      return Math.max(60, Math.min(newTemp, 80)); // Limit range
    });
  };

  return (
    <div className="p-4 max-w-md mx-auto">
      <Card className="w-full">
        <CardHeader className="bg-green-50">
          <CardTitle className="flex items-center">
            <Home className="mr-2" /> AI Energy Saver
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4 p-4">
          {/* Temperature Control */}
          <div className="flex items-center justify-between">
            <div className="flex items-center">
              <Thermometer className="mr-2" />
              <span>Temperature: {temperature}°F</span>
            </div>
            <div className="flex space-x-2">
              <Button 
                variant="outline" 
                size="sm" 
                onClick={() => adjustTemperature(-1)}
              >
                -
              </Button>
              <Button 
                variant="outline" 
                size="sm" 
                onClick={() => adjustTemperature(1)}
              >
                +
              </Button>
            </div>
          </div>

          {/* Energy Savings */}
          <div className="flex items-center">
            <Zap className="mr-2" />
            <span>Total Energy Savings: {energySavings}%</span>
          </div>

          {/* Device Status */}
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <div className="flex items-center">
                <Lightbulb className="mr-2" />
                <span>Lights</span>
              </div>
              <span 
                className={`text-sm font-bold ${
                  deviceStatus.lights ? 'text-green-600' : 'text-red-600'
                }`}
              >
                {deviceStatus.lights ? 'Optimized' : 'Standard'}
              </span>
            </div>
            <div className="flex items-center justify-between">
              <div className="flex items-center">
                <Clock className="mr-2" />
                <span>Smart Appliances</span>
              </div>
              <span 
                className={`text-sm font-bold ${
                  deviceStatus.smartAppliances ? 'text-green-600' : 'text-red-600'
                }`}
              >
                {deviceStatus.smartAppliances ? 'Active' : 'Inactive'}
              </span>
            </div>
          </div>

          {/* Optimize Button */}
          <Button 
            className="w-full" 
            onClick={optimizeEnergy}
          >
            <Activity className="mr-2" />
            Optimize Energy Usage
          </Button>
        </CardContent>
      </Card>
    </div>
  );
};

export default AIEnergySaver;