Code inline

"use client";

import { useEffect, useRef, useState } from "react";
import type { ComponentProps } from "react";
import "./code-inline.css";

export type CodeInlineProps = ComponentProps<"code"> & {
  /** Adds a copy button. `true` copies the text as shown; a string copies that instead. */
  copy?: boolean | string;
  /** Names the copy button. Defaults to "Copy" and the text. */
  copyLabel?: string;
};

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 CodeInline({ copy = false, copyLabel, className, children, ...rest }: CodeInlineProps) {
  const rootRef = useRef<HTMLSpanElement>(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]);

  const code = (
    <code {...rest} className={["eq-code-inline", className].filter(Boolean).join(" ")}>
      {children}
    </code>
  );

  if (copy === false) return code;

  const shown = typeof children === "string" || typeof children === "number" ? String(children) : undefined;
  const label = copyLabel ?? (shown != null ? `Copy ${shown}` : "Copy");

  async function handleCopy() {
    const text = typeof copy === "string" ? copy : (rootRef.current?.querySelector(".eq-code-inline")?.textContent ?? "");
    let ok = false;
    try {
      if (navigator.clipboard?.writeText) {
        await navigator.clipboard.writeText(text);
        ok = true;
      }
    } catch {
      ok = false;
    }
    if (!ok && rootRef.current) ok = legacyCopy(text, rootRef.current);
    setCopied(ok ? "copied" : "failed");
  }

  return (
    <span ref={rootRef} className="eq-code-inline-group">
      {code}
      {/* A word joiner, so the button never wraps onto a line of its own. */}
      {"⁠"}
      <button
        type="button"
        className="eq-code-inline-copy"
        data-state={copied}
        aria-label={label}
        title={copied === "copied" ? "Copied" : copied === "failed" ? "Copy failed" : "Copy"}
        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>
        ) : copied === "failed" ? (
          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
            <path d="M8 4.5v4M8 11.25v.25" />
          </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-code-inline-sr" role="status">
        {copied === "copied" ? "Copied" : copied === "failed" ? "Copy failed" : ""}
      </span>
    </span>
  );
}