import { useState } from 'react';
import { SettingsGeneral } from '../features/settings/components/SettingsGeneral';
import { ChatAvailability } from '../features/settings/components/ChatAvailability';
import { ReportsSettings } from '../features/settings/components/ReportsSettings';
import { SettingsInbox } from '../features/settings/components/SettingsInbox';
import { QuickRepliesList } from '../features/settings/components/QuickRepliesList';
import { QuickReplyCreate } from '../features/settings/components/QuickReplyCreate';
import { SettingsAutomation } from '../features/settings/components/SettingsAutomation';
import { SatisfactionSurvey } from '../features/settings/components/SatisfactionSurvey';
import { SettingsChannels } from '../features/settings/components/SettingsChannels';
import { EmailChannelSettings } from '../features/settings/components/EmailChannelSettings';
import { SettingsIntegrations } from '../features/settings/components/SettingsIntegrations';
import { WhatsAppSettings } from '../features/settings/components/WhatsAppSettings';
import { SettingsTeam } from '../features/settings/components/SettingsTeam';
import { SettingsNotifications } from '../features/settings/components/SettingsNotifications';
import { SettingsTranslations } from '../features/settings/components/SettingsTranslations';
import { TranslationEdit } from '../features/settings/components/TranslationEdit';
import styles from '../features/chatbot/components/ChatbotSettings.module.css';

export default function SettingsPage() {
    const [activeTab, setActiveTab] = useState('General');
    const [view, setView] = useState('main'); // main | availability | reports | quick-replies-list | quick-reply-create | satisfaction-survey | email-channel | whatsapp | translation-edit
    const [selectedLang, setSelectedLang] = useState('English');

    // const tabs = [
    //     'General', 'Inbox Settings', 'Automation', 'Channels',
    //     'Integrations', 'Team', 'Notifications', 'Translations'
    // ];
    const tabs = ['General', 'Inbox Settings', 'Automation', 'Notifications'];

    const renderActiveTab = () => {
        switch (activeTab) {
            case 'General':
                return (
                    <SettingsGeneral
                        onManageChatAvailability={() => setView('availability')}
                        onManageReports={() => setView('reports')}
                    />
                );
            case 'Inbox Settings':
                return <SettingsInbox />;
            case 'Automation':
                return <SettingsAutomation />;
            // case 'Channels':
            //     return (
            //         <SettingsChannels
            //             onConnectEmail={() => setView('email-channel')}
            //         />
            //     );
            // case 'Integrations':
            //     return (
            //         <SettingsIntegrations
            //             onConnectWhatsApp={() => setView('whatsapp')}
            //         />
            //     );
            // case 'Team':
            //     return <SettingsTeam />;
            case 'Notifications':
                return <SettingsNotifications />;
            // case 'Translations':
            //     return (
            //         <SettingsTranslations
            //             onEdit={(lang) => {
            //                 setSelectedLang(lang);
            //                 setView('translation-edit');
            //             }}
            //         />
            //     );
            default:
                return (
                    <div style={{ padding: '40px', background: 'white', borderRadius: '16px', border: '1px solid #e5e7eb', textAlign: 'center' }}>
                        <h3 style={{ color: '#6b7280' }}>{activeTab} content coming soon...</h3>
                    </div>
                );
        }
    };

    if (view === 'availability') {
        return <ChatAvailability onBack={() => setView('main')} />;
    }

    if (view === 'reports') {
        return <ReportsSettings onBack={() => setView('main')} />;
    }

    if (view === 'email-channel') {
        return <EmailChannelSettings onBack={() => setView('main')} />;
    }

    if (view === 'whatsapp') {
        return <WhatsAppSettings onBack={() => setView('main')} />;
    }

    if (view === 'translation-edit') {
        return <TranslationEdit language={selectedLang} onBack={() => setView('main')} />;
    }

    return (
        <div className={styles.inboxContainer} style={{ background: '#f9fafb', minHeight: '100vh' }}>
            <h1 className={styles.faqTitle} style={{ marginBottom: '24px' }}>Settings</h1>

            <div className={styles.pillTabs} style={{
                marginBottom: '32px',
                borderBottom: '1px solid #e5e7eb',
                paddingBottom: '16px',
                overflowX: 'auto',
                whiteSpace: 'nowrap',
                gap: '8px'
            }}>
                {tabs.map(tab => (
                    <div
                        key={tab}
                        className={`${styles.pillTab} ${activeTab === tab ? styles.pillTabActive : ""}`}
                        onClick={() => setActiveTab(tab)}
                        style={{ fontSize: '13px', fontWeight: 500, flexShrink: 0 }}
                    >
                        {tab}
                    </div>
                ))}
            </div>

            {renderActiveTab()}
        </div>
    );
}