import React, { useState } from 'react';
import { __ } from '@wordpress/i18n';
import { ChevronRight, Mail, MessageCircle } from 'lucide-react';
import ContactForm from '../features/ContactForm';
import ViewHeader from './ViewHeader';
import OrderStatusCard from './OrderStatusCard';
import HelpSearchCard from './HelpSearchCard';

const HelpView = ({ headerActions, integrations, onAskAi, woocommerceEnabled, onOrderStatus, helpQuestions = [], onHelpQuestion }) => {
    const [showContactForm, setShowContactForm] = useState(false);
    const { whatsappEnabled, whatsappNumber, telegramEnabled, telegramUsername } = integrations;
    const contactFormUrl = window.AiskData?.contactFormUrl;
    const pluginUrl = window.AiskData?.pluginUrl || '';

    const openWhatsApp = () => {
        const formattedNumber = whatsappNumber.replace('whatsapp:', '').replace(/[^0-9]/g, '');
        window.open(`https://wa.me/${formattedNumber}`, '_blank', 'noopener');
    };

    const openTelegram = () => {
        window.open(`https://t.me/${telegramUsername}`, '_blank', 'noopener');
    };

    if (showContactForm) {
        return (
            <div className="aisk-view aisk-help-view">
                <ViewHeader
                    title={__( 'Contact support', 'aisk-ai-chat' )}
                    onBack={() => setShowContactForm(false)}
                    actions={headerActions}
                />
                <div className="aisk-view-body">
                    <ContactForm />
                </div>
            </div>
        );
    }

    return (
        <div className="aisk-view aisk-help-view">
            <ViewHeader
                title={__( 'Help', 'aisk-ai-chat' )}
                subtitle={__( 'Choose how you would like to reach us', 'aisk-ai-chat' )}
                actions={headerActions}
            />
            <div className="aisk-view-body">
                <button type="button" className="aisk-card aisk-card-link" onClick={onAskAi}>
                    <span className="aisk-card-icon"><MessageCircle size={18} /></span>
                    <span className="aisk-card-content">
                        <span className="aisk-card-title">{__( 'Ask our assistant', 'aisk-ai-chat' )}</span>
                        <span className="aisk-card-text">{__( 'Get instant answers, day or night', 'aisk-ai-chat' )}</span>
                    </span>
                    <ChevronRight size={18} className="aisk-card-chevron" />
                </button>

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

                <HelpSearchCard questions={helpQuestions} onSelect={onHelpQuestion} limit={8} />

                {contactFormUrl && (
                    <button type="button" className="aisk-card aisk-card-link" onClick={() => setShowContactForm(true)}>
                        <span className="aisk-card-icon"><Mail size={18} /></span>
                        <span className="aisk-card-content">
                            <span className="aisk-card-title">{__( 'Contact support', 'aisk-ai-chat' )}</span>
                            <span className="aisk-card-text">{__( 'Send a message to our team', 'aisk-ai-chat' )}</span>
                        </span>
                        <ChevronRight size={18} className="aisk-card-chevron" />
                    </button>
                )}

                {whatsappEnabled && whatsappNumber && (
                    <button type="button" className="aisk-card aisk-card-link" onClick={openWhatsApp}>
                        <span className="aisk-card-icon is-plain">
                            <img src={`${pluginUrl}assets/images/whatsapp.svg`} alt="" />
                        </span>
                        <span className="aisk-card-content">
                            <span className="aisk-card-title">{__( 'Chat on WhatsApp', 'aisk-ai-chat' )}</span>
                        </span>
                        <ChevronRight size={18} className="aisk-card-chevron" />
                    </button>
                )}

                {telegramEnabled && telegramUsername && (
                    <button type="button" className="aisk-card aisk-card-link" onClick={openTelegram}>
                        <span className="aisk-card-icon is-plain">
                            <img src={`${pluginUrl}assets/images/telegram.svg`} alt="" />
                        </span>
                        <span className="aisk-card-content">
                            <span className="aisk-card-title">{__( 'Chat on Telegram', 'aisk-ai-chat' )}</span>
                        </span>
                        <ChevronRight size={18} className="aisk-card-chevron" />
                    </button>
                )}
            </div>
        </div>
    );
};

export default HelpView;