import { Card } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';
import { getItemData, loadItemDatabase, parseDescriptionSegments } from '@/services/item-database';
import React, { createContext, useContext, useEffect, useState } from 'react';

const ItemDBContext = createContext<{ loaded: boolean }>({ loaded: false });

function useItemDB() {
    const { loaded } = useContext(ItemDBContext);
    return loaded;
}

export interface DecodedItemStats {
    level?: number | null;
    durability?: { current: number | null; max: number | null };
    min_physical_damage?: number | null;
    max_physical_damage?: number | null;
    min_magic_damage?: number | null;
    max_magic_damage?: number | null;
    physical_attack?: number | null;
    magic_attack?: number | null;
    physical_defense?: number | null;
    dodge?: number | null;
    evasion?: number | null;
    hp?: number | null;
    mp?: number | null;
    metal_resistance?: number | null;
    wood_resistance?: number | null;
    water_resistance?: number | null;
    fire_resistance?: number | null;
    earth_resistance?: number | null;
    sockets_count?: number;
    addons_count?: number;
    addons?: {
        normal_addons: Array<{ id: number; value: number; description?: string }>;
        refine_addons: Array<{ id: number; value: number; level?: number; description?: string }>;
        special_addons: Array<{ id: number; value: number; level?: number; description?: string }>;
        socket_addons: Array<{ index: number; id: number; value: number; description?: string }>;
        engrave_addons: Array<{ id: number; value: number; description?: string }>;
    };
}

export interface InventoryItem {
    id: number;
    count: number;
    max_count: number;
    pos: number;
    data?: string;
    proctype?: number;
    expire_date?: number;
    guid1?: number;
    guid2?: number;
    mask?: number;
    decoded?: DecodedItemStats;
}

// Equipment slot definitions with positions matching inventory.html
const equipmentSlots = [
    // Left Column
    { pos: 20, name: 'Talisman', icon: '护身符.png', left: 15, top: 66 },
    { pos: 21, name: 'Spirit Charm', icon: '守神符.png', left: 53, top: 66 },
    { pos: 12, name: 'Wing', icon: '翅膀.png', left: 91, top: 66 },
    { pos: 2, name: 'Necklace', icon: '项链.png', left: 15, top: 111 },
    { pos: 3, name: 'Cape', icon: '披风.png', left: 53, top: 111 },
    { pos: 18, name: 'Tome', icon: '天书.png', left: 91, top: 111 },
    { pos: 8, name: 'Wristguard', icon: '护腕.png', left: 15, top: 156 },
    { pos: 5, name: 'Belt', icon: '腰饰.png', left: 53, top: 156 },
    { pos: 22, name: 'Bag', icon: '锦囊.png', left: 91, top: 156 },
    { pos: 9, name: 'Ring 1', icon: '戒指1.png', left: 15, top: 201 },
    { pos: 10, name: 'Ring 2', icon: '戒指2.png', left: 53, top: 201 },
    { pos: 23, name: 'Pet', icon: '精灵.png', left: 91, top: 201 },
    // Right Column
    { pos: 24, name: 'Certificate', icon: '售卖凭证.png', left: 204, top: 66 },
    { pos: 1, name: 'Helmet', icon: '头盔.png', left: 242, top: 66 },
    { pos: 19, name: 'Trumpet', icon: '喇叭.png', left: 280, top: 66 },
    { pos: 26, name: 'Token', icon: '势力令牌.png', left: 204, top: 111 },
    { pos: 4, name: 'Armor', icon: '上衣.png', left: 242, top: 111 },
    { pos: 17, name: 'HP Card', icon: '优化符.png', left: 280, top: 111 },
    { pos: 27, name: 'Skill', icon: '物品技能.png', left: 204, top: 156 },
    { pos: 6, name: 'Leggings', icon: '裤子.png', left: 242, top: 156 },
    { pos: 0, name: 'Weapon', icon: '武器1.png', left: 280, top: 156 },
    { pos: 38, name: 'Astrolabe', icon: '星盘.png', left: 204, top: 201 },
    { pos: 7, name: 'Boots', icon: '鞋.png', left: 242, top: 201 },
    { pos: 11, name: 'Weapon 2', icon: '武器2.png', left: 280, top: 201 },
];

// Fashion equipment slots - shown in Fashion mode
const fashionSlots = [
    // Left Column
    { pos: 16, name: 'Wristguard (Fashion)', icon: '护腕（时装）.png', left: 48, top: 70, width: 48, height: 48 },
    { pos: 29, name: 'Weapon (Fashion)', icon: '武器（时装）.png', left: 48, top: 129, width: 48, height: 48 },
    { pos: 15, name: 'Boots (Fashion)', icon: '鞋（时装）.png', left: 48, top: 188, width: 48, height: 48 },
    // Right Column
    { pos: 25, name: 'Helmet (Fashion)', icon: '头盔（时装）.png', left: 237, top: 70, width: 48, height: 48 },
    { pos: 13, name: 'Armor (Fashion)', icon: '上衣（时装）.png', left: 237, top: 129, width: 48, height: 48 },
    { pos: 14, name: 'Pants (Fashion)', icon: '裤子（时装）.png', left: 237, top: 188, width: 48, height: 48 },
];

interface ItemSlotProps {
    item?: InventoryItem;
    slotNumber: number;
    onClick?: () => void;
}

