import React from 'react';
import PropTypes from 'prop-types';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';

import './Css/ImageGallery.css';
import { getImageSrc, getGroupPreviewSrc } from '../../Utils/imageUtils';

// Helper function: Calculate days until deletion (7 days after upload)
const getDaysUntilDeletion = (uploadDate) => {
    const CLEANUP_DAYS = 7;
    const upload = new Date(uploadDate);
    const deleteDate = new Date(upload);
    deleteDate.setDate(deleteDate.getDate() + CLEANUP_DAYS);
    
    const now = new Date();
    const diffTime = deleteDate - now;
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    
    return Math.max(0, diffDays);
};

const ImageGalleryCard = ({ 
    item, 
    onApprove, 
    onViewImages, 
    onDelete, 
    isPending, 
    showActions = true,
    index,
    mode = 'group', // 'group', 'moderation', or 'preview'
    hidePreview = false, // Hide the preview image section
    enableReordering = false, // Enable drag-and-drop reordering
    isDragOverlay = false, // Special styling when used as drag overlay
    isEditMode = false, // Edit mode for descriptions
    onEditMode = null, // Callback to toggle edit mode
    imageDescription = '', // Image description text
    onDescriptionChange = null // Callback for description changes
}) => {
    // Handle both group data and individual image preview data
    let previewUrl = null;
    let title = '';
    let subtitle = '';
    let description = '';
    let uploadDate = '';
    let imageCount = 0;
    let itemId = '';

    if (mode === 'preview' || mode === 'single-image') {
        // Preview mode: display individual images
        
        // Special handling for upload preview (blob URLs)
        if (item.url && (item.url.startsWith('blob:') || item.url.startsWith('data:'))) {
            previewUrl = item.url;
        } else {
            // Use standard image source logic for server images
            previewUrl = getImageSrc(item, true);
        }
        
        title = item.originalName || item.name || 'Bild';
        
        // Show capture date if available
        if (item.captureDate) {
            subtitle = `Aufnahme: ${new Date(item.captureDate).toLocaleDateString('de-DE')}`;
        }
        
        itemId = item.id || `fallback-${index}`;
    } else {
        // Group mode: display group information
        const group = item;
        
        // Use preview image from first image in group
        previewUrl = getGroupPreviewSrc(group, true);
        
        title = group.title;
        // Only show name if it exists and is not empty/null/undefined
        subtitle = (group.name && group.name !== 'null') ? `${group.year} • ${group.name}` : `${group.year}`;
        description = group.description;
        uploadDate = group.uploadDate;
        imageCount = group.imageCount;
        itemId = group.groupId;
    }

    // Drag-and-Drop setup (only for reorderable items)
    const {
        attributes,
        listeners,
        setNodeRef,
        transform,
        transition,
        isDragging
    } = useSortable({
        id: itemId,
        disabled: !enableReordering
    });

    const style = {
        transform: CSS.Transform.toString(transform),
        transition,
        opacity: isDragging ? 0.5 : 1,
        cursor: enableReordering ? 'grab' : 'default'
    };

    // CSS classes for different states
    const cardClasses = [
        'image-gallery-card',
        isPending ? 'pending' : 'approved',
        'card-stretch',
        enableReordering ? 'reorderable' : '',
        isDragging ? 'dragging' : '',
        isDragOverlay ? 'drag-overlay' : ''
    ].filter(Boolean).join(' ');

    return (
        <div 
            ref={setNodeRef}
            style={style}
            className={cardClasses}
            {...attributes}
            {...(enableReordering ? listeners : {})}
        >
            {!hidePreview && (
                <div className="image-gallery-card-preview">
                    {previewUrl ? (
                        <img src={previewUrl} alt="Preview" className="image-gallery-card-preview-image" />
                    ) : (
                        <div className="image-gallery-card-no-preview">Kein Vorschaubild</div>
                    )}
                    
                    {/* Drag Handle - nur sichtbar wenn Reordering aktiviert */}
                    {enableReordering && (
                        <div className="drag-handle" title="Bild verschieben">
                            <span>≡≡</span>
                        </div>
                    )}
                    
                    {mode === 'preview' && index !== undefined && (
                        <div className="image-gallery-card-image-order">{index + 1}</div>
                    )}
                    
                    {mode !== 'preview' && imageCount > 0 && (
                        <div className="image-gallery-card-image-count">{imageCount} Bilder</div>
                    )}
                </div>
            )}
            
            <div className="image-gallery-card-info">
                <h3>{title}</h3>
                {subtitle && <p className="image-gallery-card-meta">{subtitle}</p>}
                {description && (
                    <p className="image-gallery-card-description">{description}</p>
                )}
                {uploadDate && (
                    <p className="image-gallery-card-upload-date">
                        Hochgeladen: {new Date(uploadDate).toLocaleDateString('de-DE')}
                    </p>
                )}
                
                {/* Countdown for unapproved groups */}
                {mode === 'moderation' && isPending && uploadDate && (
                    <div className="deletion-countdown">
                        <span className="countdown-icon">⏰</span>
                        <span className="countdown-text">
                            Wird gelöscht in: {getDaysUntilDeletion(uploadDate)} Tagen
                        </span>
                    </div>
                )}
                
                {/* Edit-Mode: Textarea for image description */}
                {isEditMode && mode === 'preview' && (
                    <div className="image-description-edit">
                        <textarea
                            value={imageDescription || ''}
                            onChange={(e) => onDescriptionChange?.(itemId, e.target.value)}
                            onKeyDown={(e) => e.stopPropagation()}
                            onKeyUp={(e) => e.stopPropagation()}
                            onKeyPress={(e) => e.stopPropagation()}
                            placeholder={`Beschreibung für "${item.originalName || item.name}"...`}
                            maxLength={200}
                            rows={2}
                        />
                        <span className={`char-counter ${(imageDescription || '').length >= 200 ? 'limit-reached' : ''}`}>
                            {(imageDescription || '').length}/200
                        </span>
                    </div>
                )}
                
                {/* Display-only mode: Show existing description */}
                {!isEditMode && imageDescription && (mode === 'preview' || mode === 'single-image') && (
                    <div className="image-description-display">
                        <em>{imageDescription}</em>
                    </div>
                )}
                
                {/* Additional metadata for preview mode */}
                {mode === 'preview' && item.remoteUrl && item.remoteUrl.includes('/download/') && (
                    <div className="image-gallery-card-file-meta">
                        Server-Datei: {item.remoteUrl.split('/').pop()}
                    </div>
                )}
                {mode === 'preview' && item.filePath && !item.remoteUrl && (
                    <div className="image-gallery-card-file-meta">
                        Server-Datei: {item.filePath.split('/').pop()}
                    </div>
                )}
            </div>
            
            {/* Only show actions section if there are actions to display */}
            {(showActions || (mode !== 'single-image' && !showActions)) && (
                <div className="image-gallery-card-actions">
                    {showActions ? (
                        mode === 'preview' ? (
                            // Preview mode actions (for upload preview)
                            <>
                                <button 
                                    className="btn btn-danger"
                                    onClick={() => onDelete(index !== undefined ? index : itemId)}
                                >
                                    🗑️ Löschen
                                </button>
                                {!isEditMode ? (
                                    <button 
                                        className="btn btn-primary btn-sm"
                                        onClick={() => onEditMode?.(true)}
                                    >
                                        ✏️ Edit
                                    </button>
                                ) : (
                                    <button 
                                        className="btn btn-success btn-sm"
                                        onClick={() => onEditMode?.(false)}
                                    >
                                        ✅ Fertig
                                    </button>
                                )}
                            </>
                        ) : (
                            // Moderation mode actions (for existing groups)
                            <>
                                <button 
                                    className="btn btn-secondary"
                                    onClick={() => onViewImages(item)}
                                >
                                    ✏️ Gruppe editieren
                                </button>
                                
                                {isPending ? (
                                    <button 
                                        className="btn btn-success"
                                        onClick={() => onApprove(itemId, true)}
                                    >
                                        ✅ Freigeben
                                    </button>
                                ) : (
                                    <button 
                                        className="btn btn-warning"
                                        onClick={() => onApprove(itemId, false)}
                                    >
                                        ⏸️ Sperren
                                    </button>
                                )}
                                
                                <button 
                                    className="btn btn-danger"
                                    onClick={() => onDelete(itemId)}
                                >
                                    🗑️ Löschen
                                </button>
                            </>
                        )
                    ) : mode !== 'single-image' ? (
                        // Public view mode (only for group cards, not single images)
                        <button
                            className="view-button"
                            onClick={() => onViewImages(item)}
                            title="Anzeigen"
                        >
                            Anzeigen
                        </button>
                    ) : null}
                </div>
            )}
        </div>
    );
};

ImageGalleryCard.propTypes = {
    item: PropTypes.object.isRequired,
    onApprove: PropTypes.func,
    onViewImages: PropTypes.func,
    onDelete: PropTypes.func,
    isPending: PropTypes.bool,
    showActions: PropTypes.bool,
    index: PropTypes.number,
    mode: PropTypes.oneOf(['group', 'moderation', 'preview', 'single-image']),
    hidePreview: PropTypes.bool,
    enableReordering: PropTypes.bool,
    isDragOverlay: PropTypes.bool,
    isEditMode: PropTypes.bool,
    onEditMode: PropTypes.func,
    imageDescription: PropTypes.string,
    onDescriptionChange: PropTypes.func
};

ImageGalleryCard.defaultProps = {
    onApprove: () => {},
    onViewImages: () => {},
    onDelete: () => {},
    isPending: false,
    showActions: true,
    mode: 'group',
    hidePreview: false,
    enableReordering: false,
    isDragOverlay: false,
    isEditMode: false,
    onEditMode: null,
    imageDescription: '',
    onDescriptionChange: null
};

export default ImageGalleryCard;
