index.js

require("dotenv").config();
const express = require("express");
const fetch = require("node-fetch");
const app = express();

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

const CODESANDBOX_API = "https://api.codesandbox.io/graphql";
const BEARER_TOKEN = process.env.CODESANDBOX_TOKEN;

const querySandboxes = `
query {
  me {
    sandboxes {
      nodes {
        id
        title
        createdAt
      }
    }
  }
}
`;

const createSandboxMutation = `
mutation {
  createSandbox(input: { title: "New Sandbox from API" }) {
    sandbox {
      id
      title
    }
  }
}
`;

async function graphqlRequest(query) {
  const res = await fetch(CODESANDBOX_API, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${BEARER_TOKEN}`
    },
    body: JSON.stringify({ query })
  });
  const data = await res.json();
  return data;
}

app.get("/", async (req, res) => {
  const data = await graphqlRequest(querySandboxes);
  const sandboxes = data?.data?.me?.sandboxes?.nodes || [];

  let html = `
    <h2>🧪 CodeSandbox Manager</h2>
    <form action="/create" method="POST">
      <button>Create New Sandbox</button>
    </form>
    <h3>📦 Existing Sandboxes:</h3>
    <ul>
  `;

  sandboxes.forEach(s => {
    html += `<li><b>${s.title}</b> (ID: ${s.id}) — Created: ${new Date(s.createdAt).toLocaleString()}</li>`;
  });

  html += "</ul>";
  res.send(html);
});

app.post("/create", async (req, res) => {
  const result = await graphqlRequest(createSandboxMutation);
  res.redirect("/");
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`CodeSandbox Manager UI running at http://localhost:${PORT}`);
});