function ItemSlot({ item, onClick }: ItemSlotProps) {
    const dbLoaded = useItemDB();
    const [isHovered, setIsHovered] = useState(false);

    if (!item || item.id === 0) {
        return (
            <div
                className={cn(
                    'border-border/50 bg-muted/30 box-border h-[38px] w-[38px] rounded-sm border',
                    isHovered && 'border-primary/50 bg-muted/50',
                    onClick && 'cursor-pointer',
                )}
                onMouseEnter={() => setIsHovered(true)}
                onMouseLeave={() => setIsHovered(false)}
                onClick={onClick}
            />
        );
    }

    const itemData = dbLoaded ? getItemData(item.id) : null;
    const iconUrl = `/img/Icons/${item.id}.png`;

    return (
        <TooltipProvider delayDuration={200}>
            <Tooltip>
                <TooltipTrigger asChild>
                    <div
                        className={cn(
                            'border-border/50 bg-muted/30 relative box-border flex h-[38px] w-[38px] items-center justify-center rounded-sm border',
                            isHovered && 'border-primary/50 bg-muted/50',
                            onClick && 'cursor-pointer',
                        )}
                        onMouseEnter={() => setIsHovered(true)}
                        onMouseLeave={() => setIsHovered(false)}
                        onClick={onClick}
                    >
                        <img
                            src={iconUrl}
                            alt={itemData?.name || `Item ${item.id}`}
                            className="h-8 w-8 object-contain"
                            onError={(e) => {
                                (e.target as HTMLImageElement).style.display = 'none';
                            }}
                        />
                        {item.count > 1 && (
                            <span className="text-foreground absolute right-0.5 bottom-0.5 text-[9px] font-bold drop-shadow-md">{item.count}</span>
                        )}
                    </div>
                </TooltipTrigger>
                <TooltipContent side="top" className="max-w-sm border-gray-700 bg-black/95 p-3">
                    <div className="space-y-2">
                        <div className="flex items-center gap-2">
                            <img src={iconUrl} alt="" className="h-8 w-8 object-contain" />
                            <div>
                                {itemData ? (
                                    <p className="text-sm font-medium" style={{ color: `#${itemData.color}` }}>
                                        {itemData.name}
                                        {item.decoded?.sockets_count != null && item.decoded.sockets_count > 0 && (
                                            <span className="text-yellow-400"> ({item.decoded.sockets_count} slot)</span>
                                        )}
                                        {item.decoded?.addons?.refine_addons?.[0]?.level != null &&
                                            item.decoded.addons.refine_addons[0].level > 0 && (
                                                <span className="text-cyan-400"> +{item.decoded.addons.refine_addons[0].level}</span>
                                            )}
                                    </p>
                                ) : (
                                    <p className="text-sm font-medium">Item #{item.id}</p>
                                )}
                            </div>
                        </div>

                        {/* Decoded Stats */}
                        {item.decoded && (
                            <div className="border-border space-y-0.5 border-t pt-2 text-[10px]">
                                {item.decoded.level != null && (
                                    <p className="text-muted-foreground">
                                        Level: <span className="text-foreground">{item.decoded.level}</span>
                                    </p>
                                )}
                                {item.decoded.min_physical_damage != null &&
                                    item.decoded.max_physical_damage != null &&
                                    item.decoded.max_physical_damage > 0 && (
                                        <p className="text-muted-foreground">
                                            Physical Damage:{' '}
                                            <span className="text-foreground">
                                                {item.decoded.min_physical_damage} - {item.decoded.max_physical_damage}
                                            </span>
                                        </p>
                                    )}
                                {item.decoded.min_magic_damage != null &&
                                    item.decoded.max_magic_damage != null &&
                                    item.decoded.max_magic_damage > 0 && (
                                        <p className="text-muted-foreground">
                                            Magic Damage:{' '}
                                            <span className="text-foreground">
                                                {item.decoded.min_magic_damage} - {item.decoded.max_magic_damage}
                                            </span>
                                        </p>
                                    )}
                                {item.decoded.physical_attack != null && item.decoded.physical_attack > 0 && (
                                    <p className="text-muted-foreground">
                                        Physical Attack: <span className="text-foreground">{item.decoded.physical_attack}</span>
                                    </p>
                                )}
                                {item.decoded.magic_attack != null && item.decoded.magic_attack > 0 && (
                                    <p className="text-muted-foreground">
                                        Magic Attack: <span className="text-foreground">{item.decoded.magic_attack}</span>
                                    </p>
                                )}
                                {item.decoded.physical_defense != null && item.decoded.physical_defense > 0 && (
                                    <p className="text-muted-foreground">
                                        Physical Defense: <span className="text-foreground">{item.decoded.physical_defense}</span>
                                    </p>
                                )}
                                {item.decoded.durability?.current != null && (
                                    <p className="text-muted-foreground">
                                        Durability:{' '}
                                        <span className="text-foreground">
                                            {item.decoded.durability.current} / {item.decoded.durability.max}
                                        </span>
                                    </p>
                                )}
                                {item.decoded.dodge != null && item.decoded.dodge > 0 && (
                                    <p className="text-muted-foreground">
                                        Dodge: <span className="text-foreground">{item.decoded.dodge}</span>
                                    </p>
                                )}
                                {item.decoded.evasion != null && item.decoded.evasion > 0 && (
                                    <p className="text-muted-foreground">
                                        Evasion: <span className="text-foreground">{item.decoded.evasion}</span>
                                    </p>
                                )}
                                {item.decoded.hp != null && item.decoded.hp > 0 && (
                                    <p className="text-muted-foreground">
                                        HP: <span className="text-foreground">+{item.decoded.hp}</span>
                                    </p>
                                )}
                                {item.decoded.mp != null && item.decoded.mp > 0 && (
                                    <p className="text-muted-foreground">
                                        MP: <span className="text-foreground">+{item.decoded.mp}</span>
                                    </p>
                                )}

                                {/* Resistances */}
                                {item.decoded.metal_resistance != null && item.decoded.metal_resistance > 0 && (
                                    <p className="text-muted-foreground">
                                        Metal Resistance: <span className="text-foreground">{item.decoded.metal_resistance}</span>
                                    </p>
                                )}
                                {item.decoded.wood_resistance != null && item.decoded.wood_resistance > 0 && (
                                    <p className="text-muted-foreground">
                                        Wood Resistance: <span className="text-foreground">{item.decoded.wood_resistance}</span>
                                    </p>
                                )}
                                {item.decoded.water_resistance != null && item.decoded.water_resistance > 0 && (
                                    <p className="text-muted-foreground">
                                        Water Resistance: <span className="text-foreground">{item.decoded.water_resistance}</span>
                                    </p>
                                )}
                                {item.decoded.fire_resistance != null && item.decoded.fire_resistance > 0 && (
                                    <p className="text-muted-foreground">
                                        Fire Resistance: <span className="text-foreground">{item.decoded.fire_resistance}</span>
                                    </p>
                                )}
                                {item.decoded.earth_resistance != null && item.decoded.earth_resistance > 0 && (
                                    <p className="text-muted-foreground">
                                        Earth Resistance: <span className="text-foreground">{item.decoded.earth_resistance}</span>
                                    </p>
                                )}

                                {/* Special Addons (Orange) */}
                                {item.decoded.addons?.special_addons?.map((addon, idx) => (
                                    <p key={`special-${idx}`} className="text-orange-400">
                                        {addon.description}
                                    </p>
                                ))}

                                {/* Normal Addons (Blue) */}
                                {item.decoded.addons?.normal_addons?.map((addon, idx) => (
                                    <p key={`normal-${idx}`} className="text-blue-400">
                                        {addon.description}
                                    </p>
                                ))}

                                {/* Engrave Addons (Yellow) */}
                                {item.decoded.addons?.engrave_addons?.map((addon, idx) => (
                                    <p key={`engrave-${idx}`} className="text-yellow-400">
                                        {addon.description}
                                    </p>
                                ))}

                                {/* Socket Addons (Cyan) */}
                                {item.decoded.addons?.socket_addons?.map((addon, idx) => (
                                    <p key={`socket-${idx}`} style={{ color: '#00ffff' }}>
                                        {addon.description}
                                    </p>
                                ))}
                            </div>
                        )}

                        {/* Item Description */}
                        {itemData?.rawDescription && (
                            <div className="border-border border-t pt-2 text-xs whitespace-pre-wrap">
                                {parseDescriptionSegments(itemData.rawDescription).map((segment, idx) => (
                                    <span key={idx} style={{ color: `#${segment.color}` }}>
                                        {segment.text}
                                    </span>
                                ))}
                            </div>
                        )}
                    </div>
                </TooltipContent>
            </Tooltip>
        </TooltipProvider>
    );
}

