import React from 'react';
import { RefreshCw, Monitor, Tablet, Smartphone, Inspect, Maximize2, Minimize2, Code } from 'lucide-react';

const Toolbar = ({
  selectedDevice,
  setSelectedDevice,
  isInspectModeActive,
  setInspectMode,
  isFullscreen,
  onRefresh,
  onToggleFullscreen,
  onToggleSidebar,
  showSidebar,
  cleanupInspectorState,
  inspectedElementInfo
}) => {
  const handleDeviceChange = (device) => {
    if (!isFullscreen && (device === 'desktop' || device === 'tablet')) {
      onToggleFullscreen(device);
    } else {
      setSelectedDevice(device);
    }
  };

  const handleInspectToggle = () => {
    if (isInspectModeActive) {
      // If already in inspect mode, just turn it off
      cleanupInspectorState();
    } else {
      // Activate inspect mode (no need to cleanup when activating)
      console.log('🎯 TOOLBAR: Activating inspect mode');
      setInspectMode(true);
    }
  };

  return (
    <div className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-4">
      <div className="flex items-center justify-between">
        {/* Left side - Code toggle (fullscreen only) */}
        <div className="flex items-center space-x-2">
          {isFullscreen && (
            <button
              onClick={onToggleSidebar}
              className={`p-2 rounded-md transition-colors ${
                showSidebar 
                  ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' 
                  : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
              }`}
              title="Toggle Code Sidebar"
            >
              <Code className="w-4 h-4" />
            </button>
          )}
        </div>

        {/* Center - Preview controls */}
        <div className="flex items-center space-x-2">
          <button
            onClick={onRefresh}
            className="p-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
            title="Refresh Preview"
          >
            <RefreshCw className="w-4 h-4" />
          </button>

          <div className="flex bg-gray-100 dark:bg-gray-700 rounded-md p-1">
            <button
              onClick={() => handleDeviceChange('desktop')}
              className={`p-2 rounded transition-colors ${
                selectedDevice === 'desktop'
                  ? 'bg-blue-500 text-white'
                  : 'text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
              }`}
              title="Desktop View"
            >
              <Monitor className="w-4 h-4" />
            </button>
            <button
              onClick={() => handleDeviceChange('tablet')}
              className={`p-2 rounded transition-colors ${
                selectedDevice === 'tablet'
                  ? 'bg-blue-500 text-white'
                  : 'text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
              }`}
              title="Tablet View"
            >
              <Tablet className="w-4 h-4" />
            </button>
            <button
              onClick={() => handleDeviceChange('mobile')}
              className={`p-2 rounded transition-colors ${
                selectedDevice === 'mobile'
                  ? 'bg-blue-500 text-white'
                  : 'text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
              }`}
              title="Mobile View"
            >
              <Smartphone className="w-4 h-4" />
            </button>
          </div>

          {isFullscreen && (
            <button
              onClick={handleInspectToggle}
              className={`p-2 rounded-md transition-colors ${
                isInspectModeActive
                  ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
                  : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
              }`}
              title="Inspect Element"
            >
              <Inspect className="w-4 h-4" />
            </button>
          )}
        </div>

        {/* Right side - Fullscreen toggle */}
        <div className="flex items-center space-x-2">
          <button
            onClick={() => onToggleFullscreen()}
            className="p-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
            title={isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
          >
            {isFullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
          </button>
        </div>
      </div>
    </div>
  );
};

export default Toolbar;