import React from 'react';
import { __ } from '@wordpress/i18n';
import ProductCarousel from '../ProductCarousel';
import OrderStatus from '../OrderStatus';
import ContactForm from '../features/ContactForm';
import formatMessageTimestamp from '../utils/formatMessageTimestamp';
import Composer from './Composer';
import ViewHeader from './ViewHeader';

const ChatView = ({
    brand,
    headerActions,
    onBack,
    messages,
    isLoadingMessages,
    greeting,
    suggestedQuestions,
    onQuestionClick,
    conversationId,
    onOrderAction,
    messagesContainerRef,
    messagesEndRef,
    inputValue,
    onInputChange,
    onSend,
    placeholder,
    readOnly,
    isLoading,
}) => {
    const questions = (suggestedQuestions || []).filter((q) => typeof q === 'string' && q.trim() !== '');
    const isFresh = messages.length <= 1 && !isLoadingMessages;

    const avatar = (
        <span className="aisk-avatar">
            {brand.logo ? <img src={brand.logo} alt="" /> : <span>{(brand.name || 'A').charAt(0).toUpperCase()}</span>}
            <span className="aisk-avatar-status" />
        </span>
    );

    return (
        <div className="aisk-view aisk-chat-view">
            <ViewHeader
                title={brand.name}
                subtitle={__( 'Online · replies instantly', 'aisk-ai-chat' )}
                avatar={avatar}
                onBack={onBack}
                actions={headerActions}
            />

            <div className="support-buddy-messages" ref={messagesContainerRef}>
                {isFresh ? (
                    <>
                        <div className="support-buddy-message bot">
                            <div className="support-buddy-message-content">{greeting}</div>
                        </div>
                        {questions.length > 0 && (
                            <div className="aisk-chips is-stacked">
                                {questions.map((question, index) => (
                                    <button
                                        key={index}
                                        type="button"
                                        className="aisk-chip"
                                        onClick={() => onQuestionClick(question)}
                                        disabled={readOnly}
                                    >
                                        {question}
                                    </button>
                                ))}
                            </div>
                        )}
                    </>
                ) : (
                    <>
                        {isLoadingMessages && messages.length === 0 && (
                            <div className="aisk-empty-state">{__( 'Loading messages...', 'aisk-ai-chat' )}</div>
                        )}
                        {messages.map((message, index) => (
                            <div key={index}>
                                <div className={`support-buddy-message ${message.type}`}>
                                    <div
                                        className="support-buddy-message-content"
                                        dangerouslySetInnerHTML={{ __html: message.content }}
                                    />
                                    {!message.isOptimistic && (
                                        <div className={`support-buddy-message-timestamp ${message.type}`}>
                                            {formatMessageTimestamp(message.timestamp)}
                                        </div>
                                    )}
                                </div>
                                {message.products && Array.isArray(message.products) && message.products.length > 0 ? (
                                    <ProductCarousel products={message.products} />
                                ) : null}
                                {message.order?.order_info && (
                                    <OrderStatus
                                        order={message.order.order_info}
                                        onAction={onOrderAction}
                                        conversationId={conversationId}
                                    />
                                )}
                                {(message.type === 'bot' || message.type === 'contact_support') && message.support === true && message.response_type === 'form' && (
                                    <ContactForm />
                                )}
                            </div>
                        ))}
                    </>
                )}
                <div ref={messagesEndRef} />
            </div>

            <div className="aisk-chat-composer">
                <Composer
                    value={inputValue}
                    onChange={onInputChange}
                    onSubmit={onSend}
                    placeholder={readOnly ? __( 'This conversation is in view-only mode', 'aisk-ai-chat' ) : placeholder}
                    disabled={readOnly}
                    isLoading={isLoading}
                    autoFocus
                />
            </div>
        </div>
    );
};

export default ChatView;