import AutoExpandingTextArea from "@/components/Low/AutoExpandingTextarea";
import { useState } from "react";
import { FaEdit, FaFemale, FaMale } from "react-icons/fa";
import { FaTrash } from "react-icons/fa6";
import { ScriptLine } from ".";

interface MessageProps {
    message: ScriptLine & { position: 'left' | 'right' };
    color: string;
    editing: boolean;
    onEdit?: (text: string) => void;
    onDelete?: () => void;
}

const Message: React.FC<MessageProps> = ({ message, color, editing, onEdit, onDelete }) => {
    const [isEditing, setIsEditing] = useState(false);
    const [editText, setEditText] = useState(message.text);

    return (
        <div className={`flex items-start gap-2 ${message.position === 'left' ? 'justify-start' : 'justify-end'}`}>
            <div className="flex flex-col w-[50%]">
                <div className={`flex items-center gap-2 ${message.position === 'right' && 'self-end'}`}>
                    {message.gender === 'male' ? (
                        <FaMale className="w-5 h-5 text-blue-500" />
                    ) : (
                        <FaFemale className="w-5 h-5 text-pink-500" />
                    )}
                    <span className="text-sm font-medium">{message.name}</span>
                </div>
                <div className={`rounded-lg p-3 bg-${color}-100 relative group mt-1`}>
                    {isEditing ? (
                        <div className="flex flex-col gap-2">
                            <AutoExpandingTextArea
                                value={editText}
                                onChange={setEditText}
                                placeholder="Edit message..."
                                className="w-full min-h-[96px] px-4 py-2 border border-gray-200 rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-base resize-none"
                            />
                            <div className="flex justify-between">
                                <button
                                    className="px-3 py-1 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors text-sm font-medium"
                                    onClick={() => {
                                        onEdit?.(editText);
                                        setIsEditing(false);
                                    }}
                                >
                                    Save
                                </button>
                                <button
                                    className="px-3 py-1 bg-red-500 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium text-white"
                                    onClick={() => setIsEditing(false)}
                                >
                                    Cancel
                                </button>
                            </div>
                        </div>
                    ) : (
                        <div className="flex items-start justify-between gap-2">
                            <p className="text-gray-700 whitespace-pre-wrap flex-grow">{message.text}</p>
                            {editing && (
                                <div className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
                                    <div className="flex gap-1">
                                        <button
                                            onClick={() => setIsEditing(true)}
                                            className="p-1 rounded hover:bg-gray-200 transition-colors"
                                        >
                                            <FaEdit className="w-3.5 h-3.5 text-gray-600" />
                                        </button>
                                        <button
                                            onClick={onDelete}
                                            className="p-1 rounded hover:bg-gray-200 transition-colors"
                                        >
                                            <FaTrash className="w-3.5 h-3.5 text-red-500" />
                                        </button>
                                    </div>
                                </div>
                            )}
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

export default Message;