// Development-only inspection surface for the live combat-summon renderer.
import { useEffect, useRef, useState } from "react";
import { createRoot } from "react-dom/client";
import { Canvas } from "@react-three/fiber";
import { Grid, OrbitControls } from "@react-three/drei";
import { preloadAbilityCatalogsForClasses } from "../game/abilityCatalog";
import { useCombatStore } from "../game/combatStore";
import { setMobPosition } from "../game/mobRuntimeRegistry";
import { CombatSummonPopulation } from "../scene/CombatSummonPopulation";
import { preloadShadowfiendMedia } from "../scene/shadowfiendMedia";

function Preview() {
  const [status, setStatus] = useState("Preparing Shadowfiend media…");
  const canvas = useRef<HTMLCanvasElement | null>(null);
  useEffect(() => {
    void Promise.all([
      preloadAbilityCatalogsForClasses(["priest"]),
      preloadShadowfiendMedia().catch(() => null),
    ]).then(() => {
      const combat = useCombatStore.getState();
      combat.initializeCharacter({ classId: "priest", level: 80 });
      combat.registerMob("shadowfiend-preview-target", {
        name: "Target", level: 80, maxHealth: 100_000, xpReward: 0,
      });
      setMobPosition("shadowfiend-preview-target", [3, 0, 0]);
      combat.selectMob("shadowfiend-preview-target");
      const result = combat.castAbility("wow335-priest-shadowfiend", [0, 0, 0], 1_000);
      setStatus(result.ok ? "Shadowfiend summon active" : `Cast failed: ${result.reason}`);
    }).catch((error) => setStatus(`Catalog failed: ${String(error)}`));
  }, []);
  return <>
    <div style={{ padding: 16, display: "flex", alignItems: "center", gap: 16 }}>
      <span>{status}</span>
      <button onClick={() => {
        if (!canvas.current) return;
        const link = document.createElement("a");
        link.download = "shadowfiend-summon-preview.png";
        link.href = canvas.current.toDataURL("image/png");
        link.click();
      }}>Save screenshot</button>
    </div>
    <div style={{ height: "calc(100vh - 55px)" }}>
      <Canvas camera={{ position: [4, 3, 5], fov: 50 }} gl={{ preserveDrawingBuffer: true }}
        onCreated={({ gl }) => { canvas.current = gl.domElement; }}>
        <color attach="background" args={["#0b121b"]} />
        <ambientLight intensity={1} />
        <Grid args={[20, 20]} cellColor="#304051" sectionColor="#4a637d" />
        <CombatSummonPopulation active />
        <OrbitControls target={[0, 0.9, 0]} />
      </Canvas>
    </div>
  </>;
}

if (import.meta.env.DEV) createRoot(document.getElementById("root")!).render(<Preview />);