import React, { useState, useRef, useEffect } from 'react';
import { FaArrowRight } from 'react-icons/fa';
import { AiOutlineDelete } from 'react-icons/ai';
import { BsShareFill } from 'react-icons/bs';
import { usePromptOperations, Prompt } from '../../../../hooks/usePrompts';
import { useLanguage } from '../../../../contexts/LanguageContext';
import styles from './DashboardPromptSetItem.module.css';

interface DashboardPromptSetItemProps {
    prompt: Prompt;
    onDelete?: () => void;
    onRun: (prompt: Prompt) => void;
}

function DashboardPromptSetItem({ prompt, onDelete, onRun }: DashboardPromptSetItemProps) {
    const { t } = useLanguage();
    const { handlePromptDelete, deletingPrompts, deleteError } = usePromptOperations();
    const contentRef = useRef<HTMLDivElement>(null);
    const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
    
    const isDeleting = deletingPrompts.has(prompt.id);
    
    const handleDeleteClick = async () => {
        if (showDeleteConfirm) {
            const success = await handlePromptDelete(prompt.id);
            if (success && onDelete) {
                onDelete();
            }
            setShowDeleteConfirm(false);
        } else {
            setShowDeleteConfirm(true);
        }
    };

    const handleCancelDelete = () => {
        setShowDeleteConfirm(false);
    };

    const handleRun = () => {
        onRun(prompt);
    };

    const handleShare = () => {
        console.log('Sharing prompt:', prompt);
    };

    return (
        <div 
            className={styles.promptItem}
        >
            <div className={styles.promptMain}>
                <div className={styles.promptContent}>
                    <div className={styles.promptInfo}>
                        <h3 className={styles.promptName}>
                            {prompt.name}
                        </h3>
                        {prompt.createdAt && (
                            <p className={styles.promptDate}>
                                {t('promptset.created')}: {new Date(prompt.createdAt).toLocaleDateString('de-DE')}
                            </p>
                        )}
                    </div>
                    
                    <div ref={contentRef}>
                        <p className={styles.promptText}>
                            {prompt.content}
                        </p>
                    </div>
                </div>
                
                <div className={styles.actionButtons}>
                    <button
                        onClick={handleRun}
                        className={`${styles.actionButton} ${styles.runButton}`}
                        title={t('promptset.run_tooltip')}
                    >
                        <FaArrowRight size={16} />
                    </button>
                    
                    <button
                        onClick={handleShare}
                        className={`${styles.actionButton} ${styles.shareButton}`}
                        title={t('promptset.share_tooltip')}
                    >
                        <BsShareFill size={16} />
                    </button>
                    
                    <button
                        onClick={handleDeleteClick}
                        disabled={isDeleting}
                        className={`${styles.actionButton} ${styles.deleteButton} ${showDeleteConfirm ? styles.confirm : ''}`}
                        title={showDeleteConfirm ? t('promptset.confirm_delete') : t('promptset.delete_tooltip')}
                        onBlur={handleCancelDelete}
                    >
                        <AiOutlineDelete size={16} />
                        {isDeleting && <span className={styles.actionText}>{t('promptset.deleting')}</span>}
                        {showDeleteConfirm && <span className={styles.actionText}>{t('promptset.confirm_click')}</span>}
                    </button>
                </div>
            </div>
            
            {deleteError && (
                <div className={styles.errorMessage}>
                    {t('promptset.delete_error')}: {deleteError}
                </div>
            )}
            
            {isDeleting && (
                <div className={styles.deletingMessage}>
                    {t('promptset.deleting_message')}
                </div>
            )}
        </div>
    );
}

export default DashboardPromptSetItem;