InkNote/frontend/src/ui/NameDialog.jsx

import { useEffect, useMemo, useRef, useState } from "react";
import { useBackdropClose } from "./backdrop";

/**
 * Asking for one name.
 *
 * A real dialog rather than `window.prompt`, for the same reasons the link
 * dialog is one: the browser's box cannot be styled, cannot be reached by the
 * tests, and on a phone it arrives as a system alert with the app greyed out
 * behind it.
 *
 * Deliberately small. Naming a chapter is one field and two buttons, and
 * anything more would be a form.
 *
 * The one exception is the colour, offered when `colors` is given: it belongs to
 * the same act. Making a chapter and then having to right-click it to say which
 * one it is meant two steps for one decision.
 */
export function NameDialog({
  title,
  value = "",
  label = "Name",
  confirmLabel = "Save",
  colors,
  color: initialColor = null,
  onSave,
  onClose,
  dark,
}) {
  const [name, setName] = useState(value);
  const [color, setColor] = useState(initialColor);
  const backdrop = useBackdropClose(onClose);
  const inputRef = useRef(null);

  const T = useMemo(
    () => ({
      bg: dark ? "#161b22" : "#fff",
      border: dark ? "#30363d" : "#d0d7de",
      text: dark ? "#e6edf3" : "#1f2328",
      muted: dark ? "#8b949e" : "#656d76",
      accent: dark ? "#388bfd" : "#0969da",
      field: dark ? "#0d1117" : "#f6f8fa",
    }),
    [dark]
  );

  useEffect(() => {
    inputRef.current?.focus();
    inputRef.current?.select();
  }, []);

  const ready = !!name.trim();

  const save = () => {
    if (!ready) return;
    onSave(name.trim(), color);
    onClose();
  };

  return (
    <div
      data-name-dialog
      {...backdrop}
      style={{
        position: "fixed",
        inset: 0,
        background: "rgba(0,0,0,0.5)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        zIndex: 4000,
        padding: 16,
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: "100%",
          maxWidth: 380,
          background: T.bg,
          border: `1px solid ${T.border}`,
          borderRadius: 16,
          padding: 22,
          fontFamily: "'DM Sans',sans-serif",
        }}
      >
        <h3 style={{ margin: "0 0 14px", fontSize: 16, fontWeight: 700, color: T.text }}>{title}</h3>
        <input
          ref={inputRef}
          value={name}
          onChange={(e) => setName(e.target.value)}
          aria-label={label}
          placeholder={label}
          onKeyDown={(e) => {
            if (e.key === "Enter") save();
            if (e.key === "Escape") onClose();
          }}
          style={{
            width: "100%",
            padding: "10px 14px",
            borderRadius: 10,
            border: `1px solid ${T.border}`,
            background: T.field,
            color: T.text,
            fontSize: 14,
            outline: "none",
            boxSizing: "border-box",
          }}
        />
        {colors?.length > 0 && (
          <div style={{ marginTop: 16 }}>
            <div style={{ fontSize: 11.5, color: T.muted, fontWeight: 600, marginBottom: 8 }}>Colour</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {[{ label: "None", value: null }, ...colors].map((c) => {
                const picked = (c.value ?? null) === (color ?? null);
                return (
                  <button
                    key={c.label}
                    type="button"
                    onClick={() => setColor(c.value ?? null)}
                    title={c.label}
                    aria-label={c.label}
                    aria-pressed={picked}
                    data-colour-option={c.value ?? "none"}
                    style={{
                      width: 28,
                      height: 28,
                      borderRadius: 9,
                      cursor: "pointer",
                      // The ring, not a tick: a tick over a dark swatch is
                      // unreadable and over a light one it is the only thing seen.
                      border: picked ? `2px solid ${T.text}` : `1px solid ${T.border}`,
                      background: c.value ?? "transparent",
                      color: T.muted,
                      fontSize: 11,
                      lineHeight: 1,
                    }}
                  >
                    {c.value ? "" : "—"}
                  </button>
                );
              })}
            </div>
          </div>
        )}
        <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 18 }}>
          <button
            onClick={onClose}
            style={{
              padding: "8px 16px",
              borderRadius: 10,
              border: `1px solid ${T.border}`,
              background: "transparent",
              color: T.text,
              cursor: "pointer",
              fontSize: 13,
            }}
          >
            Cancel
          </button>
          <button
            onClick={save}
            disabled={!ready}
            style={{
              padding: "8px 18px",
              borderRadius: 10,
              border: "none",
              background: ready ? T.accent : T.border,
              color: "#fff",
              cursor: ready ? "pointer" : "default",
              fontSize: 13,
              fontWeight: 600,
            }}
          >
            {confirmLabel}
          </button>
        </div>
      </div>
    </div>
  );
}