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

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

export function SatisfactionSurvey({ onBack }: SatisfactionSurveyProps) {
    const [format, setFormat] = React.useState('star'); // star | emoji

    const stars = [1, 2, 3, 4, 5];
    const emojis = ['😡', '🤒', '😐', '😊', '😍'];

    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 }}>Satisfaction survey</h1>
                </div>
            </div>

            <div className={styles.faqPageLayout} style={{ gap: '24px' }}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
                    {/* Automatic resolution */}
                    <div className={styles.appearanceCard}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px', flexWrap: 'wrap', gap: '12px' }}>
                            <h3 style={{ fontSize: '15px', fontWeight: 600 }}>Automatic resolution</h3>
                            <label className={styles.switch}>
                                <input type="checkbox" defaultChecked />
                                <span className={styles.slider}></span>
                            </label>
                        </div>
                        <p style={{ fontSize: '12px', color: '#6b7280' }}>Turn on to send satisfaction survey in your conversation with customers</p>
                    </div>

                    {/* Survey format */}
                    <div className={styles.appearanceCard}>
                        <h3 style={{ fontSize: '15px', fontWeight: 600, marginBottom: '20px' }}>Survey format</h3>
                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px' }}>
                            <div
                                style={{
                                    border: `2px solid ${format === 'star' ? '#7c3aed' : '#f3f4f6'}`,
                                    borderRadius: '12px',
                                    padding: '24px',
                                    textAlign: 'center',
                                    cursor: 'pointer',
                                    position: 'relative'
                                }}
                                onClick={() => setFormat('star')}
                            >
                                <div style={{ display: 'flex', justifyContent: 'center', gap: '8px', marginBottom: '16px', flexWrap: 'wrap' }}>
                                    {stars.map(s => <span key={s} style={{ fontSize: '20px' }}>⭐</span>)}
                                </div>
                                <div style={{ width: '100px', height: '6px', background: '#f3f4f6', borderRadius: '4px', margin: '0 auto 8px' }} />
                                <div style={{ width: '60px', height: '6px', background: '#f3f4f6', borderRadius: '4px', margin: '0 auto' }} />
                                <p style={{ fontSize: '12px', color: '#374151', marginTop: '16px', fontWeight: 500 }}>Star rating</p>
                            </div>

                            <div
                                style={{
                                    border: `2px solid ${format === 'emoji' ? '#7c3aed' : '#f3f4f6'}`,
                                    borderRadius: '12px',
                                    padding: '24px',
                                    textAlign: 'center',
                                    cursor: 'pointer'
                                }}
                                onClick={() => setFormat('emoji')}
                            >
                                <div style={{ display: 'flex', justifyContent: 'center', gap: '8px', marginBottom: '16px', flexWrap: 'wrap' }}>
                                    {emojis.map(e => <span key={e} style={{ fontSize: '20px' }}>{e}</span>)}
                                </div>
                                <div style={{ width: '100px', height: '6px', background: '#f3f4f6', borderRadius: '4px', margin: '0 auto 8px' }} />
                                <div style={{ width: '60px', height: '6px', background: '#f3f4f6', borderRadius: '4px', margin: '0 auto' }} />
                                <p style={{ fontSize: '12px', color: '#374151', marginTop: '16px', fontWeight: 500 }}>Emoji scale</p>
                            </div>
                        </div>
                    </div>

                    {/* Survey content */}
                    <div className={styles.appearanceCard}>
                        <h3 style={{ fontSize: '15px', fontWeight: 600, marginBottom: '20px' }}>Survey content</h3>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
                            <div>
                                <label style={{ fontSize: '13px', color: '#6b7280', display: 'block', marginBottom: '8px' }}>Intro</label>
                                <input
                                    type="text"
                                    className={styles.chatInput}
                                    style={{ width: '100%', background: '#f9fafb', textAlign: 'left', padding: '12px' }}
                                    defaultValue="How was your experience?"
                                />
                            </div>
                            <div>
                                <label style={{ fontSize: '13px', color: '#6b7280', display: 'block', marginBottom: '8px' }}>Thank you message</label>
                                <input
                                    type="text"
                                    className={styles.chatInput}
                                    style={{ width: '100%', background: '#f9fafb', textAlign: 'left', padding: '12px' }}
                                    defaultValue="Thank you for your feedback!"
                                />
                            </div>
                        </div>
                    </div>

                    {/* Trigger time */}
                    <div className={styles.appearanceCard}>
                        <h3 style={{ fontSize: '15px', fontWeight: 600, marginBottom: '20px' }}>Trigger time</h3>
                        <p style={{ fontSize: '13px', color: '#6b7280', marginBottom: '20px' }}>Send the survey at the right time whenever one of the criteria is met</p>

                        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                                <input type="checkbox" defaultChecked />
                                <span style={{ fontSize: '13px', color: '#374151' }}>Conversation is resolved</span>
                            </div>
                            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                                    <input type="checkbox" defaultChecked />
                                    <span style={{ fontSize: '13px', color: '#374151' }}>When specific keywords appear in conversation</span>
                                </div>
                                <div style={{ paddingLeft: '28px' }}>
                                    <div style={{ position: 'relative', marginBottom: '12px' }}>
                                        <input
                                            type="text"
                                            className={styles.chatInput}
                                            style={{ width: '100%', background: '#f9fafb', textAlign: 'left', height: '40px' }}
                                            placeholder="Write a keyword"
                                        />
                                    </div>
                                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
                                        {['Thank you', 'Thanks', 'Got it', 'Perfect'].map(tag => (
                                            <div key={tag} style={{ background: 'white', border: '1px solid #e5e7eb', borderRadius: '20px', padding: '4px 12px', display: 'flex', alignItems: 'center', gap: '6px' }}>
                                                <span style={{ fontSize: '12px', color: '#6b7280' }}>{tag}</span>
                                                <FiX size={12} color="#9ca3af" style={{ cursor: 'pointer' }} />
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Preview */}
                <div style={{ height: 'fit-content' }}>
                    <div className={styles.feedbackCard} style={{ padding: '24px' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px', flexWrap: 'wrap', gap: '12px' }}>
                            <h3 style={{ fontSize: '15px', fontWeight: 600 }}>Preview</h3>
                            <div className={styles.actionIconBtn} style={{ minWidth: '100px', gap: '8px', fontSize: '12px' }}>
                                <FiMonitor /> Desktop
                            </div>
                        </div>
                        <div className={styles.phoneFrame} style={{ borderColor: '#f3f4f6' }}>
                            <div className={styles.chatBody} style={{ background: 'white' }}>
                                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 16px', borderBottom: '1px solid #f3f4f6' }}>
                                    <div style={{ fontSize: '12px' }}>☰</div>
                                    <div style={{ fontSize: '10px', fontWeight: 800 }}>YOUR STORE</div>
                                    <div style={{ display: 'flex', gap: '8px' }}>
                                        <div style={{ fontSize: '12px' }}>🔍</div>
                                        <div style={{ fontSize: '12px' }}>🛒</div>
                                    </div>
                                </div>

                                <div style={{ background: 'rgba(124, 58, 237, 0.1)', padding: '12px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid #f3f4f6' }}>
                                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                                        <FiArrowLeft size={14} />
                                        <span style={{ fontSize: '12px', fontWeight: 600 }}>Qixs-Design</span>
                                    </div>
                                    <FiX size={14} />
                                </div>

                                <div style={{ padding: '40px 16px', display: 'flex', flexDirection: 'column', gap: '16px', alignItems: 'flex-start' }}>
                                    <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-end', width: '100%' }}>
                                        <div style={{ width: '28px', height: '28px', borderRadius: '50%', background: '#22c55e', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '10px', flexShrink: 0 }}>Qi</div>
                                        <div style={{ background: 'white', border: '1px solid #f3f4f6', borderRadius: '12px 12px 12px 2px', padding: '16px', width: '100%', boxShadow: '0 4px 6px -1px rgba(0,0,0,0.05)' }}>
                                            <p style={{ fontSize: '12px', fontWeight: 600, color: '#374151', textAlign: 'center', marginBottom: '12px' }}>How was your experience?</p>
                                            <div style={{ display: 'flex', justifyContent: 'center', gap: '8px' }}>
                                                {format === 'star' ? stars.map(s => <span key={s} style={{ fontSize: '18px' }}>⭐</span>) : emojis.map(e => <span key={e} style={{ fontSize: '18px' }}>{e}</span>)}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}