// content.js
window.cameraId = "purple-camera";

function createDraggableCamera() {
  const wrapper = document.createElement('div');
  wrapper.id = "camera-wrapper";
  wrapper.setAttribute('style', `
    position: fixed;
    width: 200px;
    height: 200px;
    top: 20px;
    right: 20px;
    z-index: 999999;
    border-radius: 100%;
    cursor: move;
    user-select: none;
    transition: background 0.2s;
    &:hover {
      background: rgba(0, 0, 0, 0.1);
    }
  `);

  const camera = document.createElement("iframe");
  camera.id = cameraId;
  camera.setAttribute("style", `
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 2px solid rgba(168, 29, 203, 0.5);
    background: black;
    pointer-events: none;
  `);
  camera.setAttribute("allow", "camera; microphone");
  camera.src = chrome.runtime.getURL("camera.html");
  
  wrapper.appendChild(camera);
  document.body.appendChild(wrapper);

  let isDragging = false;
  let currentX;
  let currentY;
  let initialX;
  let initialY;

  wrapper.addEventListener('mousedown', e => {
    isDragging = true;
    wrapper.style.transition = 'none';
    initialX = e.clientX - wrapper.offsetLeft;
    initialY = e.clientY - wrapper.offsetTop;
  });

  document.addEventListener('mousemove', e => {
    if (!isDragging) return;

    e.preventDefault();
    currentX = e.clientX - initialX;
    currentY = e.clientY - initialY;

    // Keep camera within viewport bounds
    const maxX = window.innerWidth - wrapper.offsetWidth;
    const maxY = window.innerHeight - wrapper.offsetHeight;
    
    currentX = Math.min(Math.max(0, currentX), maxX);
    currentY = Math.min(Math.max(0, currentY), maxY);

    wrapper.style.left = `${currentX}px`;
    wrapper.style.top = `${currentY}px`;
  });

  document.addEventListener('mouseup', () => {
    isDragging = false;
    wrapper.style.transition = 'background 0.2s';
  });

  // Handle window resize
  window.addEventListener('resize', () => {
    const maxX = window.innerWidth - wrapper.offsetWidth;
    const maxY = window.innerHeight - wrapper.offsetHeight;
    
    wrapper.style.left = `${Math.min(parseInt(wrapper.style.left), maxX)}px`;
    wrapper.style.top = `${Math.min(parseInt(wrapper.style.top), maxY)}px`;
  });
}

// Initialize camera if it doesn't exist
if (!document.getElementById(cameraId)) {
  createDraggableCamera();
}