import { FiX, FiSearch, FiFilter, FiPlus } from "react-icons/fi";
import styles from "../../../chatbot/components/ChatbotSettings.module.css";

interface BrowseFAQModalProps {
    onClose: () => void;
    selectedBlockFaqs: number[];
    setSelectedBlockFaqs: (ids: number[]) => void;
}

export function BrowseFAQModal({
    onClose,
    selectedBlockFaqs,
    setSelectedBlockFaqs
}: BrowseFAQModalProps) {
    const faqs = [
        { id: 101, cat: "Order & Shipping", q: "How long will it take to receive my order?" },
        { id: 102, cat: "Order & Shipping", q: "How to track my order?" },
        { id: 103, cat: "Order & Shipping", q: "Do you ship internationally?" },
        { id: 104, cat: "Exchange & Return", q: "What is your return policy?" },
        { id: 105, cat: "Exchange & Return", q: "Can i exchange an item?" }
    ];

    const toggleSelect = (id: number) => {
        if (selectedBlockFaqs.includes(id)) {
            setSelectedBlockFaqs(selectedBlockFaqs.filter(fid => fid !== id));
        } else {
            setSelectedBlockFaqs([...selectedBlockFaqs, id]);
        }
    };

    return (
        <div className={styles.overlay} onClick={onClose}>
            <div className={styles.modalContent} style={{ width: '560px' }} onClick={e => e.stopPropagation()}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
                    <h2 className={styles.setupMainTitle} style={{ margin: 0 }}>Browse FAQs</h2>
                    <FiX style={{ cursor: 'pointer' }} onClick={onClose} />
                </div>

                <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
                    <div style={{ position: 'relative', flex: 1 }}>
                        <FiSearch style={{ position: 'absolute', left: '12px', top: '10px', color: '#9ca3af' }} />
                        <input type="text" className={styles.chatInput} placeholder="Search FAQ" style={{ paddingLeft: '40px', textAlign: 'left', maxWidth: '100%', height: '36px' }} />
                    </div>
                    <div className={styles.actionIconBtn} style={{ height: '36px', width: '36px' }}><FiFilter /></div>
                </div>

                <div className={styles.browseFaqList}>
                    {faqs.map(item => (
                        <div
                            key={item.id}
                            className={styles.browseFaqItem}
                            onClick={() => toggleSelect(item.id)}
                        >
                            <div className={`${styles.checkboxItem} ${selectedBlockFaqs.includes(item.id) ? styles.checkboxActive : ''}`}>
                                {selectedBlockFaqs.includes(item.id) && <FiPlus style={{ transform: 'rotate(45deg)' }} size={12} />}
                            </div>
                            <div className={styles.faqItemInfo}>
                                <span className={styles.faqItemCat}>{item.cat}</span>
                                <span className={styles.faqItemQue}>{item.q}</span>
                            </div>
                        </div>
                    ))}
                </div>

                <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px', marginTop: '24px' }}>
                    <button className={styles.settingsBtn} style={{ background: 'white', color: '#111111', border: 'none' }} onClick={onClose}>Cancel</button>
                    <button className={styles.syncBtn} style={{ background: '#7c3aed' }} onClick={onClose}>Add FAQ</button>
                </div>
            </div>
        </div>
    );
}