// Equipment slot component
interface EquipmentSlotProps {
    slot: (typeof equipmentSlots)[0];
    item?: InventoryItem;
    onClick?: () => void;
}

function EquipmentSlot({ slot, item, onClick }: EquipmentSlotProps) {
    const dbLoaded = useItemDB();
    const [isHovered, setIsHovered] = useState(false);

    const itemData = item && dbLoaded ? getItemData(item.id) : null;
    const iconUrl = item ? `/img/Icons/${item.id}.png` : null;
    const slotIconUrl = `/interfaces/inventory_assets/系统/背包/装备男女通用图标/${slot.icon}`;

    const slotContent = (
        <div
            className={cn(
                'border-border/30 bg-muted/20 absolute flex h-[38px] w-[38px] items-center justify-center rounded-sm border transition-all',
                isHovered && 'border-primary/50 bg-muted/40',
                onClick && 'cursor-pointer',
            )}
            style={{
                left: `${slot.left}px`,
                top: `${slot.top}px`,
                backgroundImage: `url('${slotIconUrl}')`,
                backgroundSize: 'contain',
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center',
            }}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
            onClick={onClick}
        >
            {item && iconUrl && (
                <img
                    src={iconUrl}
                    alt={itemData?.name || `Item ${item.id}`}
                    className="h-8 w-8 object-contain"
                    style={{ pointerEvents: 'none' }}
                    onError={(e) => {
                        (e.target as HTMLImageElement).style.display = 'none';
                    }}
                />
            )}
        </div>
    );

    if (!item) {
        return slotContent;
    }

    return (
        <TooltipProvider delayDuration={200}>
            <Tooltip>
                <TooltipTrigger asChild>{slotContent}</TooltipTrigger>
                <TooltipContent side="top" className="max-w-sm border-gray-700 bg-black/95 p-3">
                    <div className="space-y-2">
                        <div className="flex items-center gap-2">
                            <img src={iconUrl || ''} alt="" className="h-8 w-8 object-contain" />
                            <div>
                                {itemData ? (
                                    <p className="text-sm font-medium" style={{ color: `#${itemData.color}` }}>
                                        {itemData.name}
                                        {item.decoded?.sockets_count != null && item.decoded.sockets_count > 0 && (
                                            <span className="text-yellow-400"> ({item.decoded.sockets_count} slot)</span>
                                        )}
                                        {item.decoded?.addons?.refine_addons?.[0]?.level != null &&
                                            item.decoded.addons.refine_addons[0].level > 0 && (
                                                <span className="text-cyan-400"> +{item.decoded.addons.refine_addons[0].level}</span>
                                            )}
                                    </p>
                                ) : (
                                    <p className="text-sm font-medium">Item #{item.id}</p>
                                )}
                            </div>
                        </div>

                        {/* Decoded Stats */}
                        {item.decoded && (
                            <div className="border-border space-y-0.5 border-t pt-2 text-[10px]">
                                {item.decoded.level != null && (
                                    <p className="text-muted-foreground">
                                        Level: <span className="text-foreground">{item.decoded.level}</span>
                                    </p>
                                )}
                                {item.decoded.min_physical_damage != null &&
                                    item.decoded.max_physical_damage != null &&
                                    item.decoded.max_physical_damage > 0 && (
                                        <p className="text-muted-foreground">
                                            Physical Damage:{' '}
                                            <span className="text-foreground">
                                                {item.decoded.min_physical_damage} - {item.decoded.max_physical_damage}
                                            </span>
                                        </p>
                                    )}
                                {item.decoded.min_magic_damage != null &&
                                    item.decoded.max_magic_damage != null &&
                                    item.decoded.max_magic_damage > 0 && (
                                        <p className="text-muted-foreground">
                                            Magic Damage:{' '}
                                            <span className="text-foreground">
                                                {item.decoded.min_magic_damage} - {item.decoded.max_magic_damage}
                                            </span>
                                        </p>
                                    )}
                                {item.decoded.physical_attack != null && item.decoded.physical_attack > 0 && (
                                    <p className="text-muted-foreground">
                                        Physical Attack: <span className="text-foreground">{item.decoded.physical_attack}</span>
                                    </p>
                                )}
                                {item.decoded.magic_attack != null && item.decoded.magic_attack > 0 && (
                                    <p className="text-muted-foreground">
                                        Magic Attack: <span className="text-foreground">{item.decoded.magic_attack}</span>
                                    </p>
                                )}
                                {item.decoded.physical_defense != null && item.decoded.physical_defense > 0 && (
                                    <p className="text-muted-foreground">
                                        Physical Defense: <span className="text-foreground">{item.decoded.physical_defense}</span>
                                    </p>
                                )}
                                {item.decoded.durability?.current != null && (
                                    <p className="text-muted-foreground">
                                        Durability:{' '}
                                        <span className="text-foreground">
                                            {item.decoded.durability.current} / {item.decoded.durability.max}
                                        </span>
                                    </p>
                                )}
                                {item.decoded.dodge != null && item.decoded.dodge > 0 && (
                                    <p className="text-muted-foreground">
                                        Dodge: <span className="text-foreground">{item.decoded.dodge}</span>
                                    </p>
                                )}
                                {item.decoded.evasion != null && item.decoded.evasion > 0 && (
                                    <p className="text-muted-foreground">
                                        Evasion: <span className="text-foreground">{item.decoded.evasion}</span>
                                    </p>
                                )}
                                {item.decoded.hp != null && item.decoded.hp > 0 && (
                                    <p className="text-muted-foreground">
                                        HP: <span className="text-foreground">+{item.decoded.hp}</span>
                                    </p>
                                )}
                                {item.decoded.mp != null && item.decoded.mp > 0 && (
                                    <p className="text-muted-foreground">
                                        MP: <span className="text-foreground">+{item.decoded.mp}</span>
                                    </p>
                                )}

                                {/* Resistances */}
                                {item.decoded.metal_resistance != null && item.decoded.metal_resistance > 0 && (
                                    <p className="text-muted-foreground">
                                        Metal Resistance: <span className="text-foreground">{item.decoded.metal_resistance}</span>
                                    </p>
                                )}
                                {item.decoded.wood_resistance != null && item.decoded.wood_resistance > 0 && (
                                    <p className="text-muted-foreground">
                                        Wood Resistance: <span className="text-foreground">{item.decoded.wood_resistance}</span>
                                    </p>
                                )}
                                {item.decoded.water_resistance != null && item.decoded.water_resistance > 0 && (
                                    <p className="text-muted-foreground">
                                        Water Resistance: <span className="text-foreground">{item.decoded.water_resistance}</span>
                                    </p>
                                )}
                                {item.decoded.fire_resistance != null && item.decoded.fire_resistance > 0 && (
                                    <p className="text-muted-foreground">
                                        Fire Resistance: <span className="text-foreground">{item.decoded.fire_resistance}</span>
                                    </p>
                                )}
                                {item.decoded.earth_resistance != null && item.decoded.earth_resistance > 0 && (
                                    <p className="text-muted-foreground">
                                        Earth Resistance: <span className="text-foreground">{item.decoded.earth_resistance}</span>
                                    </p>
                                )}

                                {/* Special Addons (Orange) */}
                                {item.decoded.addons?.special_addons?.map((addon, idx) => (
                                    <p key={`special-${idx}`} className="text-orange-400">
                                        {addon.description}
                                    </p>
                                ))}

                                {/* Normal Addons (Blue) */}
                                {item.decoded.addons?.normal_addons?.map((addon, idx) => (
                                    <p key={`normal-${idx}`} className="text-blue-400">
                                        {addon.description}
                                    </p>
                                ))}

                                {/* Engrave Addons (Yellow) */}
                                {item.decoded.addons?.engrave_addons?.map((addon, idx) => (
                                    <p key={`engrave-${idx}`} className="text-yellow-400">
                                        {addon.description}
                                    </p>
                                ))}

                                {/* Socket Addons (Cyan) */}
                                {item.decoded.addons?.socket_addons?.map((addon, idx) => (
                                    <p key={`socket-${idx}`} style={{ color: '#00ffff' }}>
                                        {addon.description}
                                    </p>
                                ))}
                            </div>
                        )}

                        {/* Item Description */}
                        {itemData?.rawDescription && (
                            <div className="border-border border-t pt-2 text-xs whitespace-pre-wrap">
                                {parseDescriptionSegments(itemData.rawDescription).map((segment, idx) => (
                                    <span key={idx} style={{ color: `#${segment.color}` }}>
                                        {segment.text}
                                    </span>
                                ))}
                            </div>
                        )}
                    </div>
                </TooltipContent>
            </Tooltip>
        </TooltipProvider>
    );
}

