import React from 'react';
import DeleteIcon from '@mui/icons-material/Delete';
import ImageIcon from '@mui/icons-material/Image';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';

interface Answer {
    id: string;
    text: string;
    image_url?: string;
}

interface PollAnswerEditorProps {
    answer: Answer;
    answerNumber: number;
    totalAnswers: number;
    answerIndex: number;
    onUpdate: (answer: Answer) => void;
    onDelete: () => void;
    onMove: (direction: 'up' | 'down') => void;
    canDelete: boolean;
    setModalConfig: (config: any) => void;
    closeModal: () => void;
}

const PollAnswerEditor: React.FC<PollAnswerEditorProps> = ({
    answer,
    answerNumber,
    totalAnswers,
    answerIndex,
    onUpdate,
    onDelete,
    onMove,
    canDelete,
    setModalConfig,
    closeModal
}) => {
    const [collapsed, setCollapsed] = React.useState(false);
    const updateAnswer = (field: keyof Answer, value: any) => {
        onUpdate({
            ...answer,
            [field]: value,
        });
    };

    const openMediaUploader = () => {
        if (typeof (window as any).wp !== 'undefined' && (window as any).wp.media) {
            const mediaUploader = (window as any).wp.media({
                title: 'Select Image',
                button: {
                    text: 'Use Image'
                },
                multiple: false,
                library: {
                    type: 'image'
                }
            });

            mediaUploader.on('select', () => {
                const attachment = mediaUploader.state().get('selection').first().toJSON();
                updateAnswer('image_url', attachment.url);
            });

            mediaUploader.open();
        } else {
            alert('WordPress media uploader is not available.');
        }
    };

    return (
        <div className="answer-editor">
            <div className="answer-header">
                <div className="answer-title">
                    <div className="move-buttons">
                        <button
                            className="move-btn move-up"
                            onClick={() => onMove('up')}
                            disabled={answerIndex === 0}
                            title="Move Up"
                        >
                            <KeyboardDoubleArrowUpIcon className="expand-icon" />
                        </button>
                        <button
                            className="move-btn move-down"
                            onClick={() => onMove('down')}
                            disabled={answerIndex === totalAnswers - 1}
                            title="Move Down"
                        >
                            <KeyboardDoubleArrowDownIcon className="expand-icon" />
                        </button>
                    </div>
                    <span className="answer-number">Answer {answerNumber}</span>
                    <button
                        className="collapse-btn"
                        onClick={() => setCollapsed(!collapsed)}
                    >
                        {collapsed ? <ExpandLessIcon className="expand-icon" /> : <ExpandMoreIcon className="expand-icon" />}
                    </button>
                </div>
                <div className="answer-actions">
                    {canDelete && (
                        <button
                            className="delete-answer-btn"
                            onClick={onDelete}
                            title="Delete Answer"
                        >
                            <DeleteIcon />
                        </button>
                    )}
                </div>
            </div>

            {!collapsed && (
                <div className="answer-content">
                    <div className="answer-text-field">
                        <input
                            type="text"
                            value={answer.text}
                            onChange={(e) => updateAnswer('text', e.target.value)}
                            placeholder={`Answer ${answerNumber}`}
                        />
                    </div>

                    <div className="answer-image-field">
                        {answer.image_url ? (
                            <div className="answer-image-preview">
                                <img src={answer.image_url} alt={`Answer ${answerNumber}`} />
                                <div className="image-actions">
                                    <button
                                        className="change-image-btn"
                                        onClick={openMediaUploader}
                                    >
                                        Change
                                    </button>
                                    <button
                                        className="remove-image-btn"
                                        onClick={() => updateAnswer('image_url', '')}
                                    >
                                        Remove
                                    </button>
                                </div>
                            </div>
                        ) : (
                            <button
                                className="add-image-btn"
                                onClick={openMediaUploader}
                            >
                                <ImageIcon />
                                Add Image
                            </button>
                        )}
                    </div>
                </div>
            )}
        </div>
    );
};

export default PollAnswerEditor;