// <SetupAssistant> - the start page's first-time helper: a paperclip with a
// speech bubble offering to set up an agent. It renders only while the swarm
// has no `ruth` (see `ruthIsMissing`), and a click opens the create-agent
// form with her name filled in and `manage_root_agent` checked on top of the
// default permissions (`RUTH_EXTRA_PERMISSIONS`); the form already selects
// the only hive. No dismiss: once ruth exists it goes away.
import { useEffect, useState } from "preact/hooks";
import { Dialog } from "../ui/dialog/Dialog.js";
import {
  RUTH_EXTRA_PERMISSIONS,
  ruthIsMissing,
} from "../shell/ruth-missing.js";
import { CreateAgentForm } from "./CreateAgentForm.js";
import "./SetupAssistant.css";

export function SetupAssistant() {
  const [missing, setMissing] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    let cancelled = false;
    void ruthIsMissing((url) => fetch(url)).then((m) => {
      if (!cancelled) setMissing(m);
    });
    return () => {
      cancelled = true;
    };
  }, []);

  if (!missing) return null;
  return (
    <>
      <button
        type="button"
        class="setup-assistant"
        onClick={() => setOpen(true)}
      >
        <span class="setup-assistant-bubble">
          want to help me set up an agent? click here
        </span>
        <svg
          class="setup-assistant-clip"
          viewBox="0 0 40 80"
          aria-hidden="true"
        >
          <path
            d="M27 22v34a9 9 0 0 1-18 0V16a6 6 0 0 1 12 0v36a3 3 0 0 1-6 0V24"
            fill="none"
            stroke="currentColor"
            stroke-width="3.5"
            stroke-linecap="round"
          />
          <circle
            cx="13"
            cy="38"
            r="3.2"
            fill="var(--bg)"
            stroke="currentColor"
          />
          <circle
            cx="23"
            cy="38"
            r="3.2"
            fill="var(--bg)"
            stroke="currentColor"
          />
          <circle cx="13.6" cy="38.4" r="1.2" fill="currentColor" />
          <circle cx="23.6" cy="38.4" r="1.2" fill="currentColor" />
        </svg>
      </button>
      <Dialog
        open={open}
        onClose={() => setOpen(false)}
        label="create agent"
        plain
      >
        <CreateAgentForm
          initialName="ruth"
          extraPermissions={RUTH_EXTRA_PERMISSIONS}
          onClose={() => setOpen(false)}
        />
      </Dialog>
    </>
  );
}