Mock Windows Interface Version 2

import React, { useState } from 'react';
import { X, Minus, Square, Settings, Power } from 'lucide-react';

const Windows95Interface = () => {
  const [windows, setWindows] = useState([
    { id: 1, title: 'My Computer', x: 20, y: 20, width: 300, height: 200, minimized: false },
    { id: 2, title: 'Notepad', x: 100, y: 100, width: 250, height: 180, minimized: false },
  ]);

  const [activeWindow, setActiveWindow] = useState(null);
  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
  const [startMenuOpen, setStartMenuOpen] = useState(false);
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [backgroundColor, setBackgroundColor] = useState('#008080');
  const [shutdownPrompt, setShutdownPrompt] = useState(false);

  const handleMouseDown = (e, id) => {
    setActiveWindow(id);
    setDragStart({ x: e.clientX, y: e.clientY });
  };

  const handleMouseMove = (e) => {
    if (activeWindow !== null) {
      const dx = e.clientX - dragStart.x;
      const dy = e.clientY - dragStart.y;
      setWindows(windows.map(w =>
        w.id === activeWindow
          ? { ...w, x: w.x + dx, y: w.y + dy }
          : w
      ));
      setDragStart({ x: e.clientX, y: e.clientY });
    }
  };

  const handleMouseUp = () => {
    setActiveWindow(null);
  };

  const minimizeWindow = (id) => {
    setWindows(windows.map(w =>
      w.id === id ? { ...w, minimized: !w.minimized } : w
    ));
  };

  const closeWindow = (id) => {
    setWindows(windows.filter(w => w.id !== id));
  };

  const openWindow = (title) => {
    const newWindow = {
      id: Date.now(),
      title,
      x: 50 + Math.random() * 100,
      y: 50 + Math.random() * 100,
      width: 300,
      height: 200,
      minimized: false
    };
    setWindows([...windows, newWindow]);
    setStartMenuOpen(false);
  };

  const toggleStartMenu = () => {
    setStartMenuOpen(!startMenuOpen);
  };

  const openSettings = () => {
    setSettingsOpen(true);
    setStartMenuOpen(false);
  };

  const closeSettings = () => {
    setSettingsOpen(false);
  };

  const changeBackgroundColor = (color) => {
    setBackgroundColor(color);
  };

  const initiateShutdown = () => {
    setShutdownPrompt(true);
    setStartMenuOpen(false);
  };

  const cancelShutdown = () => {
    setShutdownPrompt(false);
  };

  const confirmShutdown = () => {
    // In a real system, this would trigger a shutdown.
    // For this mock-up, we'll just close all windows and show a message.
    setWindows([]);
    setShutdownPrompt(false);
    alert("Windows is shutting down. It's now safe to turn off your computer.");
  };

  return (
    <div
      className="w-full h-screen relative overflow-hidden"
      style={{ backgroundColor }}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
    >
      {windows.map(window => (
        <div
          key={window.id}
          className={`absolute bg-gray-200 border-2 border-gray-400 shadow-lg ${window.minimized ? 'hidden' : ''}`}
          style={{
            left: `${window.x}px`,
            top: `${window.y}px`,
            width: `${window.width}px`,
            height: `${window.height}px`,
            zIndex: activeWindow === window.id ? 10 : 1
          }}
        >
          <div
            className="bg-blue-900 text-white px-2 py-1 flex justify-between items-center cursor-move"
            onMouseDown={(e) => handleMouseDown(e, window.id)}
          >
            <span>{window.title}</span>
            <div className="flex space-x-1">
              <button onClick={() => minimizeWindow(window.id)} className="focus:outline-none">
                <Minus size={16} />
              </button>
              <button className="focus:outline-none">
                <Square size={16} />
              </button>
              <button onClick={() => closeWindow(window.id)} className="focus:outline-none">
                <X size={16} />
              </button>
            </div>
          </div>
          <div className="p-2">
            {window.title === 'My Computer' ? (
              <div className="flex flex-col items-center">
                <img src="/api/placeholder/64/64" alt="My Computer" className="mb-2" />
                <span>My Computer</span>
              </div>
            ) : (
              <textarea className="w-full h-32 p-2 border border-gray-400 resize-none" placeholder="Type here..."></textarea>
            )}
          </div>
        </div>
      ))}

      {settingsOpen && (
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 border-2 border-gray-400 shadow-lg p-4 w-80">
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-lg font-bold">Settings</h2>
            <button onClick={closeSettings} className="focus:outline-none">
              <X size={16} />
            </button>
          </div>
          <div className="mb-4">
            <label className="block mb-2">Background Color:</label>
            <div className="flex space-x-2">
              <button onClick={() => changeBackgroundColor('#008080')} className="w-6 h-6 bg-teal-600"></button>
              <button onClick={() => changeBackgroundColor('#000080')} className="w-6 h-6 bg-blue-900"></button>
              <button onClick={() => changeBackgroundColor('#008000')} className="w-6 h-6 bg-green-700"></button>
            </div>
          </div>
        </div>
      )}

      {shutdownPrompt && (
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 border-2 border-gray-400 shadow-lg p-4 w-80">
          <h2 className="text-lg font-bold mb-4">Shut Down Windows</h2>
          <p className="mb-4">Are you sure you want to shut down your computer?</p>
          <div className="flex justify-end space-x-2">
            <button onClick={cancelShutdown} className="px-4 py-2 bg-gray-300 hover:bg-gray-400">Cancel</button>
            <button onClick={confirmShutdown} className="px-4 py-2 bg-red-500 text-white hover:bg-red-600">OK</button>
          </div>
        </div>
      )}

      <div className="absolute bottom-0 left-0 right-0 bg-gray-300 h-10 flex items-center px-2">
        <button onClick={toggleStartMenu} className="bg-green-600 text-white px-4 py-1 rounded">Start</button>
        {startMenuOpen && (
          <div className="absolute bottom-10 left-0 w-56 bg-gray-200 border-2 border-gray-400 shadow-lg">
            <button onClick={() => openWindow('Programs')} className="w-full text-left px-4 py-2 hover:bg-blue-600 hover:text-white">Programs</button>
            <button onClick={() => openWindow('Documents')} className="w-full text-left px-4 py-2 hover:bg-blue-600 hover:text-white">Documents</button>
            <button onClick={openSettings} className="w-full text-left px-4 py-2 hover:bg-blue-600 hover:text-white flex items-center">
              <Settings size={16} className="mr-2" />
              Settings
            </button>
            <hr className="my-2 border-gray-400" />
            <button onClick={initiateShutdown} className="w-full text-left px-4 py-2 hover:bg-blue-600 hover:text-white flex items-center">
              <Power size={16} className="mr-2" />
              Shut Down...
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

export default Windows95Interface;