/* global React */
const { useState, useRef, useEffect } = React;

// ===================== COMPOSER =====================
function Composer({ onSend, streaming, onStop, model, setModel, models = window.MODELS }) {
  const [text, setText] = useState("");
  const taRef = useRef();

  // autosize
  useEffect(() => {
    const el = taRef.current;
    if (!el) return;
    el.style.height = "auto";
    el.style.height = Math.min(220, el.scrollHeight) + "px";
  }, [text]);

  const submit = () => {
    if (streaming) return;
    if (!text.trim()) return;
    onSend(text);
    setText("");
  };

  const onKeyDown = (e) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      submit();
    }
  };

  return (
    <div className="composer-wrap">
      <div className="composer">
        <textarea
          ref={taRef}
          className="comp-input"
          placeholder="Ask Shannon anything…"
          value={text}
          onChange={(e) => setText(e.target.value)}
          onKeyDown={onKeyDown}
          rows={1}
        />
        <div className="comp-bar">
          <div className="comp-left">
            <ModelChip model={model} setModel={setModel} models={models} />
          </div>
          <div className="comp-right">
            <span className="comp-hint"><kbd>↵</kbd> send · <kbd>⇧↵</kbd> newline</span>
            {streaming
              ? <button className="send-btn stop" onClick={onStop} title="Stop"><svg viewBox="0 0 24 24" width="14" height="14"><rect x="7" y="7" width="10" height="10" rx="1" fill="currentColor"/></svg></button>
              : <button className="send-btn" onClick={submit} disabled={!text.trim()} title="Send"><svg viewBox="0 0 24 24" width="14" height="14"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg></button>
            }
          </div>
        </div>
      </div>
      <div className="comp-footnote">
        Replies are generated. Verify anything important — especially numbers, dates, and citations.
      </div>
    </div>
  );
}

function ModelChip({ model, setModel, models = window.MODELS }) {
  const [open, setOpen] = useState(false);
  const ref = useRef();
  useEffect(() => {
    const onClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    window.addEventListener("mousedown", onClick);
    return () => window.removeEventListener("mousedown", onClick);
  }, []);
  const cur = models.find(m => m.id === model) || models[0] || { label: "Model", glyph: "●", sub: "" };
  return (
    <div className="comp-model" ref={ref}>
      <button className="comp-tool comp-model-btn" onClick={() => setOpen(v => !v)}>
        <span className="model-glyph">{cur.glyph}</span>
        <span className="comp-model-label">{cur.label}</span>
      </button>
      {open && (
        <div className="model-menu model-menu-up">
          <div className="model-menu-h">Model</div>
          {models.map(m => (
            <button key={m.id} className={"model-opt " + (m.id === model ? "selected" : "")} onClick={() => { setModel(m.id); setOpen(false); }}>
              <span className="model-glyph">{m.glyph}</span>
              <span className="model-opt-text">
                <span className="model-opt-label">{m.label}</span>
                <span className="model-opt-sub">{m.sub}</span>
              </span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

window.Composer = Composer;