export class ScreenShareClient {
  private peer: Peer | null = null;
  private mediaConnection: MediaConnection | null = null;
  private state: ScreenShareState = "idle";
  private reconnectAttempts: number = 0;

  constructor(options: ScreenShareClientOptions) {
    this.sessionId = options.sessionId;
    this.onEvent = options.onEvent;
    this.maxReconnectAttempts = options.maxReconnectAttempts ?? 3;
  }

  // Solver initializes as viewer, waiting for incoming stream
  async initializeAsViewer(): Promise<string> {
    this.setState("initializing");
    const peerId = generatePeerId(this.sessionId);
    
    this.peer = new Peer(peerId);
    this.peer.on("call", (call) => {
      call.answer(); // Accept incoming stream
      call.on("stream", (remoteStream) => {
        this.onEvent({ type: "stream_received", stream: remoteStream });
      });
    });
    
    return peerId;
  }

  // Customer initializes as sharer, sending their screen
  async initializeAsSharer(viewerPeerId: string): Promise<void> {
    this.localStream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: false,
    });
    
    this.peer = new Peer(generatePeerId(this.sessionId));
    this.mediaConnection = this.peer.call(viewerPeerId, this.localStream);
  }
}

export const screenShareRouter = router({
  // Solver requests screen sharing - stores their peer ID
  requestScreenShare: protectedProcedure
    .input(z.object({
      sessionId: z.string().uuid(),
      solverPeerId: z.string().min(1).max(255),
    }))
    .mutation(async ({ input, ctx }) => {
      const screenShareId = crypto.randomUUID();
      screenShareSessions.set(input.sessionId, {
        id: screenShareId,
        peerId: input.solverPeerId,
        status: "waiting",
        createdAt: new Date(),
      });
      return { screenShareId, shareLink: `/screen-share/${input.sessionId}` };
    }),

  // Customer retrieves solver's peer ID to connect
  getScreenShare: publicProcedure
    .input(z.object({ sessionId: z.string().uuid() }))
    .query(async ({ input }) => {
      return screenShareSessions.get(input.sessionId) ?? null;
    }),

  // Update status as connection progresses
  updateStatus: publicProcedure
    .input(z.object({
      screenShareId: z.string().uuid(),
      status: z.enum(["connecting", "active", "ended", "failed"]),
    }))
    .mutation(async ({ input }) => {
      // Update session status and timestamps
    }),
});

export function ScreenShareRequest({
  sessionId,
  customerName,
  onStreamReceived,
}: ScreenShareRequestProps) {
  const [state, setState] = useState<ScreenShareState>("idle");
  const [shareLink, setShareLink] = useState<string | null>(null);
  const clientRef = useRef<ScreenShareClient | null>(null);

  const handleRequestShare = async () => {
    const client = new ScreenShareClient({
      sessionId,
      onEvent: handleEvent,
    });
    
    const viewerPeerId = await client.initializeAsViewer();
    await requestScreenShare.mutateAsync({ sessionId, solverPeerId: viewerPeerId });
    
    setShareLink(`${window.location.origin}/screen-share/${sessionId}`);
  };

  return (
    <div>
      <StatusBadge state={state} />
      {canRequest && (
        <Button onClick={handleRequestShare}>
          Request Screen Share
        </Button>
      )}
      {shareLink && (
        <div>
          <span>{shareLink}</span>
          <Button onClick={handleCopyLink}>Copy</Button>
        </div>
      )}
    </div>
  );
}

export function ScreenViewer({ stream, onEnd }: ScreenViewerProps) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const [isFullscreen, setIsFullscreen] = useState(false);

  useEffect(() => {
    if (videoRef.current && stream) {
      videoRef.current.srcObject = stream;
    }
  }, [stream]);

  return (
    <div>
      <video
        ref={videoRef}
        autoPlay
        playsInline
        muted
        className="w-full rounded-lg"
      />
      <div className="flex gap-2">
        <Button onClick={toggleFullscreen}>
          {isFullscreen ? <Minimize2 /> : <Maximize2 />}
        </Button>
        <Button onClick={onEnd} variant="destructive">
          End Share
        </Button>
      </div>
    </div>
  );
}

export default function CustomerScreenSharePage() {
  const { sessionId } = useParams();
  const [state, setState] = useState<ScreenShareState>("idle");
  
  // Fetch solver's peer ID
  const { data: screenShare } = trpc.screenShare.getScreenShare.useQuery(
    { sessionId },
    { refetchInterval: state === "idle" ? 5000 : false }
  );

  const startSharing = async () => {
    const client = new ScreenShareClient({ sessionId, onEvent: handleEvent });
    await client.initializeAsSharer(screenShare.peerId);
  };

  return (
    <div className="flex flex-col items-center p-6">
      <Monitor className="h-24 w-24" />
      <h1>Share Your Screen</h1>
      
      <div className="text-muted-foreground">
        <ShieldCheck /> Your solver can only see what you choose to share.
      </div>
      
      <Button onClick={startSharing} className="py-6 text-lg">
        Start Sharing My Screen
      </Button>
    </div>
  );
}

const ERROR_MESSAGES: Record<string, string> = {
  NotAllowedError: "Screen share permission was denied. Please allow access in your browser settings.",
  NotFoundError: "No screen or window is available to share. Please try again.",
  NotSupportedError: "Your browser doesn't support screen sharing. Please use Chrome, Firefox, or Edge.",
  "peer-unavailable": "The solver's connection is unavailable. Please wait and try again.",
  network: "Network connection issue. Please check your internet connection and try again.",
};

// Determine if error can be recovered via reconnection
isRecoverableError(error: Error): boolean {
  const RECOVERABLE = ["network", "disconnected", "socket-closed"];
  return RECOVERABLE.some(e => error.message.includes(e));
}

// Automatic reconnection with exponential backoff
attemptReconnect(): void {
  this.reconnectAttempts++;
  if (this.reconnectAttempts > this.maxReconnectAttempts) {
    this.onEvent({ type: "reconnect_failed" });
    return;
  }
  this.onEvent({ 
    type: "reconnecting", 
    attempt: this.reconnectAttempts,
    maxAttempts: this.maxReconnectAttempts 
  });
  this.peer?.reconnect();
}

# Run all screen share tests
bun run test screen-share ScreenShareRequest ScreenViewer