Terminal

"use client";

import { useEffect, useRef, useState } from "react";
import type { ComponentProps, CSSProperties, ReactNode } from "react";
import "./terminal.css";

export type TerminalProps = Omit<ComponentProps<"div">, "title"> & {
  /** Names the session for assistive tech, such as "Install steps". */
  label: string;
  /** A window title shown above the session. */
  title?: ReactNode;
  /** The glyph before every command. Drawn by CSS, so it is never selected or copied. */
  prompt?: string;
};

export type TerminalCommandProps = ComponentProps<"div">;

export type TerminalOutputProps = ComponentProps<"div"> & {
  tone?: "default" | "ok" | "warn" | "danger";
};

const COPIED_MS = 1600;

type CopyState = "idle" | "copied" | "failed";

/** Last resort for browsers without the async clipboard: a throwaway textarea inside the part. */
function legacyCopy(text: string, host: HTMLElement) {
  const active = document.activeElement;
  const area = document.createElement("textarea");
  area.value = text;
  area.setAttribute("readonly", "");
  area.setAttribute("aria-hidden", "true");
  area.style.position = "fixed";
  area.style.inset = "0 auto auto 0";
  area.style.opacity = "0";
  area.style.pointerEvents = "none";
  host.appendChild(area);
  area.select();
  let ok = false;
  try {
    ok = document.execCommand("copy");
  } catch {
    ok = false;
  }
  host.removeChild(area);
  if (active instanceof HTMLElement) active.focus();
  return ok;
}

export function Terminal({ label, title, prompt = "$", className, style, children, ...rest }: TerminalProps) {
  return (
    <div
      role="group"
      aria-label={label}
      {...rest}
      className={["eq-terminal", className].filter(Boolean).join(" ")}
      style={{ "--_prompt": JSON.stringify(prompt), ...style } as CSSProperties}
    >
      {title != null && <div className="eq-terminal-title">{title}</div>}
      <div className="eq-terminal-body">{children}</div>
    </div>
  );
}

export function TerminalCommand({ className, children, ...rest }: TerminalCommandProps) {
  const rowRef = useRef<HTMLDivElement>(null);
  const textRef = useRef<HTMLElement>(null);
  const [copied, setCopied] = useState<CopyState>("idle");

  useEffect(() => {
    if (copied === "idle") return;
    const t = window.setTimeout(() => setCopied("idle"), COPIED_MS);
    return () => window.clearTimeout(t);
  }, [copied]);

  async function handleCopy() {
    const text = textRef.current?.textContent ?? "";
    let ok = false;
    try {
      if (navigator.clipboard?.writeText) {
        await navigator.clipboard.writeText(text);
        ok = true;
      }
    } catch {
      ok = false;
    }
    if (!ok && rowRef.current) ok = legacyCopy(text, rowRef.current);
    setCopied(ok ? "copied" : "failed");
  }

  return (
    <div {...rest} ref={rowRef} className={["eq-terminal-command", className].filter(Boolean).join(" ")}>
      <code ref={textRef} className="eq-terminal-text">
        {children}
      </code>
      <button
        type="button"
        className="eq-terminal-copy"
        data-state={copied}
        aria-label="Copy command"
        title={copied === "copied" ? "Copied" : copied === "failed" ? "Copy failed" : "Copy command"}
        onClick={handleCopy}
      >
        {copied === "copied" ? (
          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M3.5 8.5l3 3 6-7" pathLength={1} />
          </svg>
        ) : (
          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <rect x="5.5" y="5.5" width="8" height="8" rx="1.5" />
            <path d="M10.5 3.5v-.5A1.5 1.5 0 0 0 9 1.5H4A1.5 1.5 0 0 0 2.5 3v5A1.5 1.5 0 0 0 4 9.5h.5" />
          </svg>
        )}
      </button>
      <span className="eq-terminal-sr" role="status">
        {copied === "copied" ? "Copied" : copied === "failed" ? "Copy failed" : ""}
      </span>
    </div>
  );
}

export function TerminalOutput({ tone = "default", className, ...rest }: TerminalOutputProps) {
  return <div {...rest} className={["eq-terminal-output", className].filter(Boolean).join(" ")} data-tone={tone} />;
}