// Fashion equipment slot component
interface FashionSlotProps {
    slot: (typeof fashionSlots)[0];
    item?: InventoryItem;
    onClick?: () => void;
}

function FashionSlot({ slot, item, onClick }: FashionSlotProps) {
    const dbLoaded = useItemDB();
    const [isHovered, setIsHovered] = useState(false);

    const itemData = item && dbLoaded ? getItemData(item.id) : null;
    const iconUrl = item ? `/img/Icons/${item.id}.png` : null;
    const slotIconUrl = `/interfaces/inventory_assets/系统/背包/时装男女通用图标/${slot.icon}`;

    const slotContent = (
        <div
            className={cn('absolute flex items-center justify-center transition-all', onClick && 'cursor-pointer')}
            style={{
                left: `${slot.left}px`,
                top: `${slot.top}px`,
                width: `${slot.width}px`,
                height: `${slot.height}px`,
                backgroundImage: `url('${slotIconUrl}')`,
                backgroundSize: 'contain',
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center',
                filter: isHovered ? 'brightness(1.2)' : 'brightness(1)',
            }}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
            onClick={onClick}
        >
            {item && iconUrl && (
                <img
                    src={iconUrl}
                    alt={itemData?.name || `Item ${item.id}`}
                    className="h-10 w-10 object-contain"
                    style={{ pointerEvents: 'none' }}
                    onError={(e) => {
                        (e.target as HTMLImageElement).style.display = 'none';
                    }}
                />
            )}
        </div>
    );

    if (!item) {
        return slotContent;
    }

    return (
        <TooltipProvider delayDuration={200}>
            <Tooltip>
                <TooltipTrigger asChild>{slotContent}</TooltipTrigger>
                <TooltipContent side="top" className="max-w-sm border-gray-700 bg-black/95 p-3">
                    <div className="space-y-2">
                        <div className="flex items-center gap-2">
                            <img src={iconUrl || ''} alt="" className="h-8 w-8 object-contain" />
                            <div>
                                {itemData ? (
                                    <p className="text-sm font-medium" style={{ color: `#${itemData.color}` }}>
                                        {itemData.name}
                                        {item.decoded?.sockets_count != null && item.decoded.sockets_count > 0 && (
                                            <span className="text-yellow-400"> ({item.decoded.sockets_count} slot)</span>
                                        )}
                                        {item.decoded?.addons?.refine_addons?.[0]?.level != null &&
                                            item.decoded.addons.refine_addons[0].level > 0 && (
                                                <span className="text-cyan-400"> +{item.decoded.addons.refine_addons[0].level}</span>
                                            )}
                                    </p>
                                ) : (
                                    <p className="text-sm font-medium">Item #{item.id}</p>
                                )}
                                <p className="text-muted-foreground text-xs">{slot.name}</p>
                            </div>
                        </div>

                        {/* Decoded Stats */}
                        {item.decoded && (
                            <div className="border-border space-y-0.5 border-t pt-2 text-[10px]">
                                {item.decoded.level != null && (
                                    <p className="text-muted-foreground">
                                        Level: <span className="text-foreground">{item.decoded.level}</span>
                                    </p>
                                )}
                                {item.decoded.durability?.current != null && (
                                    <p className="text-muted-foreground">
                                        Durability:{' '}
                                        <span className="text-foreground">
                                            {item.decoded.durability.current} / {item.decoded.durability.max}
                                        </span>
                                    </p>
                                )}
                                {item.decoded.dodge != null && item.decoded.dodge > 0 && (
                                    <p className="text-muted-foreground">
                                        Dodge: <span className="text-foreground">{item.decoded.dodge}</span>
                                    </p>
                                )}
                                {item.decoded.evasion != null && item.decoded.evasion > 0 && (
                                    <p className="text-muted-foreground">
                                        Evasion: <span className="text-foreground">{item.decoded.evasion}</span>
                                    </p>
                                )}
                                {item.decoded.hp != null && item.decoded.hp > 0 && (
                                    <p className="text-muted-foreground">
                                        HP: <span className="text-foreground">+{item.decoded.hp}</span>
                                    </p>
                                )}
                                {item.decoded.mp != null && item.decoded.mp > 0 && (
                                    <p className="text-muted-foreground">
                                        MP: <span className="text-foreground">+{item.decoded.mp}</span>
                                    </p>
                                )}

                                {/* Special Addons (Orange) */}
                                {item.decoded.addons?.special_addons?.map((addon, idx) => (
                                    <p key={`special-${idx}`} className="text-orange-400">
                                        {addon.description}
                                    </p>
                                ))}

                                {/* Normal Addons (Blue) */}
                                {item.decoded.addons?.normal_addons?.map((addon, idx) => (
                                    <p key={`normal-${idx}`} className="text-blue-400">
                                        {addon.description}
                                    </p>
                                ))}

                                {/* Engrave Addons (Yellow) */}
                                {item.decoded.addons?.engrave_addons?.map((addon, idx) => (
                                    <p key={`engrave-${idx}`} className="text-yellow-400">
                                        {addon.description}
                                    </p>
                                ))}
                            </div>
                        )}

                        {/* Item Description */}
                        {itemData?.rawDescription && (
                            <div className="border-border border-t pt-2 text-xs whitespace-pre-wrap">
                                {parseDescriptionSegments(itemData.rawDescription).map((segment, idx) => (
                                    <span key={idx} style={{ color: `#${segment.color}` }}>
                                        {segment.text}
                                    </span>
                                ))}
                            </div>
                        )}
                    </div>
                </TooltipContent>
            </Tooltip>
        </TooltipProvider>
    );
}

