import React from 'react';
import { GameTooltip } from './GameTooltip';
import { ItemTooltipContent } from './ItemTooltipContent';
import { getAssetPath } from '../../utils/assetPath';
import { getTranslatedText } from '../../utils/i18nUtils';
import { GameProgressBar } from './GameProgressBar';

export interface GameItemCardProps {
    item: any;
    onClick?: (e: React.MouseEvent) => void;

    // Display Flags
    showTooltip?: boolean;
    showQuantity?: boolean;
    showEquipped?: boolean;
    showValue?: boolean;
    valueDisplayType?: 'unit' | 'total';
    showDurability?: boolean;
    actionHint?: string;

    // Trade Data
    tradeMarkup?: number;

    // Drag & Drop
    draggable?: boolean;
    onDragStart?: (e: React.DragEvent) => void;

    // Styling Overrides
    className?: string;
    style?: React.CSSProperties;
    isActive?: boolean;
}

export const GameItemCard: React.FC<GameItemCardProps> = ({
    item,
    onClick,
    showTooltip = true,
    showQuantity = true,
    showEquipped = false,
    showValue = false,
    valueDisplayType = 'total',
    showDurability = true,
    tradeMarkup = 1,
    draggable = false,
    onDragStart,
    className = '',
    style = {},
    isActive = false,
    actionHint
}) => {
    if (!item) return null;

    // Resolve tooltip content
    const tooltipContent = showTooltip ? (
        <ItemTooltipContent
            item={item}
            showValue={showValue}
            valueDisplayType={valueDisplayType}
            tradeMarkup={tradeMarkup}
            actionHint={actionHint}
        />
    ) : null;

    // Use a unified class name 'game-item-card'
    const cardClasses = [
        'game-item-card',
        `text-tier-${item.tier || 0}`,
        isActive ? 'active' : '',
        showEquipped && item.is_equipped ? 'equipped' : '',
        className
    ].filter(Boolean).join(' ');

    const preventDragHandler = (e: React.DragEvent) => {
        e.preventDefault();
    };

    const cardContent = (
        <div
            className={cardClasses}
            style={style}
            onClick={onClick}
            draggable={draggable}
            onDragStart={onDragStart}
        >
            <div className="game-item-image-wrapper">
                {item.image_path ? (
                    <img
                        src={getAssetPath(item.image_path)}
                        alt={getTranslatedText(item.name)}
                        className="game-item-img"
                        onDragStart={preventDragHandler}
                        onError={(e) => {
                            (e.target as HTMLImageElement).style.display = 'none';
                            (e.target as HTMLImageElement).nextElementSibling?.classList.remove('hidden');
                        }}
                    />
                ) : null}
                <div
                    className={`game-item-emoji tier-${item.tier || 0} ${item.image_path ? 'hidden' : ''}`}
                    style={{ fontSize: '2.5rem' }}
                >
                    {item.emoji || '📦'}
                </div>
            </div>

            {/* Equipped Badge */}
            {showEquipped && item.is_equipped && (
                <div className="item-equipped-indicator">E</div>
            )}

            {/* Quantity Badge */}
            {showQuantity && (item.is_infinite || (item._displayQuantity || item.quantity) > 1) && (
                <div className="item-quantity-badge">
                    {item.is_infinite ? '∞' : `x${item._displayQuantity || item.quantity}`}
                </div>
            )}

            {/* Value Overlay (usually for Trade) */}
            {showValue && item.value !== undefined && (() => {
                const qty = item.is_infinite ? 1 : (item._displayQuantity !== undefined ? item._displayQuantity : item.quantity) || 1;
                const multiplier = valueDisplayType === 'total' ? qty : 1;
                return (
                    <div className="game-item-value-badge">
                        {Math.round(item.value * tradeMarkup * multiplier)}
                    </div>
                );
            })()}

            {/* Durability Bar */}
            {showDurability && item.max_durability && item.max_durability > 0 && (
                <div className="game-item-durability-wrapper" style={{ width: '85%', position: 'absolute', bottom: '4px', left: '50%', transform: 'translateX(-50%)' }}>
                    <GameProgressBar
                        value={item.durability}
                        max={item.max_durability}
                        type="durability"
                        height="4px"
                        showText={false}
                    />
                </div>
            )}
        </div>
    );

    // If tooltip is enabled, wrap it. Otherwise return bare card.
    if (showTooltip && tooltipContent) {
        return (
            <GameTooltip content={tooltipContent}>
                {cardContent}
            </GameTooltip>
        );
    }

    return cardContent;
};
