/* Reeve — 新建会话 · 暗色悬浮 composer.
   A temporary dark control surface raised by the tabbar 「+」: text input that
   flips to voice, plus image / camera / file attachments. Accent follows the
   app's Tweaks 配色方案 (body[data-scheme] → CSS vars in im.css).
   Loaded BEFORE im.jsx so DarkComposer is available to ReeveIMApp.
   Uses the global ReeveMark from frame.jsx. */

const NTIc = {
  image: <svg viewBox="0 0 24 24" width="21" height="21" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="16" rx="3" /><circle cx="8.5" cy="9.5" r="1.6" /><path d="m4 17 5-4.5 4 3.2L17 12l3 3.4" /></svg>,
  camera: <svg viewBox="0 0 24 24" width="21" height="21" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M4 8.5h2.4l1.3-2h8.6l1.3 2H20a1 1 0 0 1 1 1V18a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.5a1 1 0 0 1 1-1Z" /><circle cx="12" cy="13" r="3.2" /></svg>,
  file: <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M19.5 11.5 12 19a4 4 0 0 1-5.7-5.7l7.4-7.4a2.6 2.6 0 0 1 3.7 3.7l-7.3 7.3a1.2 1.2 0 0 1-1.7-1.7l6.8-6.8" /></svg>,
  mic: <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="3" width="6" height="11" rx="3" /><path d="M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3" /></svg>,
  keyboard: <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="2.5" y="6" width="19" height="12" rx="2.5" /><path d="M6 9.5h0M9.5 9.5h0M13 9.5h0M16.5 9.5h0M6 13h0M16.5 13h0M9 13h6" /></svg>,
  up: <svg viewBox="0 0 24 24" width="21" height="21" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 19V6M6 12l6-6 6 6" /></svg>,
  check: <svg viewBox="0 0 24 24" width="21" height="21" fill="none" stroke="currentColor" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round"><path d="m4 12.5 5 5 11-11" /></svg>,
};
const NT_ATT_LABEL = { image: "图片", camera: "拍照", file: "文件" };

function NTAttThumb({ kind, onRemove }) {
  return (
    <div className="nt-att">
      <button className="nt-att-x" onClick={onRemove} aria-label="移除">✕</button>
      <span className="nt-att-tag">{NT_ATT_LABEL[kind]}</span>
    </div>);
}

function DarkComposer({ onClose, onSubmit }) {
  const [mode, setMode] = React.useState("text");   // text | voice
  const [val, setVal] = React.useState("");
  const [atts, setAtts] = React.useState([]);

  const grow = (el) => { if (!el) return; el.style.height = "auto"; el.style.height = Math.min(el.scrollHeight, 132) + "px"; };
  const addAtt = (kind) => setAtts((a) => a.length >= 4 ? a : [...a, { id: Date.now() + Math.random(), kind }]);
  const rmAtt = (id) => setAtts((a) => a.filter((x) => x.id !== id));
  const canSend = val.trim().length > 0 || atts.length > 0;
  const submit = (voice) => onSubmit && onSubmit({ text: val.trim(), atts, voice: !!voice });

  return (
    <div className="nt-mask" onClick={onClose}>
      <div className="nt-comp nt-dark" onClick={(e) => e.stopPropagation()}>
        <div className="nt-comp-head">
          <span className="nt-comp-ttl"><ReeveMark size={15} stroke={2.1} /> 新建会话 · 交给 Reeve</span>
          <button className="nt-x" onClick={onClose} aria-label="收起">✕</button>
        </div>

        {mode === "text" ?
          <React.Fragment>
            {atts.length > 0 ?
              <div className="nt-atts">
                {atts.map((a) => <NTAttThumb key={a.id} kind={a.kind} onRemove={() => rmAtt(a.id)} />)}
              </div> : null}
            <textarea className="nt-field" rows={1} value={val}
              onChange={(e) => { setVal(e.target.value); grow(e.target); }}
              placeholder="和 Reeve 说点什么，或交给它一件事…" />
            <div className="nt-bar">
              <div className="nt-tools">
                <button className="nt-tool" onClick={() => addAtt("image")} aria-label="图片">{NTIc.image}</button>
                <button className="nt-tool" onClick={() => addAtt("camera")} aria-label="拍照">{NTIc.camera}</button>
                <button className="nt-tool" onClick={() => addAtt("file")} aria-label="文件">{NTIc.file}</button>
              </div>
              <div className="nt-actions">
                <button className="nt-mic" onClick={() => setMode("voice")} aria-label="语音输入">{NTIc.mic}</button>
                <button className={`nt-send ${canSend ? "" : "dim"}`} onClick={canSend ? () => submit(false) : undefined} aria-label="发送">{NTIc.up}</button>
              </div>
            </div>
          </React.Fragment> :
          <React.Fragment>
            <div className="nt-voice">
              <button className="nt-kb" onClick={() => setMode("text")} aria-label="切回键盘">{NTIc.keyboard}</button>
              <div className="nt-wavewrap">
                <span className="nt-rec" />
                <div className="nt-wave">
                  {Array.from({ length: 28 }).map((_, i) =>
                    <i key={i} style={{ animationDelay: (i * 0.05).toFixed(2) + "s", animationDuration: (0.7 + (i % 5) * 0.12).toFixed(2) + "s" }} />)}
                </div>
                <span className="nt-vtime">0:04</span>
              </div>
              <button className="nt-vsend" onClick={() => submit(true)} aria-label="发送语音">{NTIc.check}</button>
            </div>
            <div className="nt-voice-hint">正在听 · 点键盘切回打字，✓ 发送给 Reeve</div>
          </React.Fragment>}
      </div>
    </div>);
}

Object.assign(window, { DarkComposer });