import React from 'react';
import { FiArrowLeft } from 'react-icons/fi';
import styles from '../../chatbot/components/ChatbotSettings.module.css';

interface EmailChannelSettingsProps {
    onBack: () => void;
}

export function EmailChannelSettings({ onBack }: EmailChannelSettingsProps) {
    const [activeTab, setActiveTab] = React.useState('forwarding');

    return (
        <div className={styles.settingsLayout}>
            <div className={styles.settingsFlexHeader} style={{ marginBottom: '8px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                    <button
                        onClick={onBack}
                        style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', fontSize: '20px' }}
                    >
                        <FiArrowLeft />
                    </button>
                    <h1 className={styles.faqTitle} style={{ fontSize: '22px', margin: 0 }}>Email channel</h1>
                </div>
            </div>

            <div className={styles.pillTabs} style={{ marginBottom: '32px', display: 'flex', gap: '12px', overflowX: 'auto', whiteSpace: 'nowrap', paddingBottom: '8px' }}>
                {['Email forwarding', 'Email sender', 'Email signature'].map(tab => {
                    const id = tab.toLowerCase().split(' ')[1];
                    return (
                        <div
                            key={id}
                            className={`${styles.pillTab} ${activeTab === id ? styles.pillTabActive : ""}`}
                            onClick={() => setActiveTab(id)}
                            style={{ padding: '8px 24px', flexShrink: 0 }}
                        >
                            {tab}
                        </div>
                    );
                })}
            </div>

            <div className={styles.appearanceCard}>
                {activeTab === 'forwarding' && (
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '24px' }}>
                        <div style={{ flex: 1, minWidth: '280px' }}>
                            <h3 style={{ fontSize: '15px', fontWeight: 600, marginBottom: '12px' }}>Email forwarding</h3>
                            <p style={{ fontSize: '13px', color: '#6b7280', lineHeight: 1.6 }}>
                                Connect your email accounts to automatically receive and manage all customer email conversations directly inside your Qixs inbox.
                            </p>
                            <button className={styles.syncBtn} style={{ background: '#7c3aed', marginTop: '24px' }}>Manage</button>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'center', width: '100%', maxWidth: '200px' }}>
                            <div style={{ background: '#7c3aed', width: '100px', height: '80px', borderRadius: '12px', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                                <div style={{ background: '#e5e7eb', width: '60px', height: '40px', borderRadius: '4px', zIndex: 2 }} />
                                <div style={{ position: 'absolute', bottom: '10px', right: '10px', fontSize: '20px' }}>📩</div>
                            </div>
                        </div>
                    </div>
                )}

                {activeTab === 'sender' && (
                    <div>
                        <h3 style={{ fontSize: '15px', fontWeight: 600, marginBottom: '8px' }}>Email sender</h3>
                        <p style={{ fontSize: '13px', color: '#6b7280', marginBottom: '32px' }}>The email address used to send replies to customers' emails from Qixs</p>

                        <div>
                            <label style={{ fontSize: '13px', color: '#374151', display: 'block', marginBottom: '12px' }}>Name</label>
                            <div style={{ position: 'relative', maxWidth: '800px' }}>
                                <input
                                    type="text"
                                    className={styles.chatInput}
                                    style={{ width: '100%', background: '#f9fafb', textAlign: 'left', height: '44px', paddingRight: '60px' }}
                                    defaultValue="Qixs"
                                />
                                <span style={{ position: 'absolute', right: '16px', top: '14px', fontSize: '12px', color: '#9ca3af' }}>4/30</span>
                            </div>
                        </div>
                    </div>
                )}

                {activeTab === 'signature' && (
                    <div>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px', flexWrap: 'wrap', gap: '12px' }}>
                            <h3 style={{ fontSize: '15px', fontWeight: 600 }}>Email signature</h3>
                            <label className={styles.switch}>
                                <input type="checkbox" defaultChecked />
                                <span className={styles.slider}></span>
                            </label>
                        </div>
                        <p style={{ fontSize: '13px', color: '#6b7280', marginBottom: '24px' }}>Set up your email signature for the email sent to customers.</p>

                        <div style={{ background: '#f9fafb', border: '1px solid #e5e7eb', borderRadius: '12px', overflow: 'hidden' }}>
                            <div className={styles.richTextToolbar} style={{ borderBottom: '1px solid #e5e7eb', padding: '12px 16px', background: 'white' }}>
                                <div style={{ display: 'flex', gap: '20px', alignItems: 'center', flexWrap: 'wrap' }}>
                                    <span style={{ fontWeight: 800, fontSize: '15px', color: '#374151', cursor: 'pointer' }}>B</span>
                                    <span style={{ fontStyle: 'italic', fontSize: '15px', color: '#374151', cursor: 'pointer' }}>/</span>
                                    <span style={{ textDecoration: 'underline', fontSize: '15px', color: '#374151', cursor: 'pointer' }}>U</span>
                                    <div style={{ width: '1px', height: '16px', background: '#e5e7eb' }} />
                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '2px', cursor: 'pointer' }}>
                                        <div style={{ width: '14px', height: '2px', background: '#374151' }} />
                                        <div style={{ width: '10px', height: '2px', background: '#374151' }} />
                                        <div style={{ width: '14px', height: '2px', background: '#374151' }} />
                                        <div style={{ width: '10px', height: '2px', background: '#374151' }} />
                                    </div>
                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '2px', cursor: 'pointer' }}>
                                        <div style={{ display: 'flex', gap: '2px' }}>
                                            <div style={{ width: '2px', height: '2px', background: '#374151', borderRadius: '50%' }} />
                                            <div style={{ width: '10px', height: '2px', background: '#374151' }} />
                                        </div>
                                        <div style={{ display: 'flex', gap: '2px' }}>
                                            <div style={{ width: '2px', height: '2px', background: '#374151', borderRadius: '50%' }} />
                                            <div style={{ width: '10px', height: '2px', background: '#374151' }} />
                                        </div>
                                    </div>
                                    <div style={{ color: '#374151', cursor: 'pointer', fontSize: '18px', display: 'flex' }}>🔗</div>
                                    <div style={{ color: '#374151', cursor: 'pointer', fontSize: '18px', display: 'flex' }}>🖼️</div>
                                    <div style={{ width: '1px', height: '16px', background: '#e5e7eb' }} />
                                    <div style={{ color: '#374151', cursor: 'pointer', fontSize: '18px', display: 'flex' }}>📄</div>
                                </div>
                            </div>
                            <textarea
                                className={styles.instructionTextArea}
                                style={{ width: '100%', height: '200px', padding: '20px', background: 'transparent', border: 'none', resize: 'none' }}
                                placeholder="Type your email signature here..."
                            />
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
}