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

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

export function WhatsAppSettings({ onBack }: WhatsAppSettingsProps) {
    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 }}>WhatsApp</h1>
                </div>
            </div>

            {/* Overview */}
            <div className={styles.appearanceCard} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '32px' }}>
                <div style={{ flex: 1, minWidth: '280px' }}>
                    <h3 style={{ fontSize: '15px', fontWeight: 600, marginBottom: '12px' }}>Overview</h3>
                    <p style={{ fontSize: '13px', color: '#6b7280', marginBottom: '24px', maxWidth: '500px', lineHeight: 1.6 }}>
                        Connect WhatsApp account to read, manage and respond to all WhatsApp messages in Qixs.
                    </p>
                    <button className={styles.syncBtn} style={{ background: '#7c3aed', padding: '10px 24px', width: 'auto' }}>
                        Connect to WhatsApp
                    </button>
                </div>
                <div style={{ display: 'flex', justifyContent: 'center', width: '100%', maxWidth: '200px' }}>
                    <div style={{ background: '#dcfce7', width: '120px', height: '120px', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', flexShrink: 0 }}>
                        <span style={{ fontSize: '60px' }}>💬</span>
                        {/* Visual Chat Bubbles */}
                        <div style={{ position: 'absolute', top: '-10px', right: '-10px', background: '#22c55e', color: 'white', borderRadius: '20px', padding: '4px 8px', fontSize: '10px' }}>•••</div>
                        <div style={{ position: 'absolute', top: '20px', left: '-20px', background: '#22c55e', color: 'white', borderRadius: '20px', padding: '4px 8px', fontSize: '10px' }}>•••</div>
                        <div style={{ position: 'absolute', bottom: '10px', left: '-10px', background: '#22c55e', color: 'white', borderRadius: '20px', padding: '4px 8px', fontSize: '10px' }}>•••</div>
                    </div>
                </div>
            </div>

            {/* Integration tips */}
            <div className={styles.appearanceCard}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px', flexWrap: 'wrap', gap: '12px' }}>
                    <h3 style={{ fontSize: '15px', fontWeight: 600 }}>Integration tips</h3>
                    <FiMinus color="#6b7280" />
                </div>
                <p style={{ fontSize: '13px', color: '#6b7280', marginBottom: '24px' }}>
                    Before you start, you should prepare a few elements that are required to integrate with WhatsApp.
                </p>

                <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
                    <div>
                        <p style={{ fontSize: '14px', fontWeight: 600, color: '#374151', marginBottom: '12px' }}>What you need</p>
                        <ol style={{ fontSize: '13px', color: '#4b5563', paddingLeft: '20px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
                            <li>1. Access to Facebook Business Manager</li>
                            <li>2. Phone number for WhatsApp</li>
                            <li>3. Your business' legal address and details</li>
                        </ol>
                    </div>

                    <div>
                        <p style={{ fontSize: '14px', fontWeight: 600, color: '#374151', marginBottom: '12px' }}>Access to Facebook Business Manager</p>
                        <p style={{ fontSize: '13px', color: '#6b7280', lineHeight: 1.6, marginBottom: '16px' }}>
                            To initiate the process, you will be required to log in to your Facebook account and have access to your company's Facebook Business Manager. Without proper account it's not possible to integrate with WhatsApp.
                        </p>
                        <p style={{ fontSize: '13px', color: '#6b7280' }}>
                            No account? <span style={{ color: '#7c3aed', cursor: 'pointer' }}>Create a new account</span>, but remember there are some restrictions for the first 24 hours.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    );
}