"use client";

import Link from "next/link";
import { useState } from "react";

export default function Home() {
  const [starting, setStarting] = useState(false);
  const [roomUrl, setRoomUrl] = useState();

  async function start() {
    setStarting(true);

    const apiUrl = `${
      window.location.protocol === "https:" ? "https" : "http"
    }:${window.location.host}`;

    const resp = await fetch(`${process.env.API_URL || apiUrl}/start`, {
      method: "POST",
      mode: "cors",
      cache: "no-cache",
      credentials: "same-origin",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({}),
    });

    const data = await resp.json();

    setRoomUrl(data.room_url);
  }

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      {!starting ? (
        <button
          onClick={() => start()}
          disabled={starting}
          className="bg-white text-black rounded-xl p-4 px-6"
        >
          Connect
        </button>
      ) : (
        <div>
          {roomUrl ? (
            <Link href={roomUrl}>Open Room</Link>
          ) : (
            "Waiting for bot to load..."
          )}
        </div>
      )}
    </main>
  );
}