// Messages.jsx — message thread + composer
function Message({ role, time, children, streaming }) {
  return (
    <div className={'ch-msg ' + role}>
      <div className="ava">
        {role === 'asst'
          ? <img src="../../assets/zigu-logo-gold.png" alt=""/>
          : <span>L</span>}
      </div>
      <div className="body">
        <div className="role">
          <span>{role === 'asst' ? 'ZIGU · proof-α' : 'You'}</span>
          <span className="time">{time}</span>
          {streaming && <span className="ch-streaming"><span className="dot"></span></span>}
        </div>
        <div className="content">{children}</div>
        {role === 'asst' && !streaming && (
          <div className="ch-msg-actions">
            <button>복사</button>
            <button>다시 생성</button>
            <button>인증서</button>
          </div>
        )}
      </div>
    </div>
  );
}

function CodeBlock({ lang, children }) {
  return (
    <div className="ch-codeblock">
      <div className="cb-head">
        <span>{lang}</span>
        <span className="copy">Copy</span>
      </div>
      <pre>{children}</pre>
    </div>
  );
}

function Thread({ messages }) {
  const ref = React.useRef(null);
  React.useEffect(() => { if (ref.current) ref.current.scrollTop = ref.current.scrollHeight; }, [messages]);
  return (
    <div className="ch-thread-view" ref={ref}>
      <div className="ch-thread-inner">
        {messages.map((m, i) => <Message key={i} role={m.role} time={m.time} streaming={m.streaming}>{m.body}</Message>)}
      </div>
    </div>
  );
}

function Composer({ onSend, onStop, streaming }) {
  const [val, setVal] = React.useState('');
  const taRef = React.useRef(null);
  const click = () => {
    if (streaming) { onStop && onStop(); return; }
    if (val.trim()) { onSend(val); setVal(''); }
  };
  const onKey = e => {
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); click(); }
  };
  React.useEffect(() => {
    const ta = taRef.current; if (!ta) return;
    ta.style.height = 'auto';
    ta.style.height = Math.min(ta.scrollHeight, 220) + 'px';
  }, [val]);
  // Re-focus the textarea when streaming ends (the `disabled` attribute drops
  // focus when it flips on, which the browser does not restore automatically
  // when it flips back off). Keeps the input ready for the next turn.
  React.useEffect(() => {
    if (!streaming && taRef.current) taRef.current.focus();
  }, [streaming]);
  const disabled = !streaming && !val.trim();
  return (
    <div className="ch-composer-wrap">
      <div className="ch-composer">
        <textarea
          ref={taRef}
          placeholder="문장·코드·질문을 입력하세요. 마크다운과 LaTeX 지원."
          value={val}
          onChange={e => setVal(e.target.value)}
          onKeyDown={onKey}
          disabled={streaming}
        />
        <div className="ch-composer-bar">
          <div className="left">
            <button title="Attach">⌘</button>
            <button title="Image">▢</button>
            <button title="LaTeX">∫</button>
          </div>
          <div className="spacer"></div>
          <span className="hint"><kbd>{window.ENTER_KEY}</kbd> send · <kbd>{window.SHIFT_KEY}+{window.ENTER_KEY}</kbd> newline</span>
          <button
            className={'ch-send' + (streaming ? ' stopping' : (disabled ? ' disabled' : ''))}
            onClick={click}
            title={streaming ? '응답 중지' : '전송'}
          >{streaming ? '■' : '↑'}</button>
        </div>
      </div>
    </div>
  );
}

window.Thread = Thread;
window.Composer = Composer;
window.Message = Message;
window.CodeBlock = CodeBlock;