import { createScreenCaptureManager } from '@/lib/webrtc/screen-capture'

const captureManager = createScreenCaptureManager({
  onStreamStarted: (stream) => {
    console.log('Screen share started:', stream)
  },
  onStreamEnded: (streamId) => {
    console.log('Screen share ended:', streamId)
  },
  onError: (error) => {
    console.error('Screen capture error:', error)
  },
})

// Start capturing
const share = await captureManager.startCapture(userId, userName, {
  quality: '1080p',
  captureSystemAudio: true,
  captureCursor: true,
  frameRate: 30,
})

// Update quality dynamically
await captureManager.updateQuality(share.id, '4k')

// Stop capturing
captureManager.stopCapture(share.id)

import { createScreenAnnotator } from '@/lib/webrtc/screen-annotator'

const annotator = createScreenAnnotator({
  canvas: canvasElement,
  userId: 'user-123',
  userName: 'John Doe',
  onAnnotationAdded: (annotation) => {
    // Broadcast annotation to other users
    broadcastAnnotation(annotation)
  },
})

// Change tool
annotator.setTool('arrow')

// Change color
annotator.setColor('#FF0000')

// Change stroke width
annotator.setStrokeWidth(4)

// Undo/redo
annotator.undo()
annotator.redo()

// Clear all
annotator.clear()

// Add remote annotation
annotator.addRemoteAnnotation(remoteAnnotation)

import { createCursorHighlighter } from '@/lib/webrtc/cursor-highlighter'

const highlighter = createCursorHighlighter({
  canvas: canvasElement,
  highlightColor: '#FF4500',
  highlightSize: 30,
  showClickEffect: true,
  clickEffectDuration: 500,
  showUserName: true,
  fadeOldCursors: true,
  fadeTimeout: 3000,
})

// Update cursor position
highlighter.updateCursor({
  x: 100,
  y: 200,
  userId: 'user-123',
  userName: 'John Doe',
  timestamp: Date.now(),
})

// Add click effect
highlighter.addClick({
  x: 100,
  y: 200,
  userId: 'user-123',
  timestamp: Date.now(),
})

import { createScreenRecorder } from '@/lib/webrtc/screen-recorder'

const recorder = createScreenRecorder({
  onStart: () => console.log('Recording started'),
  onStop: (recording) => {
    console.log('Recording stopped:', recording)
    // Download recording
    downloadRecording(recording)
  },
  onDataAvailable: (data, size) => {
    console.log('Data chunk:', size, 'bytes')
  },
})

// Start recording with webcam overlay
await recorder.startRecording(screenStream, {
  format: 'webm',
  quality: 'high',
  includeWebcam: true,
  webcamSize: 'small',
  webcamPosition: 'bottom-right',
})

// Pause/resume
recorder.pauseRecording()
recorder.resumeRecording()

// Stop and save
const recording = await recorder.stopRecording()

import { useScreenShare } from '@/hooks/use-screen-share'

function MyComponent() {
  const {
    isScreenSharing,
    screenStream,
    error,
    startScreenShare,
    stopScreenShare,
    updateQuality,
    isSupported,
    supportsSystemAudio,
  } = useScreenShare({
    userId: 'user-123',
    userName: 'John Doe',
    useAdvancedCapture: true,
  })

  return (
    <div>
      {isSupported && (
        <button onClick={() => startScreenShare({ quality: '1080p' })}>
          Share Screen
        </button>
      )}
      {isScreenSharing && (
        <button onClick={stopScreenShare}>Stop Sharing</button>
      )}
    </div>
  )
}

import { useScreenRecording } from '@/hooks/use-screen-recording'

function MyComponent() {
  const {
    isRecording,
    isPaused,
    duration,
    recordings,
    startRecording,
    stopRecording,
    pauseRecording,
    resumeRecording,
    formatDuration,
    isSupported,
  } = useScreenRecording()

  return (
    <div>
      {isSupported && screenStream && (
        <>
          <button onClick={() => startRecording(screenStream)}>
            Start Recording
          </button>
          {isRecording && (
            <>
              <span>{formatDuration(duration)}</span>
              <button onClick={pauseRecording}>Pause</button>
              <button onClick={stopRecording}>Stop</button>
            </>
          )}
        </>
      )}
    </div>
  )
}

import { ScreenSharePanel } from '@/components/call/screen-share-panel'

<ScreenSharePanel
  userId="user-123"
  userName="John Doe"
  onStreamStarted={(stream) => console.log('Stream started')}
  onStreamEnded={() => console.log('Stream ended')}
  showAnnotations
  showRecording
/>

