import styles from "../../ChatbotSettings.module.css";
import { FiX, FiLink } from "react-icons/fi";
import { useState, useEffect } from "react";

interface AddQuestionModalProps {
    onClose: () => void;
    onSave: (data: { text: string; desc: string; icon: string }) => void;
    selectedQuestion?: any;
}

export default function AddQuestionModal({ onClose, onSave, selectedQuestion }: AddQuestionModalProps) {
    const [question, setQuestion] = useState(selectedQuestion?.text || "");
    const [answer, setAnswer] = useState(selectedQuestion?.desc || "");
    const [icon] = useState(selectedQuestion?.icon || "💬");

    useEffect(() => {
        if (selectedQuestion) {
            setQuestion(selectedQuestion.text);
            setAnswer(selectedQuestion.desc);
        }
    }, [selectedQuestion]);

    const handleSave = () => {
        if (!question.trim()) return;
        onSave({ text: question, desc: answer, icon });
    };

    return (
        <div className={styles.modalOverlay}>
            <div className={styles.modalContent} style={{ maxWidth: '440px', width: '100%', padding: '0', borderRadius: '20px' }}>
                <div className={styles.modalHeader} style={{ padding: '24px', position: 'relative' }}>
                    <h2 className={styles.modalTitle} style={{ margin: 0, fontSize: '18px', fontWeight: 700 }}>{selectedQuestion ? 'Edit' : 'Add'} question</h2>
                    <button 
                        onClick={onClose} 
                        style={{ 
                            position: 'absolute', 
                            right: '20px', 
                            top: '20px', 
                            background: '#f3f4f6', 
                            border: 'none', 
                            width: '32px', 
                            height: '32px', 
                            borderRadius: '50%',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            cursor: 'pointer',
                            color: '#6b7280'
                        }}
                    >
                        <FiX />
                    </button>
                </div>

                <div className={styles.modalBody} style={{ padding: '0 24px 24px' }}>
                    <div className={styles.inputGroup} style={{ marginBottom: '20px' }}>
                        <label className={styles.inputLabel} style={{ fontSize: '13px', fontWeight: 500, color: '#374151' }}>Question</label>
                        <div style={{ position: 'relative', marginTop: '6px' }}>
                            <input 
                                type="text" 
                                className={styles.inputField} 
                                placeholder="Enter your question" 
                                value={question}
                                onChange={(e) => setQuestion(e.target.value.slice(0, 100))}
                                style={{ 
                                    width: '100%', 
                                    padding: '10px 14px', 
                                    borderRadius: '8px', 
                                    border: '1px solid #e5e7eb',
                                    fontSize: '13px',
                                    paddingRight: '60px'
                                }}
                            />
                            <span style={{ position: 'absolute', right: '12px', top: '50%', transform: 'translateY(-50%)', fontSize: '12px', color: '#9ca3af' }}>{question.length}/100</span>
                        </div>
                    </div>

                    <div className={styles.inputGroup}>
                        <label className={styles.inputLabel} style={{ fontSize: '13px', fontWeight: 500, color: '#374151' }}>Answer</label>
                        <div className={styles.richEditor} style={{ borderRadius: '12px', border: '1px solid #e5e7eb', marginTop: '6px', overflow: 'hidden' }}>
                            <div className={styles.editorToolbar} style={{ borderBottom: '1px solid #f1f5f9', padding: '8px 12px', display: 'flex', gap: '16px', background: 'white' }}>
                                <span style={{ fontWeight: 800, cursor: 'pointer' }}>B</span>
                                <span style={{ fontStyle: 'italic', cursor: 'pointer' }}>I</span>
                                <span style={{ textDecoration: 'underline', cursor: 'pointer' }}>U</span>
                                <FiLink style={{ cursor: 'pointer' }} />
                            </div>
                            <textarea
                                className={styles.editorContent}
                                style={{ 
                                    width: "100%", 
                                    border: "none", 
                                    resize: "none", 
                                    outline: "none",
                                    padding: "12px",
                                    fontSize: "13px",
                                    minHeight: "100px"
                                }}
                                placeholder="Enter the answer..."
                                value={answer}
                                onChange={(e) => setAnswer(e.target.value)}
                            />
                        </div>
                    </div>
                </div>

                <div className={styles.modalFooter} style={{ padding: '0 24px 24px', display: 'flex', justifyContent: 'flex-end', gap: '12px' }}>
                    <button onClick={onClose} style={{ padding: '8px 20px', borderRadius: '8px', border: 'none', background: 'transparent', fontWeight: 600, color: '#374151', cursor: 'pointer' }}>Cancel</button>
                    <button 
                        onClick={handleSave} 
                        style={{ 
                            padding: '8px 24px', 
                            borderRadius: '8px', 
                            border: 'none', 
                            background: '#7c3aed', 
                            color: 'white', 
                            fontWeight: 600, 
                            cursor: question.trim() ? 'pointer' : 'not-allowed',
                            opacity: question.trim() ? 1 : 0.6
                        }}
                    >
                        {selectedQuestion ? 'Update' : 'Save'}
                    </button>
                </div>
            </div>
        </div>
    );
}