Key value

"use client";

import { useEffect, useRef, useState } from "react";
import type { ComponentProps, ReactNode } from "react";
import "./key-value.css";

export type KeyValueProps = ComponentProps<"dl"> & {
  /** Names the list for assistive tech, such as "Deployment details". */
  label?: string;
  /** Term beside value, term above value, or stacked pairs in columns. */
  layout?: "rows" | "stacked" | "grid";
  /** Tighter spacing for side panels and inspectors. */
  dense?: boolean;
};

export type KeyValueItemProps = ComponentProps<"div"> & {
  term: ReactNode;
  /** Shows a copy button: `true` copies the value as shown in full, a string copies that text instead. */
  copy?: string | true;
  /** Sets the value in the monospace face, for IDs, hashes and paths. */
  mono?: boolean;
  /** Makes the value a link. */
  href?: 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;
}

/** The whole text stays in the DOM; only the head shrinks, so the end of an ID or URL stays readable. */
function middle(text: string): ReactNode {
  if (text.length < 16) return <span className="eq-key-value-head">{text}</span>;
  const tail = Math.min(12, Math.floor(text.length / 3));
  return (
    <>
      <span className="eq-key-value-head">{text.slice(0, -tail)}</span>
      <span className="eq-key-value-tail">{text.slice(-tail)}</span>
    </>
  );
}

export function KeyValue({ label, layout = "rows", dense = false, className, ...rest }: KeyValueProps) {
  return (
    <dl
      aria-label={label}
      {...rest}
      className={["eq-key-value", className].filter(Boolean).join(" ")}
      data-layout={layout}
      data-dense={dense || undefined}
    />
  );
}

export function KeyValueItem({ term, copy, mono = false, href, className, children, ...rest }: KeyValueItemProps) {
  const rootRef = useRef<HTMLDivElement>(null);
  const valueRef = useRef<HTMLElement>(null);
  const [copied, setCopied] = useState<CopyState>("idle");
  const full = typeof children === "string" || typeof children === "number" ? String(children) : null;
  const content = full != null ? middle(full) : children;

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

  async function handleCopy() {
    const text = typeof copy === "string" ? copy : (full ?? valueRef.current?.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");
  }

  const shared = {
    className: "eq-key-value-text",
    "data-mono": mono || undefined,
    title: full ?? undefined,
  };

  return (
    <div {...rest} ref={rootRef} className={["eq-key-value-item", className].filter(Boolean).join(" ")}>
      <dt className="eq-key-value-term">{term}</dt>
      <dd className="eq-key-value-value">
        {href ? (
          <a {...shared} ref={(node) => { valueRef.current = node; }} href={href}>
            {content}
          </a>
        ) : (
          <span {...shared} ref={(node) => { valueRef.current = node; }}>
            {content}
          </span>
        )}
        {copy != null && (
          <button
            type="button"
            className="eq-key-value-copy"
            data-state={copied}
            aria-label={typeof term === "string" ? `Copy ${term.toLowerCase()}` : "Copy value"}
            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>
            ) : (
              <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>
        )}
        {copy != null && (
          <span className="eq-key-value-sr" role="status">
            {copied === "copied" ? "Copied" : copied === "failed" ? "Copy failed" : ""}
          </span>
        )}
      </dd>
    </div>
  );
}