// TurboWarp-inspired Editor (Basic Version)
// Assumes a basic custom block-based editor and simple runtime simulation

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";

export default function Editor() {
  const [sprites, setSprites] = useState([{ name: "Sprite1", code: "move 10" }]);
  const [selectedSprite, setSelectedSprite] = useState(0);
  const [projectOutput, setProjectOutput] = useState("Idle...");

  const addSprite = () => {
    const name = `Sprite${sprites.length + 1}`;
    setSprites([...sprites, { name, code: "" }]);
    setSelectedSprite(sprites.length);
  };

  const updateCode = (code) => {
    const updated = [...sprites];
    updated[selectedSprite].code = code;
    setSprites(updated);
  };

  const runProject = () => {
    const output = sprites.map((s) => `${s.name}: ${s.code}`).join("\n");
    setProjectOutput(output);
  };

  return (
    <div className="flex h-screen w-screen overflow-hidden bg-gray-900 text-white">
      {/* Left Panel */}
      <div className="w-1/2 p-4 space-y-4 bg-gray-800">
        <div className="flex items-center justify-between">
          <h2 className="text-xl font-bold">Sprites</h2>
          <Button onClick={addSprite}>Add Sprite</Button>
        </div>
        <div className="space-y-2">
          {sprites.map((sprite, index) => (
            <Button
              key={index}
              variant={selectedSprite === index ? "default" : "secondary"}
              className="w-full text-left"
              onClick={() => setSelectedSprite(index)}
            >
              {sprite.name}
            </Button>
          ))}
        </div>
        <div>
          <h3 className="mt-4 text-lg font-semibold">Code Editor</h3>
          <textarea
            className="w-full h-48 p-2 bg-gray-700 rounded resize-none"
            value={sprites[selectedSprite].code}
            onChange={(e) => updateCode(e.target.value)}
          />
        </div>
        <Button className="mt-2" onClick={runProject}>
          Run
        </Button>
      </div>

      {/* Right Panel */}
      <div className="w-1/2 p-4 flex flex-col items-center">
        <Card className="w-full aspect-video bg-black text-green-400 flex items-center justify-center">
          <CardContent className="text-sm p-4 whitespace-pre-wrap">
            {projectOutput}
          </CardContent>
        </Card>
        <div className="mt-4 w-full">
          <h3 className="text-lg font-semibold">Sprites</h3>
          <div className="grid grid-cols-4 gap-2 mt-2">
            {sprites.map((sprite, i) => (
              <div key={i} className="p-2 bg-gray-700 rounded text-center">
                {sprite.name}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}