let cameraStream = null;
let currentMode = 'camera';
let avatarData = null;

const runCode = async () => {
  const cameraElement = document.querySelector("#camera");

  const startCamera = async () => {
    // Check permissions first
    const permissions = await navigator.permissions.query({
      name: "camera",
    });

    if (permissions.state === "prompt") {
      await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
      return;
    }

    if (permissions.state === "denied") {
      alert("Camera permissions denied");
      return;
    }

    // Only proceed with camera if we're in camera mode
    if (currentMode === 'avatar') {
      displayAvatar();
      return;
    }

    const videoElement = document.createElement("video");
    videoElement.setAttribute("id", "cam");
    videoElement.setAttribute(
      "style",
      `
      height: 200px;
      border-radius: 100px;
      transform: scaleX(-1);
      `
    );
    videoElement.setAttribute("autoplay", true);
    videoElement.setAttribute("muted", true);

    try {
      cameraStream = await navigator.mediaDevices.getUserMedia({
        audio: false,
        video: true,
      });

      videoElement.srcObject = cameraStream;
      
      // Clear any existing content
      cameraElement.innerHTML = '';
      cameraElement.appendChild(videoElement);
    } catch (err) {
      console.error("Error accessing camera:", err);
      // Fallback to avatar if camera fails
      displayAvatar();
    }
  };

  const displayAvatar = () => {
    // Stop any existing camera stream
    if (cameraStream) {
      stopCamera();
    }

    const avatarImg = document.createElement("img");
    avatarImg.setAttribute("id", "avatar");
    avatarImg.setAttribute(
      "style",
      `
      height: 200px;
      width: 200px;
      border-radius: 100px;
      object-fit: cover;
      `
    );
    avatarImg.src = avatarData || 'default-avatar.png';
    
    // Clear any existing content
    cameraElement.innerHTML = '';
    cameraElement.appendChild(avatarImg);
  };

  const stopCamera = () => {
    if (cameraStream) {
      cameraStream.getTracks().forEach(track => {
        track.stop();
        console.log("Camera track stopped:", track);
      });
      cameraStream = null;

      const cameraElement = document.getElementById("purple-camera");
      if (cameraElement) {
        cameraElement.remove();
      }
      const videoElement = document.getElementById("cam");
      if (videoElement) {
        videoElement.remove();
      }
    }
  };

  // Message listeners for camera/avatar control
  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.type === "stop-camera") {
      stopCamera();
      sendResponse({ status: "camera-stopped" });
    }
    else if (message.type === "mode-change") {
      currentMode = message.mode;
      if (currentMode === 'camera') {
        startCamera();
      } else {
        displayAvatar();
      }
      sendResponse({ status: "mode-changed" });
    }
    else if (message.type === "avatar-update") {
      avatarData = message.avatarData;
      if (currentMode === 'avatar') {
        displayAvatar();
      }
      sendResponse({ status: "avatar-updated" });
    }
  });

  // Initialize based on saved mode
  chrome.storage.local.get(['mode', 'avatarData'], function(data) {
    currentMode = data.mode || 'camera';
    avatarData = data.avatarData;
    
    if (currentMode === 'camera') {
      startCamera();
    } else {
      displayAvatar();
    }
  });
};

runCode();