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

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

export function QuickReplyCreate({ onBack }: QuickReplyCreateProps) {
    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>
                        <h1 className={styles.faqTitle} style={{ fontSize: '22px', marginBottom: '4px' }}>Create quick reply</h1>
                        <p style={{ fontSize: '14px', color: '#6b7280' }}>Create pre-written messages to make replying to customers fast and efficient.</p>
                    </div>
                </div>
            </div>

            <div className={styles.appearanceCard}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
                    <div>
                        <label style={{ fontSize: '13px', color: '#374151', fontWeight: 500, display: 'block', marginBottom: '12px' }}>Name</label>
                        <input type="text" className={styles.chatInput} style={{ width: '100%', textAlign: 'left', background: '#f9fafb' }} defaultValue="Qixs-Design" />
                    </div>

                    <div>
                        <label style={{ fontSize: '13px', color: '#374151', fontWeight: 500, display: 'block', marginBottom: '12px' }}>Font</label>
                        <div style={{ position: 'relative' }}>
                            <select className={styles.chatInput} style={{ width: '100%', textAlign: 'left', background: '#f9fafb', appearance: 'none' }}>
                                <option>Inter</option>
                            </select>
                            <FiChevronDown style={{ position: 'absolute', right: '16px', top: '14px', color: '#6b7280' }} />
                        </div>
                    </div>

                    <div>
                        <label style={{ fontSize: '13px', color: '#374151', fontWeight: 500, display: 'block', marginBottom: '12px' }}>Response</label>
                        <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' }}>B</span>
                                    <span style={{ fontStyle: 'italic', fontSize: '15px', color: '#374151' }}>/</span>
                                    <span style={{ textDecoration: 'underline', fontSize: '15px', color: '#374151' }}>U</span>
                                    <div style={{ width: '1px', height: '16px', background: '#e5e7eb' }} />
                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
                                        <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' }}>
                                        <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>
                                    <FiLink size={16} color="#374151" />
                                    <FiEye size={16} color="#374151" />
                                </div>
                            </div>
                            <textarea
                                className={styles.instructionTextArea}
                                style={{ width: '100%', height: '200px', padding: '20px', background: 'transparent', border: 'none', resize: 'none' }}
                                placeholder="Type your response here..."
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}