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

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

  const handleStart = async () => {
    await startScreenShare({
      quality: '1080p',
      frameRate: 30,
      captureSystemAudio: true,
      captureCursor: true,
    })
  }

  return (
    <div>
      {isScreenSharing ? (
        <button onClick={stopScreenShare}>Stop Sharing</button>
      ) : (
        <button onClick={handleStart}>Share Screen</button>
      )}
      {screenStream && (
        <video
          ref={(video) => {
            if (video) video.srcObject = screenStream
          }}
          autoPlay
        />
      )}
    </div>
  )
}

import { useAnnotations } from '@/hooks/use-annotations'
import { useRef, useEffect } from 'react'

function AnnotationOverlay() {
  const canvasRef = useRef<HTMLCanvasElement>(null)

  const {
    currentTool,
    currentColor,
    setTool,
    setColor,
    undo,
    redo,
    clear,
    canUndo,
    canRedo,
  } = useAnnotations({
    canvas: canvasRef.current,
    userId: 'user-123',
    userName: 'John Doe',
    onAnnotationAdded: (annotation) => {
      // Broadcast to other users
      broadcastAnnotation(annotation)
    },
  })

  return (
    <div className="relative">
      <canvas ref={canvasRef} className="absolute inset-0" />
      <div className="toolbar">
        <button onClick={() => setTool('pen')}>Pen</button>
        <button onClick={() => setTool('arrow')}>Arrow</button>
        <button onClick={() => setTool('rectangle')}>Rectangle</button>
        <button onClick={() => setTool('text')}>Text</button>
        <button onClick={() => setTool('eraser')}>Eraser</button>
        <input
          type="color"
          value={currentColor}
          onChange={(e) => setColor(e.target.value)}
        />
        <button onClick={undo} disabled={!canUndo}>
          Undo
        </button>
        <button onClick={redo} disabled={!canRedo}>
          Redo
        </button>
        <button onClick={clear}>Clear</button>
      </div>
    </div>
  )
}

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

function RecordingControls() {
  const { screenStream } = useScreenShare()
  const {
    isRecording,
    isPaused,
    duration,
    size,
    recordings,
    startRecording,
    stopRecording,
    pauseRecording,
    resumeRecording,
    downloadRecording,
    formatDuration,
    formatFileSize,
  } = useScreenRecording()

  const handleStart = async () => {
    if (screenStream) {
      await startRecording(screenStream, {
        format: 'webm',
        quality: 'high',
        includeWebcam: true,
        webcamSize: 'small',
        webcamPosition: 'bottom-right',
      })
    }
  }

  const handleStop = async () => {
    const recording = await stopRecording()
    if (recording) {
      console.log('Recording saved:', recording.url)
    }
  }

  return (
    <div>
      <div className="controls">
        {!isRecording ? (
          <button onClick={handleStart}>Start Recording</button>
        ) : (
          <>
            <button onClick={handleStop}>Stop</button>
            {isPaused ? (
              <button onClick={resumeRecording}>Resume</button>
            ) : (
              <button onClick={pauseRecording}>Pause</button>
            )}
          </>
        )}
      </div>

      {isRecording && (
        <div className="status">
          Duration: {formatDuration(duration)} | Size: {formatFileSize(size)}
        </div>
      )}

      <div className="recordings">
        <h3>Recordings</h3>
        {recordings.map((recording) => (
          <div key={recording.id}>
            <span>{formatDuration(recording.duration)}</span>
            <span>{formatFileSize(recording.size)}</span>
            <button onClick={() => downloadRecording(recording)}>Download</button>
          </div>
        ))}
      </div>
    </div>
  )
}

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

function CallInterface() {
  const {
    isScreenSharing,
    supportsSystemAudio,
    activeShares,
    startScreenShare,
    stopScreenShare,
    updateQuality,
    updateFrameRate,
  } = useScreenShare()

  const currentShare = activeShares[0]

  return (
    <div>
      <ScreenShareControls
        isSharing={isScreenSharing}
        supportsSystemAudio={supportsSystemAudio}
        hasAudio={currentShare?.hasAudio}
        quality="1080p"
        frameRate={30}
        shareType={currentShare?.type}
        onStartShare={startScreenShare}
        onStopShare={stopScreenShare}
        onQualityChange={updateQuality}
        onFrameRateChange={updateFrameRate}
      />

      {isScreenSharing && currentShare && (
        <video
          ref={(video) => {
            if (video) video.srcObject = currentShare.stream
          }}
          autoPlay
          className="screen-share-video"
        />
      )}
    </div>
  )
}

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

// Get downlink speed from Network Information API
const downlink = navigator.connection?.downlink ?? 10 // Mbps

const quality = getOptimalQuality(downlink)
// Returns: '4k' (≥20 Mbps), '1080p' (≥10 Mbps), '720p' (≥5 Mbps), or 'auto'

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

function VideoCall() {
  const voiceCall = useVoiceCall({
    userId: 'user-123',
    userName: 'John Doe',
  })

  const screenShare = useScreenShare({
    userId: 'user-123',
    userName: 'John Doe',
  })

  const handleStartScreenShare = async () => {
    const stream = await screenShare.startScreenShare({
      quality: '1080p',
      captureSystemAudio: true,
    })

    if (stream && voiceCall.isInCall) {
      // Add screen share tracks to peer connection
      // (handled automatically if peerConnection prop is passed)
    }
  }

  return (
    <div>
      {/* Call controls */}
      {voiceCall.isInCall && (
        <ScreenShareControls
          isSharing={screenShare.isScreenSharing}
          supportsSystemAudio={screenShare.supportsSystemAudio}
          onStartShare={handleStartScreenShare}
          onStopShare={screenShare.stopScreenShare}
        />
      )}
    </div>
  )
}

import { useScreenShare } from '@/hooks/use-screen-share'
import type { PeerConnectionManager } from '@/lib/webrtc/peer-connection'

function ScreenShareSender({ peerConnection }: { peerConnection: PeerConnectionManager }) {
  const { startScreenShare, stopScreenShare } = useScreenShare({
    peerConnection, // Pass peer connection for auto-integration
    onScreenShareStarted: (stream) => {
      // Tracks automatically added to peer connection
      console.log('Screen share started')
    },
  })

  return (
    <button onClick={() => startScreenShare()}>
      Share Screen
    </button>
  )
}

// Peer connection automatically fires onTrack event
peerConnection.on('track', (event) => {
  const stream = event.streams[0]
  const track = event.track

  if (track.kind === 'video') {
    // Check if this is a screen share track
    const settings = track.getSettings()
    if (settings.displaySurface) {
      // This is a screen share
      videoElement.srcObject = stream
    }
  }
})

useEffect(() => {
  return () => {
    // Clean up on unmount
    stopScreenShare()
    stopRecording()
    clearAnnotations()
  }
}, [])