// Mode button component (for Normal/Fashion/Fitting buttons)
interface ModeBtnProps {
    label: string;
    active: boolean;
    onClick: () => void;
    width?: string;
}

function ModeBtn({ label, active, onClick, width = '64px' }: ModeBtnProps) {
    return (
        <button
            onClick={onClick}
            style={{
                width,
                height: '21px',
                cursor: 'pointer',
                background: active
                    ? 'linear-gradient(180deg, #6a6a4a 0%, #5a5a3a 50%, #4a4a2a 100%)'
                    : 'linear-gradient(180deg, #4a4a3a 0%, #3a3a2a 50%, #2a2a1a 100%)',
                border: active ? '1px solid #9a9a6a' : '1px solid #6a6a5a',
                borderRadius: '3px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: active ? '#ffffaa' : '#fffa87',
                fontSize: '10px',
                fontWeight: 'bold',
                textShadow: '1px 1px 1px #0a2332',
                transition: 'all 0.1s',
            }}
            onMouseEnter={(e) => {
                if (!active) {
                    e.currentTarget.style.background = 'linear-gradient(180deg, #5a5a4a 0%, #4a4a3a 50%, #3a3a2a 100%)';
                    e.currentTarget.style.borderColor = '#8a8a7a';
                }
            }}
            onMouseLeave={(e) => {
                if (!active) {
                    e.currentTarget.style.background = 'linear-gradient(180deg, #4a4a3a 0%, #3a3a2a 50%, #2a2a1a 100%)';
                    e.currentTarget.style.borderColor = '#6a6a5a';
                }
            }}
        >
            {label}
        </button>
    );
}

