import React from 'react';
import { __ } from '@wordpress/i18n';
import { ChevronRight, MessageCirclePlus, MessagesSquare } from 'lucide-react';
import Composer from './Composer';
import OrderStatusCard from './OrderStatusCard';
import HelpSearchCard from './HelpSearchCard';

const stripHtml = (html) => {
    if (!html) return '';
    const div = document.createElement('div');
    div.innerHTML = html;
    return (div.textContent || div.innerText || '').trim();
};

const HomeView = ({
    brand,
    title,
    subtitle,
    headerActions,
    inputValue,
    onInputChange,
    onSend,
    placeholder,
    readOnly,
    isLoading,
    suggestedQuestions,
    onQuestionClick,
    lastMessage,
    onContinue,
    onNewChat,
    woocommerceEnabled,
    onOrderStatus,
    helpQuestions,
    onHelpQuestion,
}) => {
    const questions = (suggestedQuestions || []).filter((q) => typeof q === 'string' && q.trim() !== '').slice(0, 4);
    const preview = lastMessage ? stripHtml(lastMessage.content) : '';

    return (
        <div className="aisk-view aisk-home">
            <div className="aisk-hero">
                <div className="aisk-hero-top">
                    <div className="aisk-hero-brand">
                        {brand.logo ? (
                            <img src={brand.logo} alt={brand.name} className="aisk-hero-logo" />
                        ) : (
                            <span className="aisk-hero-name">{brand.name}</span>
                        )}
                    </div>
                    {headerActions}
                </div>
                <div className="aisk-hero-text">
                    <p className="aisk-hero-title">{title}</p>
                    <h2 className="aisk-hero-subtitle">{subtitle}</h2>
                </div>
            </div>

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

                {questions.length > 0 && (
                    <div className="aisk-chips">
                        {questions.map((question, index) => (
                            <button
                                key={index}
                                type="button"
                                className="aisk-chip"
                                onClick={() => onQuestionClick(question)}
                                disabled={readOnly}
                            >
                                {question}
                            </button>
                        ))}
                    </div>
                )}

                {lastMessage && (
                    <button type="button" className="aisk-card aisk-card-link" onClick={onContinue}>
                        <span className="aisk-card-icon"><MessagesSquare size={18} /></span>
                        <span className="aisk-card-content">
                            <span className="aisk-card-title">{__( 'Continue conversation', 'aisk-ai-chat' )}</span>
                            {preview && <span className="aisk-card-text">{preview}</span>}
                        </span>
                        <ChevronRight size={18} className="aisk-card-chevron" />
                    </button>
                )}

                <button type="button" className="aisk-card aisk-card-link" onClick={onNewChat} disabled={readOnly}>
                    <span className="aisk-card-icon"><MessageCirclePlus size={18} /></span>
                    <span className="aisk-card-content">
                        <span className="aisk-card-title">{__( 'Start a new conversation', 'aisk-ai-chat' )}</span>
                        <span className="aisk-card-text">{__( 'We typically reply in a few seconds', 'aisk-ai-chat' )}</span>
                    </span>
                    <ChevronRight size={18} className="aisk-card-chevron" />
                </button>

                {woocommerceEnabled && <OrderStatusCard onClick={onOrderStatus} disabled={readOnly} />}

                <HelpSearchCard questions={helpQuestions} onSelect={onHelpQuestion} disabled={readOnly} />
            </div>
        </div>
    );
};

export default HomeView;