import { useEffect, useRef, useState } from "react";
import type { ChatMessage } from "./mapTrace";

export function useAutoFollow(dep: unknown) {
  const ref = useRef<HTMLDivElement>(null);
  const [following, setFollowing] = useState(true);
  const followingRef = useRef(true);
  const onScroll = () => {
    const el = ref.current;
    if (!el) return;
    const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
    followingRef.current = nearBottom;
    setFollowing(nearBottom);
  };
  useEffect(() => {
    if (followingRef.current && ref.current) ref.current.scrollTop = ref.current.scrollHeight;
  }, [dep]);
  return { ref, following, onScroll };
}

// GitHub-style comment box, not a chat bubble: full-width white box
// with a subtle header row (role label only — no timestamp or sender
// is invented; the backend provides neither) and the body below.
// Status entries are plain muted timeline text on the timeline line.
export function ChatBubble({ msg }: { msg: ChatMessage }) {
  if (msg.role === "status") {
    return <div className="chat-status">{msg.text}</div>;
  }
  const author = msg.label || (msg.role === "user" ? "用户" : msg.role === "assistant" ? "助手" : "工具");
  return (
    <div className={"gh-comment " + msg.role}>
      <div className="gh-comment-header"><span className="gh-comment-author">{author}</span></div>
      <div className="gh-comment-body">{msg.text}</div>
    </div>
  );
}

export function ChatList({ messages, empty }: { messages: ChatMessage[]; empty?: string }) {
  const { ref, following, onScroll } = useAutoFollow(messages.length);
  return (
    <div className="chat-list" ref={ref} onScroll={onScroll}>
      {messages.length === 0 ? <div className="muted">{empty || "（暂无消息）"}</div> : messages.map((m) => <ChatBubble key={m.id} msg={m} />)}
      {!following && messages.length > 0 ? (
        <button className="chat-follow" onClick={() => { if (ref.current) ref.current.scrollTop = ref.current.scrollHeight; }}>回到最新 ↓</button>
      ) : null}
    </div>
  );
}

export function ChatInput({ onSend, disabled, placeholder }: {
  onSend: (text: string) => void; disabled?: boolean; placeholder?: string;
}) {
  const [text, setText] = useState("");
  const send = () => {
    const v = text.trim();
    if (!v || disabled) return;
    onSend(v);
    setText("");
  };
  // GitHub comment box: textarea on top, a subtle footer row with the
  // green primary send button. No mic or attachment button here: the
  // continue chat has no voice or attachment API (attachments live in
  // Dispatch), so a mic/+ icon would be a dead button.
  return (
    <div className="gh-comment-box">
      <textarea
        aria-label="会话输入"
        rows={3}
        placeholder={placeholder || "消息"}
        value={text}
        disabled={disabled}
        onChange={(e) => setText(e.target.value)}
        onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }}
      />
      <div className="gh-comment-footer">
        <button type="button" className="primary" aria-label="发送" disabled={disabled || !text.trim()} onClick={send}>发送</button>
      </div>
    </div>
  );
}