import { AnnotationToolbar } from '@/components/call/annotation-toolbar'

<AnnotationToolbar
  selectedTool={tool}
  selectedColor={color}
  strokeWidth={width}
  onToolChange={setTool}
  onColorChange={setColor}
  onStrokeWidthChange={setWidth}
  onUndo={handleUndo}
  onRedo={handleRedo}
  onClear={handleClear}
  canUndo={canUndo}
  canRedo={canRedo}
  orientation="vertical"
/>

// Check if screen sharing is supported
if (ScreenCaptureManager.isSupported()) {
  // Check if system audio is supported
  if (supportsSystemAudio()) {
    // Request screen share with system audio
    await startScreenShare({
      captureSystemAudio: true,
    })
  }
}

// Handle permission errors
try {
  await startScreenShare()
} catch (error) {
  if (error.name === 'NotAllowedError') {
    // User denied permission
  } else if (error.name === 'NotFoundError') {
    // No screen/window selected
  }
}

// Automatic quality based on network conditions
import { getOptimalQuality } from '@/lib/webrtc/screen-capture'

// Get network info (if available)
const connection = navigator.connection
const downlink = connection?.downlink ?? 10 // Mbps

// Get optimal quality
const quality = getOptimalQuality(downlink)

// Apply quality
await startScreenShare({ quality })

// Lower frame rate for better performance
await startScreenShare({
  quality: '1080p',
  frameRate: 15, // Lower FPS = less CPU usage
})

// Dynamic adjustment
await updateFrameRate(shareId, 30)

// Stop all shares on component unmount
useEffect(() => {
  return () => {
    captureManager.cleanup()
    recorder.destroy()
    annotator.cleanup()
    highlighter.cleanup()
  }
}, [])

// Check browser support
if (!ScreenCaptureManager.isSupported()) {
  console.error('Screen sharing not supported')
  return
}

// Check permissions
try {
  await startScreenShare()
} catch (error) {
  console.error('Permission denied:', error)
}

// Check browser support
if (!supportsSystemAudio()) {
  console.warn('System audio not supported in this browser')
  // Fallback: microphone only
}

// Check MediaRecorder support
if (!ScreenRecorder.isSupported()) {
  console.error('Recording not supported')
  return
}

// Check supported MIME types
const mimeTypes = ScreenRecorder.getSupportedMimeTypes()
console.log('Supported formats:', mimeTypes)

// Ensure annotations are broadcast to all users
annotator.onAnnotationAdded = (annotation) => {
  // Send via WebSocket/SignalR
  signaling.broadcastAnnotation(annotation)
}

// Receive remote annotations
signaling.onAnnotationReceived = (annotation) => {
  annotator.addRemoteAnnotation(annotation)
}

// Show recording indicator
if (isRecording) {
  return (
    <div className="recording-indicator">
      <span className="pulse" />
      Recording
    </div>
  )
}

// Auto-stop on call end
useEffect(() => {
  if (!activeCall && isScreenSharing) {
    stopScreenShare()
  }
}, [activeCall])

class ScreenCaptureManager {
  static isSupported(): boolean
  startCapture(userId, userName, options): Promise<ScreenShare>
  stopCapture(shareId): void
  stopAllCaptures(): void
  updateQuality(shareId, quality): Promise<void>
  updateFrameRate(shareId, frameRate): Promise<void>
  getVideoSettings(shareId): MediaTrackSettings | null
  isActive(shareId): boolean
  getActiveCount(): number
  cleanup(): void
}

class ScreenAnnotator {
  setTool(tool: AnnotationTool): void
  setColor(color: AnnotationColor): void
  setStrokeWidth(width: number): void
  setFontSize(size: number): void
  setFilled(filled: boolean): void
  undo(): void
  redo(): void
  clear(): void
  addRemoteAnnotation(annotation: Annotation): void
  getAnnotations(): Annotation[]
  cleanup(): void
}

class CursorHighlighter {
  updateCursor(position: CursorPosition): void
  addClick(click: CursorClick): void
  removeCursor(userId: string): void
  clearAllCursors(): void
  setHighlightColor(color: string): void
  setHighlightSize(size: number): void
  setShowUserName(show: boolean): void
  setShowClickEffect(show: boolean): void
  cleanup(): void
}

class ScreenRecorder {
  static isSupported(): boolean
  static getSupportedMimeTypes(): string[]
  static getOptimalMimeType(format): string
  startRecording(stream, options): Promise<void>
  stopRecording(): Promise<Recording>
  pauseRecording(): void
  resumeRecording(): void
  getState(): RecordingState
  destroy(): void
}