// Reusable in-place edit primitives.
// Click → becomes input → blur or Enter saves → Esc cancels.

function EditableText({ value, onSave, placeholder, multiline, className, style, ariaLabel, parse }){
  const [editing, setEditing] = React.useState(false);
  const [draft, setDraft] = React.useState(value || "");
  const ref = React.useRef(null);

  React.useEffect(()=>{ setDraft(value || ""); }, [value]);
  React.useEffect(()=>{
    if(editing && ref.current){
      ref.current.focus();
      if(ref.current.select) ref.current.select();
    }
  }, [editing]);

  const commit = () => {
    setEditing(false);
    const next = parse ? parse(draft) : draft;
    if(next !== value) onSave(next);
  };
  const cancel = () => { setDraft(value || ""); setEditing(false); };

  if(editing){
    if(multiline){
      return (
        <textarea
          ref={ref}
          className={"editable editable-input " + (className || "")}
          style={style}
          value={draft}
          onChange={(e)=>setDraft(e.target.value)}
          onBlur={commit}
          onKeyDown={(e)=>{
            if(e.key === "Escape") cancel();
            if(e.key === "Enter" && (e.metaKey || e.ctrlKey)){ e.preventDefault(); commit(); }
          }}
          placeholder={placeholder}
          aria-label={ariaLabel}
        />
      );
    }
    return (
      <input
        ref={ref}
        className={"editable editable-input " + (className || "")}
        style={style}
        value={draft}
        onChange={(e)=>setDraft(e.target.value)}
        onBlur={commit}
        onKeyDown={(e)=>{
          if(e.key === "Escape") cancel();
          if(e.key === "Enter"){ e.preventDefault(); commit(); }
        }}
        placeholder={placeholder}
        aria-label={ariaLabel}
      />
    );
  }
  const display = value || placeholder || "";
  return (
    <span
      className={"editable editable-display " + (!value ? "editable-empty " : "") + (className || "")}
      style={style}
      onClick={(e)=>{ e.stopPropagation(); setEditing(true); }}
      title="Click to edit"
      tabIndex={0}
      onKeyDown={(e)=>{ if(e.key === "Enter" || e.key === " "){ e.preventDefault(); setEditing(true); } }}
      role="button"
      aria-label={ariaLabel || "Edit " + display}
    >{display}</span>
  );
}

function EditableSelect({ value, options, onSave, className, style, ariaLabel }){
  const [editing, setEditing] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(()=>{ if(editing && ref.current) ref.current.focus(); }, [editing]);

  if(editing){
    return (
      <select
        ref={ref}
        className={"editable editable-input " + (className || "")}
        style={style}
        value={value}
        onChange={(e)=>{ onSave(e.target.value); setEditing(false); }}
        onBlur={()=>setEditing(false)}
        aria-label={ariaLabel}
      >
        {options.map(o => <option key={o.value || o} value={o.value || o}>{o.label || o}</option>)}
      </select>
    );
  }
  const opt = options.find(o => (o.value || o) === value);
  const label = opt ? (opt.label || opt) : value;
  return (
    <span
      className={"editable editable-display " + (className || "")}
      style={style}
      onClick={(e)=>{ e.stopPropagation(); setEditing(true); }}
      title="Click to edit"
      tabIndex={0}
      role="button"
    >{label}</span>
  );
}

Object.assign(window, { EditableText, EditableSelect });