// Tab button component (for Normal Item/Quest Items/Fashion tabs)
interface TabBtnProps {
    label: string;
    active: boolean;
    onClick: () => void;
    width?: string;
}

function TabBtn({ label, active, onClick, width = '80px' }: TabBtnProps) {
    return (
        <button
            onClick={onClick}
            style={{
                width,
                height: '25px',
                cursor: 'pointer',
                background: active
                    ? 'linear-gradient(180deg, #6a5a3a 0%, #5a4a2a 50%, #4a3a1a 100%)'
                    : 'linear-gradient(180deg, #4a4030 0%, #3a3020 50%, #2a2010 100%)',
                border: active ? '1px solid #9a8a50' : '1px solid #6a5a40',
                borderRadius: '3px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: active ? '#ffeeaa' : '#fceacc',
                fontSize: '10px',
                fontWeight: 'bold',
                textShadow: '1px 1px 1px #0a2332',
                transition: 'all 0.1s',
            }}
            onMouseEnter={(e) => {
                if (!active) {
                    e.currentTarget.style.background = 'linear-gradient(180deg, #5a5040 0%, #4a4030 50%, #3a3020 100%)';
                    e.currentTarget.style.borderColor = '#8a7a50';
                }
            }}
            onMouseLeave={(e) => {
                if (!active) {
                    e.currentTarget.style.background = 'linear-gradient(180deg, #4a4030 0%, #3a3020 50%, #2a2010 100%)';
                    e.currentTarget.style.borderColor = '#6a5a40';
                }
            }}
        >
            {label}
        </button>
    );
}

export interface CharacterInventoryPanelProps {
    equipment: Record<number, InventoryItem>;
    pocket: Record<number, InventoryItem>;
    storehouse: Record<number, InventoryItem>;
    dress?: Record<number, InventoryItem>;
    material?: Record<number, InventoryItem>;
    generalcard?: Record<number, InventoryItem>;
    pocketCapacity?: number;
    storehouseCapacity?: number;
    pocketMoney?: number;
    storehouseMoney?: number;
    // Admin mode props
    editable?: boolean;
    storehouseTab?: 'store' | 'dress' | 'material' | 'generalcard' | 'waravatar';
    onStorehouseTabChange?: (tab: 'store' | 'dress' | 'material' | 'generalcard' | 'waravatar') => void;
    onEquipmentClick?: (item: InventoryItem | undefined, pos: number, slotName: string) => void;
    onPocketClick?: (item: InventoryItem | undefined, pos: number) => void;
    onStorehouseClick?: (item: InventoryItem | undefined, pos: number) => void;
    onDressClick?: (item: InventoryItem | undefined, pos: number) => void;
    onMaterialClick?: (item: InventoryItem | undefined, pos: number) => void;
    onGeneralcardClick?: (item: InventoryItem | undefined, pos: number) => void;
    onWarAvatarClick?: (item: InventoryItem | undefined, pos: number) => void;
    onPocketMoneyChange?: (value: number) => void;
    onStorehouseMoneyChange?: (value: number) => void;
}

