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

interface TranslationEditProps {
    onBack: () => void;
    language: string;
}

export function TranslationEdit({ onBack, language }: TranslationEditProps) {
    const [activeTab, setActiveTab] = React.useState('Chatbox');

    const chatboxItems = [
        'Navigation',
        'Heading & Launcher',
        'Contact us',
        'Live chat',
        'Order tracking',
        'FAQs',
        'AI assistant'
    ];

    const proactiveChatItems = [
        'Welcome visitor',
        'Welcome visitor',
        'Product Recommendation',
        'Search page',
        'Welcome visitor',
        'Welcome visitor',
        'Welcome visitor'
    ];

    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>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flexWrap: 'wrap' }}>
                        <h1 className={styles.faqTitle} style={{ fontSize: '22px', margin: 0 }}>{language}</h1>
                        <span style={{ background: '#f5f3ff', color: '#7c3aed', padding: '2px 8px', borderRadius: '4px', fontSize: '11px', fontWeight: 600 }}>Default</span>
                    </div>
                </div>
                <button
                    className={styles.syncBtn}
                    style={{ background: '#e5e7eb', color: '#9ca3af', border: 'none', cursor: 'not-allowed', width: 'auto' }}
                    disabled
                >
                    Auto translate
                </button>
            </div>

            <div className={styles.pillTabs} style={{ marginBottom: '32px', display: 'flex', gap: '12px', overflowX: 'auto', whiteSpace: 'nowrap', paddingBottom: '8px' }}>
                {['Chatbox', 'FAQs Page', 'FAQs'].map(tab => (
                    <div
                        key={tab}
                        className={`${styles.pillTab} ${activeTab === tab ? styles.pillTabActive : ""}`}
                        onClick={() => setActiveTab(tab)}
                        style={{ padding: '8px 24px', flexShrink: 0 }}
                    >
                        {tab}
                    </div>
                ))}
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
                {/* Chatbox Section */}
                <div className={styles.appearanceCard} style={{ padding: 0, overflow: 'hidden' }}>
                    <div style={{ padding: '16px 24px', borderBottom: '1px solid #f3f4f6' }}>
                        <h3 style={{ fontSize: '15px', fontWeight: 600 }}>Chatbox</h3>
                    </div>
                    <div>
                        {chatboxItems.map((item, index) => (
                            <div
                                key={index}
                                style={{
                                    display: 'flex',
                                    justifyContent: 'space-between',
                                    alignItems: 'center',
                                    padding: '16px 24px',
                                    borderBottom: index === chatboxItems.length - 1 ? 'none' : '1px solid #f3f4f6',
                                    cursor: 'pointer',
                                    gap: '12px'
                                }}
                            >
                                <span style={{ fontSize: '14px', color: '#374151' }}>{item}</span>
                                <FiChevronRight color="#9ca3af" style={{ flexShrink: 0 }} />
                            </div>
                        ))}
                    </div>
                </div>

                {/* Proactive Chat Section */}
                <div className={styles.appearanceCard} style={{ padding: 0, overflow: 'hidden' }}>
                    <div style={{ padding: '16px 24px', borderBottom: '1px solid #f3f4f6' }}>
                        <h3 style={{ fontSize: '15px', fontWeight: 600 }}>Proactive chat</h3>
                    </div>
                    <div>
                        {proactiveChatItems.map((item, index) => (
                            <div
                                key={index}
                                style={{
                                    display: 'flex',
                                    justifyContent: 'space-between',
                                    alignItems: 'center',
                                    padding: '16px 24px',
                                    borderBottom: index === proactiveChatItems.length - 1 ? 'none' : '1px solid #f3f4f6',
                                    cursor: 'pointer',
                                    gap: '12px'
                                }}
                            >
                                <span style={{ fontSize: '14px', color: '#374151' }}>{item}</span>
                                <FiChevronRight color="#9ca3af" style={{ flexShrink: 0 }} />
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}