"use client";

import { useRef, useState } from "react";
import { copySetupTokenCommand, SETUP_TOKEN_COMMAND } from "./setup-token-help";
import styles from "./setup.module.css";

export default function SetupTokenHelp({ disabled = false }: { disabled?: boolean }) {
  const dialog = useRef<HTMLDialogElement>(null);
  const trigger = useRef<HTMLButtonElement>(null);
  const commandField = useRef<HTMLTextAreaElement>(null);
  const [copyStatus, setCopyStatus] = useState("");

  const copyCommand = async () => {
    const result = await copySetupTokenCommand(navigator.clipboard, commandField.current);
    setCopyStatus(
      result === "copied"
        ? "Command copied. Paste it into the Magent container console."
        : result === "selected"
          ? "Automatic copying is unavailable. The command is selected; press Ctrl+C (Command+C on Mac), or touch and hold to copy."
          : "Automatic copying is unavailable. Select and copy the command above.",
    );
  };

  return (
    <div className={styles.tokenHelp}>
      <button
        ref={trigger}
        type="button"
        className="ghost-button"
        disabled={disabled}
        aria-haspopup="dialog"
        aria-controls="setup-token-help"
        onClick={() => {
          setCopyStatus("");
          dialog.current?.showModal();
        }}
      >
        Get setup token
      </button>
      <dialog
        ref={dialog}
        id="setup-token-help"
        className={styles.tokenHelpDialog}
        aria-labelledby="setup-token-help-title"
        aria-describedby="setup-token-help-description"
        onClose={() => trigger.current?.focus()}
      >
        <header className={styles.tokenHelpHeading}>
          <h2 id="setup-token-help-title">Get your setup token</h2>
          <button type="button" className="ghost-button" onClick={() => dialog.current?.close()}>
            Close
          </button>
        </header>
        <p id="setup-token-help-description">
          Magent generates a private setup token when a managed installation starts. Retrieve it from your server
          console to create the first administrator.
        </p>
        <ol className={styles.tokenHelpSteps}>
          <li>In Portainer, open Containers and select the healthy Magent container.</li>
          <li>
            Open Console, choose command <code>/bin/ash</code> and user <code>magent</code>, then connect.
          </li>
          <li>Run the command below, then copy its output into the Setup token field on this page.</li>
        </ol>
        <label htmlFor="setup-token-command">Container console command</label>
        <textarea
          ref={commandField}
          id="setup-token-command"
          className={styles.tokenCommand}
          readOnly
          rows={3}
          spellCheck={false}
          value={SETUP_TOKEN_COMMAND}
        />
        <button type="button" onClick={() => void copyCommand()}>
          Copy command
        </button>
        <p role="status" aria-live="polite" className={styles.copyStatus}>
          {copyStatus}
        </p>
        <p>
          Keep the token private. Anyone with it and access to this installation can create the first administrator. The
          command stops returning it once an administrator exists.
        </p>
        <p>
          For a manual deployment, use the <code>SETUP_TOKEN</code> from your deployment environment.
        </p>
      </dialog>
    </div>
  );
}