import { useMemo } from 'react';
import { useMessages } from '../hooks/use-messages';
import { useMembers } from '../hooks/use-members';
import { Composer } from './composer';
import { MessageItem } from './message-item';

/**
 * The Slack-style thread side panel: the root message + its replies + a composer that posts back
 * into the thread (parentInteractionId = root). Uses its own useMessages on the same thread; the
 * shared adapter subscription keeps it and the main view in sync.
 */
export function ThreadPane({
  threadId,
  rootId,
  onClose,
}: {
  threadId: string;
  rootId: string;
  onClose: () => void;
}) {
  const { messages, send, react, upload, seenIds, sendTyping, canReact, canUpload } = useMessages(threadId);
  const members = useMembers(threadId);
  const memberNames = useMemo(() => members.map((m) => m.name), [members]);

  const root = useMemo(() => messages.find((m) => m.id === rootId), [messages, rootId]);
  const replies = useMemo(() => messages.filter((m) => m.parentInteractionId === rootId), [messages, rootId]);

  return (
    <aside className="miu-pane">
      <header className="miu-pane-head">
        <span>Thread</span>
        <button type="button" className="miu-pane-close" onClick={onClose} aria-label="Close thread">
          ✕
        </button>
      </header>

      <div className="miu-messages miu-pane-messages">
        {root ? (
          <MessageItem message={root} memberNames={memberNames} canReact={canReact} onReact={(id, e) => void react(id, e)} seen={seenIds.has(root.id)} />
        ) : (
          <div className="miu-empty">Message not found.</div>
        )}
        <div className="miu-pane-divider">{replies.length} {replies.length === 1 ? 'reply' : 'replies'}</div>
        {replies.map((m) => (
          <MessageItem key={m.id} message={m} memberNames={memberNames} canReact={canReact} onReact={(id, e) => void react(id, e)} seen={seenIds.has(m.id)} />
        ))}
      </div>

      <Composer
        members={members}
        canUpload={canUpload}
        upload={upload}
        onSend={send}
        onTyping={sendTyping}
        parentInteractionId={rootId}
        placeholder="Reply…"
      />
    </aside>
  );
}