import { useTranslation } from 'react-i18next';
import { getTranslatedText } from '../../utils/i18nUtils';
import { ItemStatBadges } from './ItemStatBadges';
import { GameProgressBar } from './GameProgressBar';

interface ItemTooltipContentProps {
    item: any;
    showValue?: boolean;  // Show item value (for trading)
    valueDisplayType?: 'unit' | 'total';
    tradeMarkup?: number; // Multiplier for displayed value
    showDurability?: boolean;  // Show durability bar (default: true if available)
    actionHint?: string;
}

/**
 * Reusable component for rendering rich item tooltip content.
 * Used in inventory, ground items, trading, and equipped items.
 */
export const ItemTooltipContent = ({
    item,
    showValue = false,
    valueDisplayType = 'total',
    tradeMarkup,
    showDurability = true,
    actionHint
}: ItemTooltipContentProps) => {
    const { t } = useTranslation();

    const maxDurability = item.max_durability;
    const currentDurability = item.durability;
    const hasDurability = showDurability && maxDurability && maxDurability > 0;

    return (
        <div className="item-tooltip-content">
            {/* Header */}
            <div className={`tooltip-header text-tier-${item.tier || 0}`}>
                {item.emoji} {getTranslatedText(item.name)}
            </div>

            {/* Description */}
            {item.description && (
                <div className="tooltip-desc">{getTranslatedText(item.description)}</div>
            )}

            {/* Weight/Volume */}
            <div className="tooltip-stats">
                <div>⚖️ {item.weight}kg {item.quantity > 1 && `(x${item.quantity})`}</div>
                <div>📦 {item.volume}L {item.quantity > 1 && `(x${item.quantity})`}</div>
            </div>

            {/* Value (for trading) */}
            {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="tooltip-value">
                        💰 {t('game.value')}: {Math.round(item.value * (tradeMarkup || 1) * multiplier)}
                    </div>
                );
            })()}

            {/* Stat Badges */}
            <ItemStatBadges item={item} />

            {/* Durability Bar */}
            {hasDurability && (
                <div style={{ marginTop: '0.5rem' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2px', fontSize: '0.8rem' }}>
                        <span>{t('game.durability')}</span>
                        <span>{currentDurability} / {maxDurability}</span>
                    </div>
                    <GameProgressBar
                        value={currentDurability}
                        max={maxDurability}
                        type="durability"
                        height="6px"
                        showText={false}
                    />
                </div>
            )}

            {/* Action Hint */}
            {actionHint && (
                <div style={{ marginTop: '0.5rem', paddingTop: '0.5rem', borderTop: '1px solid #444', color: '#aaa', fontSize: '0.8rem', fontStyle: 'italic', textAlign: 'center' }}>
                    {actionHint}
                </div>
            )}
        </div>
    );
};