export function CharacterInventoryPanel({
    equipment,
    pocket,
    storehouse,
    dress = {},
    material = {},
    generalcard = {},
    pocketCapacity = 32,
    storehouseCapacity = 32,
    pocketMoney = 0,
    storehouseMoney = 0,
    editable = false,
    storehouseTab = 'store',
    onStorehouseTabChange,
    onEquipmentClick,
    onPocketClick,
    onStorehouseClick,
    onDressClick,
    onMaterialClick,
    onGeneralcardClick,
    onWarAvatarClick,
    onPocketMoneyChange,
    onStorehouseMoneyChange,
}: CharacterInventoryPanelProps) {
    const [dbLoaded, setDbLoaded] = useState(false);
    const [currentMode, setCurrentMode] = useState<'normal' | 'fashion' | 'fitting'>('normal');
    const [editingPocketMoney, setEditingPocketMoney] = useState(false);
    const [editingStoreMoney, setEditingStoreMoney] = useState(false);
    const [pocketMoneyValue, setPocketMoneyValue] = useState(pocketMoney);
    const [storeMoneyValue, setStoreMoneyValue] = useState(storehouseMoney);

    useEffect(() => {
        loadItemDatabase().then(() => setDbLoaded(true));
    }, []);

    useEffect(() => {
        setPocketMoneyValue(pocketMoney);
    }, [pocketMoney]);

    useEffect(() => {
        setStoreMoneyValue(storehouseMoney);
    }, [storehouseMoney]);

    // Create array of slots for pocket
    const pocketSlots = Array.from({ length: pocketCapacity }, (_, i) => ({
        slotNumber: i,
        item: pocket[i],
    }));

    // Create array of slots for storehouse
    const storehouseSlots = Array.from({ length: storehouseCapacity }, (_, i) => ({
        slotNumber: i,
        item: storehouse[i],
    }));

    const handlePocketMoneyBlur = () => {
        setEditingPocketMoney(false);
        if (pocketMoneyValue !== pocketMoney && onPocketMoneyChange) {
            onPocketMoneyChange(pocketMoneyValue);
        }
    };

    const handleStoreMoneyBlur = () => {
        setEditingStoreMoney(false);
        if (storeMoneyValue !== storehouseMoney && onStorehouseMoneyChange) {
            onStorehouseMoneyChange(storeMoneyValue);
        }
    };

    return (
        <ItemDBContext.Provider value={{ loaded: dbLoaded }}>
            <div className="flex flex-wrap justify-center gap-5">
                {/* Equipment Panel */}
                <Card className="relative h-[474px] w-[336px] overflow-hidden">
                    {/* Background Pattern */}
                    <div className="bg-muted/20 border-border/30 absolute top-[48px] left-[5px] h-[200px] w-[324px] rounded-sm border" />

                    {/* Separator */}
                    <div className="bg-border absolute top-[251px] left-[14px] h-[1px] w-[308px]" />

                    {/* Mode Buttons */}
                    <div className="absolute flex gap-0.5" style={{ left: '60px', top: '43px' }}>
                        <ModeBtn label="Normal" active={currentMode === 'normal'} onClick={() => setCurrentMode('normal')} width="64px" />
                        <ModeBtn label="Fashion" active={currentMode === 'fashion'} onClick={() => setCurrentMode('fashion')} width="64px" />
                        <ModeBtn label="Fitting" active={currentMode === 'fitting'} onClick={() => setCurrentMode('fitting')} width="68px" />
                    </div>

                    {/* Character Silhouette - Normal Mode */}
                    {currentMode === 'normal' && (
                        <img
                            src="/interfaces/inventory_assets/系统/背包/灵脉男普通.png"
                            alt="Character"
                            className="absolute"
                            style={{
                                left: '130px',
                                top: '72px',
                                width: '79px',
                                height: '150px',
                            }}
                        />
                    )}

                    {/* Character Silhouette - Fashion Mode */}
                    {currentMode === 'fashion' && (
                        <img
                            src="/interfaces/inventory_assets/系统/背包/时装男普通.png"
                            alt="Fashion Character"
                            className="absolute"
                            style={{
                                left: '129px',
                                top: '59px',
                                width: '80px',
                                height: '194px',
                            }}
                        />
                    )}

                    {/* Equipment Slots - Only show in normal mode */}
                    {currentMode === 'normal' &&
                        equipmentSlots.map((slot) => (
                            <EquipmentSlot
                                key={slot.pos}
                                slot={slot}
                                item={equipment[slot.pos]}
                                onClick={editable && onEquipmentClick ? () => onEquipmentClick(equipment[slot.pos], slot.pos, slot.name) : undefined}
                            />
                        ))}

                    {/* Fashion Equipment Slots - Only show in fashion mode */}
                    {currentMode === 'fashion' &&
                        fashionSlots.map((slot) => (
                            <FashionSlot
                                key={slot.pos}
                                slot={slot}
                                item={equipment[slot.pos]}
                                onClick={editable && onEquipmentClick ? () => onEquipmentClick(equipment[slot.pos], slot.pos, slot.name) : undefined}
                            />
                        ))}

                    {/* Astrolabe Button - Only show in normal mode */}
                    {currentMode === 'normal' && (
                        <img
                            src="/interfaces/inventory_assets/系统/背包/星盘普通.png"
                            alt="Astrolabe"
                            className="absolute"
                            style={{
                                left: '129px',
                                top: '214px',
                                width: '79px',
                                height: '31px',
                            }}
                        />
                    )}

                    {/* Inventory Tabs - Storehouse Controls */}
                    {editable && onStorehouseTabChange && (
                        <div className="absolute flex gap-0" style={{ left: '10px', top: '252px' }}>
                            <TabBtn
                                label="Storehouse"
                                active={storehouseTab === 'store'}
                                onClick={() => onStorehouseTabChange('store')}
                                width="68px"
                            />
                            <TabBtn
                                label="Dress"
                                active={storehouseTab === 'dress'}
                                onClick={() => onStorehouseTabChange('dress')}
                                width="52px"
                            />
                            <TabBtn
                                label="Card"
                                active={storehouseTab === 'generalcard'}
                                onClick={() => onStorehouseTabChange('generalcard')}
                                width="48px"
                            />
                            <TabBtn
                                label="Material"
                                active={storehouseTab === 'material'}
                                onClick={() => onStorehouseTabChange('material')}
                                width="58px"
                            />
                            <TabBtn
                                label="War Avatar"
                                active={storehouseTab === 'waravatar'}
                                onClick={() => onStorehouseTabChange('waravatar')}
                                width="70px"
                            />
                        </div>
                    )}

                    {/* Pocket/Inventory Grid */}
                    <div
                        className="absolute overflow-x-hidden overflow-y-auto [&::-webkit-scrollbar]:hidden"
                        style={
                            {
                                left: '10px',
                                top: '282px',
                                width: '316px',
                                height: '150px',
                                scrollbarWidth: 'none' /* Firefox */,
                                msOverflowStyle: 'none' /* IE/Edge */,
                            } as React.CSSProperties
                        }
                    >
                        <div className="grid" style={{ gridTemplateColumns: 'repeat(8, 38px)', gap: '0px' }}>
                            {pocketSlots.map(({ slotNumber, item }) => (
                                <ItemSlot
                                    key={slotNumber}
                                    item={item}
                                    slotNumber={slotNumber}
                                    onClick={editable && onPocketClick ? () => onPocketClick(item, slotNumber) : undefined}
                                />
                            ))}
                        </div>
                    </div>

                    {/* Bottom Controls */}
                    <div className="absolute flex items-center justify-between px-3" style={{ left: '0', bottom: '10px', width: '100%' }}>
                        {/* Icons like inventory.html */}
                        <div className="flex items-center gap-1">
                            <img
                                src="/interfaces/inventory_assets/按钮/图形按钮/整理_普通.png"
                                alt="Auto Sort"
                                className="h-6 w-6 cursor-pointer opacity-80 transition-opacity hover:opacity-100"
                            />
                            <img
                                src="/interfaces/inventory_assets/系统/背包/背包拆分图标1.png"
                                alt="Split Bag"
                                className="h-6 w-6 cursor-pointer opacity-80 transition-opacity hover:opacity-100"
                            />
                            <img
                                src="/interfaces/inventory_assets/系统/背包/摆摊.png"
                                alt="Consignment Shop"
                                className="h-6 w-6 cursor-pointer opacity-80 transition-opacity hover:opacity-100"
                            />
                            <img
                                src="/interfaces/inventory_assets/系统/背包/修理.png"
                                alt="Fast Repair"
                                className="h-6 w-6 cursor-pointer opacity-80 transition-opacity hover:opacity-100"
                            />
                        </div>
                        <div className="flex items-center gap-3">
                            <img src="/interfaces/inventory_assets/按钮/图形按钮/钱_普通.png" alt="Coins" className="h-5 w-5" />
                            {editable && onPocketMoneyChange ? (
                                editingPocketMoney ? (
                                    <Input
                                        type="number"
                                        value={pocketMoneyValue}
                                        onChange={(e) => setPocketMoneyValue(parseInt(e.target.value) || 0)}
                                        onBlur={handlePocketMoneyBlur}
                                        onKeyDown={(e) => e.key === 'Enter' && handlePocketMoneyBlur()}
                                        className="h-6 w-24 text-xs"
                                        autoFocus
                                    />
                                ) : (
                                    <span
                                        className="hover:text-primary cursor-pointer text-xs font-medium"
                                        onClick={() => setEditingPocketMoney(true)}
                                    >
                                        {pocketMoney.toLocaleString()}
                                    </span>
                                )
                            ) : (
                                <span className="text-xs font-medium">{pocketMoney.toLocaleString()}</span>
                            )}
                        </div>
                    </div>
                </Card>

                {/* Storehouse Panel / War Avatar */}
                {storehouseTab === 'waravatar' ? (
                    <Card className="relative h-fit w-[325px] overflow-hidden">
                        {/* War Avatar Card */}
                        <div className="relative h-[80px] w-full">
                            {/* Title */}
                            <div className="bg-muted/50 text-muted-foreground border-border absolute top-0 left-0 w-full border-b px-3 py-1 text-center text-xs font-semibold">
                                War Avatar
                            </div>

                            {/* War Avatar Grid */}
                            <div
                                className="absolute flex items-center justify-center"
                                style={{
                                    left: '10px',
                                    top: '28px',
                                    width: '305px',
                                    height: '45px',
                                }}
                            >
                                <div className="flex gap-1">
                                    {[32, 33, 34, 35, 36, 37].map((pos) => (
                                        <ItemSlot
                                            key={pos}
                                            item={equipment[pos]}
                                            slotNumber={pos}
                                            onClick={editable && onWarAvatarClick ? () => onWarAvatarClick(equipment[pos], pos) : undefined}
                                        />
                                    ))}
                                </div>
                            </div>
                        </div>
                    </Card>
                ) : (
                    <Card className="relative h-[533px] w-[325px] overflow-hidden">
                        {/* Storage Info Bar */}
                        <div className="absolute z-10 flex items-center gap-3 px-3" style={{ left: '5px', bottom: '10px' }}>
                            <img src="/interfaces/inventory_assets/按钮/图形按钮/钱_普通.png" alt="Coins" className="h-5 w-5" />
                            {editable && onStorehouseMoneyChange ? (
                                editingStoreMoney ? (
                                    <Input
                                        type="number"
                                        value={storeMoneyValue}
                                        onChange={(e) => setStoreMoneyValue(parseInt(e.target.value) || 0)}
                                        onBlur={handleStoreMoneyBlur}
                                        onKeyDown={(e) => e.key === 'Enter' && handleStoreMoneyBlur()}
                                        className="h-6 w-24 text-xs"
                                        autoFocus
                                    />
                                ) : (
                                    <span
                                        className="hover:text-primary cursor-pointer text-xs font-medium"
                                        onClick={() => setEditingStoreMoney(true)}
                                    >
                                        {storehouseMoney.toLocaleString()}
                                    </span>
                                )
                            ) : (
                                <span className="text-xs font-medium">{storehouseMoney.toLocaleString()}</span>
                            )}
                        </div>

                        {/* Storage Grid */}
                        <div
                            className="absolute overflow-x-hidden overflow-y-auto [&::-webkit-scrollbar]:hidden"
                            style={
                                {
                                    left: '10px',
                                    top: '40px',
                                    width: '316px',
                                    height: '450px',
                                    scrollbarWidth: 'none' /* Firefox */,
                                    msOverflowStyle: 'none' /* IE/Edge */,
                                } as React.CSSProperties
                            }
                        >
                            <div className="grid" style={{ gridTemplateColumns: 'repeat(8, 38px)', gap: '0px' }}>
                                {storehouseTab === 'store' &&
                                    storehouseSlots.map(({ slotNumber, item }) => (
                                        <ItemSlot
                                            key={slotNumber}
                                            item={item}
                                            slotNumber={slotNumber}
                                            onClick={editable && onStorehouseClick ? () => onStorehouseClick(item, slotNumber) : undefined}
                                        />
                                    ))}
                                {storehouseTab === 'dress' &&
                                    Array.from({ length: storehouseCapacity }, (_, i) => i).map((slotNumber) => (
                                        <ItemSlot
                                            key={slotNumber}
                                            item={dress[slotNumber]}
                                            slotNumber={slotNumber}
                                            onClick={editable && onDressClick ? () => onDressClick(dress[slotNumber], slotNumber) : undefined}
                                        />
                                    ))}
                                {storehouseTab === 'material' &&
                                    Array.from({ length: storehouseCapacity }, (_, i) => i).map((slotNumber) => (
                                        <ItemSlot
                                            key={slotNumber}
                                            item={material[slotNumber]}
                                            slotNumber={slotNumber}
                                            onClick={
                                                editable && onMaterialClick ? () => onMaterialClick(material[slotNumber], slotNumber) : undefined
                                            }
                                        />
                                    ))}
                                {storehouseTab === 'generalcard' &&
                                    Array.from({ length: storehouseCapacity }, (_, i) => i).map((slotNumber) => (
                                        <ItemSlot
                                            key={slotNumber}
                                            item={generalcard[slotNumber]}
                                            slotNumber={slotNumber}
                                            onClick={
                                                editable && onGeneralcardClick
                                                    ? () => onGeneralcardClick(generalcard[slotNumber], slotNumber)
                                                    : undefined
                                            }
                                        />
                                    ))}
                            </div>
                        </div>
                    </Card>
                )}
            </div>
        </ItemDBContext.Provider>
    );
}

export default CharacterInventoryPanel;