// ==========================================
// ChatPane Kit — Default Assembly
// ==========================================
// Wires useChat + all sub-components into the standard
// 1-on-1 chat experience. Surfaces that need a different
// layout import individual pieces instead.
//
// v0.37.10: Error banner, stop button, regenerate, pagination,
//           markdown toolbar, emoji picker, code block copy.
//
// Usage:
//   import { ChatPane } from './components/chat-pane/index.js';
//   html`<${ChatPane} handleRef=${ref} standalone=${true} getContext=${fn} />`
//
// Re-exports all pieces for kit consumers:
//   import { useChat, useStream, MessageList, MessageInput, ... } from './components/chat-pane/index.js';

import { useChat }         from './use-chat.js';
import { useStream }       from './use-stream.js';
import { MessageList }     from './message-list.js';
import { MessageBubble }   from './message-bubble.js';
import { MessageInput }    from './message-input.js';
import { ModelSelector }   from './model-selector.js';
import { ChatHistory }     from './chat-history.js';
import { renderMarkdown }  from './markdown.js';
import { CodeBlock, extractCodeBlocks } from './code-block.js';
import { MessageActions }  from './message-actions.js';
import { EmojiPicker }     from './emoji-picker.js';
import { TypingIndicator } from './typing-indicator.js';

const { useRef, useEffect, useCallback } = window.hooks;
const html = window.html;

/**
 * Default ChatPane assembly.
 *
 * @param {{
 *   channelId?: string,
 *   standalone?: boolean,
 *   getContext?: () => {path: string, content: string}|null,
 *   onChannelChange?: (id: string) => void,
 *   handleRef?: { current: any },
 *   className?: string,
 * }} props
 */
export function ChatPane(props) {
    const {
        channelId: initialChannelId,
        standalone = true,
        getContext,
        onChannelChange,
        handleRef,
        className,
    } = props;

    const inputHandle = useRef(null);

    const chat = useChat({
        initialChannelId,
        getContext,
        onChannelChange,
        externalModel: props.modelId,
    });

    // Expose imperative handle via handleRef prop
    // Intentional: no deps — handle methods must reference latest chat closures
    useEffect(() => {
        if (handleRef) {
            handleRef.current = {
                getChannel()       { return chat.channelId; },
                setChannel(id)     { chat.switchChannel(id); },
                focusInput()       { inputHandle.current?.focus(); },
                getInputValue()    { return inputHandle.current?.getValue() || ''; },
                setInputValue(v)   { inputHandle.current?.setValue(v); },
                clearInput()       { inputHandle.current?.clear(); },
                clear()            { chat.newChat(); },
                stop()             { chat.stop(); },
                setModel(id)       { chat.setModel(id); },
                getModel()         { return chat.model; },
            };
        }
    });

    const _dismissError = useCallback(() => chat.clearError(), [chat.clearError]);

    return html`
        <div class=${'sw-chat-pane' + (className ? ' ' + className : '')}>
            ${standalone && html`
                <div class="sw-chat-pane__header">
                    <${ChatHistory}
                        channelId=${chat.channelId}
                        onSelect=${chat.switchChannel}
                        onNew=${chat.newChat} />
                    <div class="sw-chat-pane__header-right">
                        <${ModelSelector}
                            value=${chat.model}
                            onChange=${chat.setModel} />
                    </div>
                </div>`}
            ${chat.error && html`
                <div class="sw-chat-pane__error" role="alert">
                    <span class="sw-chat-pane__error-text">${chat.error}</span>
                    <button class="sw-chat-pane__error-dismiss"
                            onClick=${_dismissError}
                            aria-label="Dismiss error">\u00d7</button>
                </div>`}
            <${MessageList}
                messages=${chat.messages}
                streamContent=${chat.streamContent}
                streamThinking=${chat.streamThinking}
                streaming=${chat.streaming}
                hasMore=${chat.hasMore}
                loadingMore=${chat.loadingMore}
                onLoadMore=${chat.loadMore}
                onRegenerate=${chat.regenerate}
                onDelete=${chat.deleteMessage} />
            <${TypingIndicator} users=${chat.typingUsers} />
            <${MessageInput}
                handleRef=${inputHandle}
                onSend=${chat.sendMessage}
                onStop=${chat.stop}
                disabled=${chat.sending}
                streaming=${chat.streaming}
                channelId=${chat.channelId}
                onTyping=${chat.emitTyping} />
        </div>`;
}

// ── Kit re-exports ─────────────────────────
export { useChat }                from './use-chat.js';
export { useStream }              from './use-stream.js';
export { MessageList }            from './message-list.js';
export { MessageBubble }          from './message-bubble.js';
export { MessageInput }           from './message-input.js';
export { ModelSelector }          from './model-selector.js';
export { ChatHistory }            from './chat-history.js';
export { renderMarkdown }         from './markdown.js';
export { CodeBlock, extractCodeBlocks } from './code-block.js';
export { MessageActions }         from './message-actions.js';
export { EmojiPicker }            from './emoji-picker.js';
export { TypingIndicator }       from './typing-indicator.js';
