/*
 * Runtime Web – Unified Serverless Framework for Full-Stack TypeScript Applications
 * Documentation: https://runtimeweb.com/docs/getting-started
 *
 * @template: ai-chat
 */

/**
 * ChatPage Component
 *
 * Main chat interface composing all chat components with enhanced UI.
 * Uses design system tokens and new components for a polished experience.
 *
 * @requirements 5.1, 9.1
 */

import * as React from 'react';
import { useState, useCallback } from 'react';
import { MessageList } from './MessageList';
import { InputArea } from './InputArea';
import { BehaviorSelector } from './BehaviorSelector';
import { LoadingIndicator } from './LoadingIndicator';
import { TypingIndicator } from './TypingIndicator';
import { ErrorMessage } from './ErrorMessage';
import { EmptyState } from './EmptyState';
import { SessionIndicator } from './SessionIndicator';
import { useChat, useSession } from '../../hooks';
import type { BehaviorMode } from '../../types';

/**
 * ChatPage component - main chat interface with enhanced UI.
 *
 * Features:
 * - EmptyState for empty conversation with suggested prompts
 * - SessionIndicator showing conversation persistence
 * - TypingIndicator while AI generates response
 * - Design system integration for consistent styling
 */
export const ChatPage: React.FC = () => {
    const { sessionId, clearSession } = useSession();
    const {
        messages,
        isLoading,
        error,
        sendMessage,
        retryLastMessage,
        clearError,
    } = useChat(sessionId);

    const [behaviorMode, setBehaviorMode] = useState<BehaviorMode>('balanced');

    const handleSend = useCallback(async (content: string) => {
        await sendMessage(content, behaviorMode);
    }, [sendMessage, behaviorMode]);

    const handlePromptSelect = useCallback((prompt: string) => {
        handleSend(prompt);
    }, [handleSend]);

    const handleNewSession = useCallback(() => {
        if (clearSession) {
            clearSession();
        }
    }, [clearSession]);

    // Show loading state while session initializes
    if (!sessionId) {
        return (
            <div className="chat-page chat-page--loading">
                <div className="chat-page__loader">
                    <LoadingIndicator />
                </div>
            </div>
        );
    }

    const isEmpty = messages.length === 0 && !isLoading;

    return (
        <div className="chat-page">
            <header className="chat-page__header">
                <div className="chat-page__header-left">
                    <h1 className="chat-page__title">AI Chat</h1>
                    <SessionIndicator
                        sessionId={sessionId}
                        messageCount={messages.length}
                        onNewSession={handleNewSession}
                    />
                </div>
                <BehaviorSelector value={behaviorMode} onChange={setBehaviorMode} />
            </header>

            <main className="chat-page__main">
                {isEmpty ? (
                    <EmptyState onPromptSelect={handlePromptSelect} />
                ) : (
                    <>
                        <MessageList messages={messages} isLoading={isLoading} />
                        {isLoading && <TypingIndicator />}
                    </>
                )}

                {error && (
                    <ErrorMessage
                        error={error}
                        onRetry={retryLastMessage}
                        onDismiss={clearError}
                    />
                )}
            </main>

            <footer className="chat-page__footer">
                <InputArea onSend={handleSend} disabled={isLoading} />
            </footer>
        </div>
    );
};
