import {
  LitElement,
  html,
  css,
} from "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js";
import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js";

// --- 1. Define the Game Viewport Component using Lit ---
class GameViewport extends LitElement {
  static styles = css`
    :host {
      display: block;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }
  `;

  firstUpdated() {
    // Initialize Three.js scene after the component renders
    this.initThreeJS();
  }

  initThreeJS() {
    const container = this.shadowRoot.getElementById("canvas-container");
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x0a0b10); // Void Black

    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    const renderer = new THREE.WebGLRenderer({ antialias: true }); // Enable AA for smoother edges

    // Set initial size
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);

    // Add a rotating Voxel (Cube)
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({
      color: 0x00f0ff,
      wireframe: true,
    });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    const animate = () => {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    };
    animate();

    // Handle Resize
    window.addEventListener("resize", () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
  }

  render() {
    return html` <div id="canvas-container"></div> `;
  }
}

// Register the web component
customElements.define("game-viewport", GameViewport);