claudetools/projects/msp-tools/guru-connect/dashboard/src/components/SessionControls.tsx

/**
 * Session Controls Component
 *
 * Toolbar for controlling the remote session (quality, displays, special keys)
 */

import React, { useState } from 'react';
import type { QualitySettings, Display } from '../types/protocol';

interface SessionControlsProps {
  displays?: Display[];
  currentDisplay?: number;
  onDisplayChange?: (displayId: number) => void;
  quality?: QualitySettings;
  onQualityChange?: (settings: QualitySettings) => void;
  onSpecialKey?: (key: 'ctrl-alt-del' | 'lock-screen' | 'print-screen') => void;
  onDisconnect?: () => void;
}

export const SessionControls: React.FC<SessionControlsProps> = ({
  displays = [],
  currentDisplay = 0,
  onDisplayChange,
  quality,
  onQualityChange,
  onSpecialKey,
  onDisconnect,
}) => {
  const [showQuality, setShowQuality] = useState(false);

  const handleQualityPreset = (preset: 'auto' | 'low' | 'balanced' | 'high') => {
    onQualityChange?.({
      preset,
      codec: 'auto',
    });
  };

  return (
    <div className="session-controls" style={{
      display: 'flex',
      gap: '8px',
      padding: '8px',
      backgroundColor: '#222',
      borderBottom: '1px solid #444',
    }}>
      {/* Display selector */}
      {displays.length > 1 && (
        <select
          value={currentDisplay}
          onChange={(e) => onDisplayChange?.(Number(e.target.value))}
          style={{
            padding: '4px 8px',
            backgroundColor: '#333',
            color: '#fff',
            border: '1px solid #555',
            borderRadius: '4px',
          }}
        >
          {displays.map((d) => (
            <option key={d.id} value={d.id}>
              {d.name || `Display ${d.id + 1}`}
              {d.isPrimary ? ' (Primary)' : ''}
            </option>
          ))}
        </select>
      )}

      {/* Quality dropdown */}
      <div style={{ position: 'relative' }}>
        <button
          onClick={() => setShowQuality(!showQuality)}
          style={{
            padding: '4px 12px',
            backgroundColor: '#333',
            color: '#fff',
            border: '1px solid #555',
            borderRadius: '4px',
            cursor: 'pointer',
          }}
        >
          Quality: {quality?.preset || 'auto'}
        </button>

        {showQuality && (
          <div style={{
            position: 'absolute',
            top: '100%',
            left: 0,
            marginTop: '4px',
            backgroundColor: '#333',
            border: '1px solid #555',
            borderRadius: '4px',
            zIndex: 100,
          }}>
            {(['auto', 'low', 'balanced', 'high'] as const).map((preset) => (
              <button
                key={preset}
                onClick={() => {
                  handleQualityPreset(preset);
                  setShowQuality(false);
                }}
                style={{
                  display: 'block',
                  width: '100%',
                  padding: '8px 16px',
                  backgroundColor: quality?.preset === preset ? '#444' : 'transparent',
                  color: '#fff',
                  border: 'none',
                  textAlign: 'left',
                  cursor: 'pointer',
                }}
              >
                {preset.charAt(0).toUpperCase() + preset.slice(1)}
              </button>
            ))}
          </div>
        )}
      </div>

      {/* Special keys */}
      <button
        onClick={() => onSpecialKey?.('ctrl-alt-del')}
        title="Send Ctrl+Alt+Delete"
        style={{
          padding: '4px 12px',
          backgroundColor: '#333',
          color: '#fff',
          border: '1px solid #555',
          borderRadius: '4px',
          cursor: 'pointer',
        }}
      >
        Ctrl+Alt+Del
      </button>

      <button
        onClick={() => onSpecialKey?.('lock-screen')}
        title="Lock Screen (Win+L)"
        style={{
          padding: '4px 12px',
          backgroundColor: '#333',
          color: '#fff',
          border: '1px solid #555',
          borderRadius: '4px',
          cursor: 'pointer',
        }}
      >
        Lock
      </button>

      <button
        onClick={() => onSpecialKey?.('print-screen')}
        title="Print Screen"
        style={{
          padding: '4px 12px',
          backgroundColor: '#333',
          color: '#fff',
          border: '1px solid #555',
          borderRadius: '4px',
          cursor: 'pointer',
        }}
      >
        PrtSc
      </button>

      {/* Spacer */}
      <div style={{ flex: 1 }} />

      {/* Disconnect */}
      <button
        onClick={onDisconnect}
        style={{
          padding: '4px 12px',
          backgroundColor: '#dc2626',
          color: '#fff',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer',
        }}
      >
        Disconnect
      </button>
    </div>
  );
};

export default SessionControls;