import React from 'react';
import { FiArrowLeft, FiSearch, FiFilter, FiEdit2, FiTrash2, FiChevronDown } from 'react-icons/fi';
import styles from '../../chatbot/components/ChatbotSettings.module.css';

interface QuickRepliesListProps {
    onBack: () => void;
    onCreate: () => void;
}

export function QuickRepliesList({ onBack, onCreate }: QuickRepliesListProps) {
    const replies = Array(10).fill({
        shortcut: '/Thanks',
        category: 'Closing message',
        response: 'Thanks so much for reaching out! If you have any other questions, feel free to ask. Have a great day!',
        updatedAt: '02/10/2026 12:26 PM'
    });

    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' }}>Quick replies</h1>
                        <p style={{ fontSize: '14px', color: '#6b7280' }}>Create pre-written messages to make replying to customers fast and efficient.</p>
                    </div>
                </div>
                <button className={styles.syncBtn} style={{ background: '#7c3aed' }} onClick={onCreate}>
                    Create quick reply
                </button>
            </div>

            <div className={styles.appearanceCard} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '12px' }}>
                <span style={{ fontSize: '14px', fontWeight: 500 }}>Activate proactive chat</span>
                <label className={styles.switch}>
                    <input type="checkbox" defaultChecked />
                    <span className={styles.slider}></span>
                </label>
            </div>

            <div className={styles.appearanceCard}>
                <div style={{ paddingBottom: '16px', borderBottom: '1px solid #f3f4f6', display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap', marginBottom: '16px' }}>
                    <div style={{ position: 'relative', flex: 1, minWidth: '200px' }}>
                        <FiSearch style={{ position: 'absolute', left: '16px', top: '14px', color: '#9ca3af' }} />
                        <input
                            type="text"
                            className={styles.chatInput}
                            placeholder="Search faqs, categories..."
                            style={{ width: '100%', textAlign: 'left', paddingLeft: '44px', height: '44px', background: '#f9fafb', border: '1px solid #e5e7eb' }}
                        />
                    </div>
                    <div style={{ display: 'flex', gap: '12px' }}>
                        <div className={styles.actionIconBtn} style={{ background: '#f9fafb', border: '1px solid #e5e7eb' }}>
                            <FiFilter />
                        </div>
                        <div className={styles.actionIconBtn} style={{ background: '#f9fafb', border: '1px solid #e5e7eb' }}>
                            <FiChevronDown />
                        </div>
                    </div>
                </div>

                <div className={styles.tableWrapper}>
                    <table className={styles.tableContainer} style={{ width: '100%', border: 'none' }}>
                        <thead>
                            <tr style={{ background: '#f9fafb' }}>
                                <th style={{ paddingLeft: '24px' }}>Shortcut</th>
                                <th>Category</th>
                                <th>Response</th>
                                <th>Updated at</th>
                                <th style={{ textAlign: 'right', paddingRight: '24px' }}>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {replies.map((reply, i) => (
                                <tr key={i} style={{ borderBottom: '1px solid #f3f4f6' }}>
                                    <td style={{ paddingLeft: '24px' }}>
                                        <span style={{ background: '#eff6ff', color: '#3b82f6', padding: '4px 12px', borderRadius: '6px', fontSize: '13px', fontWeight: 600 }}>{reply.shortcut}</span>
                                    </td>
                                    <td style={{ fontSize: '14px', color: '#374151' }}>{reply.category}</td>
                                    <td style={{ fontSize: '14px', color: '#4b5563', maxWidth: '400px', lineHeight: 1.5 }}>{reply.response}</td>
                                    <td style={{ fontSize: '14px', color: '#6b7280' }}>{reply.updatedAt}</td>
                                    <td style={{ textAlign: 'right', paddingRight: '24px' }}>
                                        <div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
                                            <FiEdit2 size={16} color="#6b7280" style={{ cursor: 'pointer' }} />
                                            <FiTrash2 size={16} color="#ef4444" style={{ cursor: 'pointer' }} />
                                        </div>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>

                <div style={{ padding: '16px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid #f3f4f6', flexWrap: 'wrap', gap: '16px' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px', fontSize: '13px', color: '#6b7280' }}>
                        Items per page
                        <select className={styles.chatInput} style={{ width: '60px', height: '32px', padding: '0 8px' }}>
                            <option>10</option>
                        </select>
                    </div>
                    <div style={{ display: 'flex', gap: '16px', alignItems: 'center', fontSize: '13px', color: '#6b7280' }}>
                        <span>{"<"} Page 1/1 {">"}</span>
                    </div>
                </div>
            </div>
        </div>
    );
}