import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import type { PlayerState, Profile, Equipment } from './types'
import { getAssetPath } from '../../utils/assetPath'
import { getTranslatedText } from '../../utils/i18nUtils'
import InventoryModal from './InventoryModal'

interface PlayerSidebarProps {
  playerState: PlayerState
  profile: Profile | null
  equipment: Equipment
  inventoryFilter: string
  inventoryCategoryFilter: string
  mobileMenuOpen: string
  onSetInventoryFilter: (filter: string) => void
  onSetInventoryCategoryFilter: (category: string) => void
  onUseItem: (itemId: number, invId: number) => void
  onEquipItem: (invId: number) => void
  onUnequipItem: (slot: string) => void
  onDropItem: (itemId: number, invId: number, quantity: number) => void
  onSpendPoint: (stat: string) => void
}

function PlayerSidebar({
  playerState,
  profile,
  equipment,
  inventoryFilter,
  inventoryCategoryFilter,
  mobileMenuOpen,
  onSetInventoryFilter,
  onSetInventoryCategoryFilter,
  onUseItem,
  onEquipItem,
  onUnequipItem,
  onDropItem,
  onSpendPoint
}: PlayerSidebarProps) {
  const [showInventory, setShowInventory] = useState(false)



  const { t } = useTranslation()

  const renderEquipmentSlot = (slot: string, item: any, emoji: string, label: string) => (
    <div className={`equipment-slot ${item ? 'filled' : 'empty'}`}>
      {item ? (
        <>
          <button className="equipment-unequip-btn" onClick={() => onUnequipItem(slot)} title={t('game.unequip')}>✕</button>
          <div className="equipment-item-content">
            {item.image_path ? (
              <img
                src={getAssetPath(item.image_path)}
                alt={getTranslatedText(item.name)}
                className="equipment-emoji"
                onError={(e) => {
                  (e.target as HTMLImageElement).style.display = 'none';
                  const icon = (e.target as HTMLImageElement).nextElementSibling;
                  if (icon) icon.classList.remove('hidden');
                }}
              />
            ) : null}
            <span className={`equipment-emoji ${item.image_path ? 'hidden' : ''}`}>{item.emoji}</span>
            <span className={`equipment-name ${item.tier ? `tier-${item.tier}` : ''}`}>{getTranslatedText(item.name)}</span>
            {item.durability && item.durability !== null && (
              <span className="equipment-durability">{item.durability}/{item.max_durability}</span>
            )}
          </div>
          <div className="equipment-tooltip">
            {item.description && <div className="item-tooltip-desc">{getTranslatedText(item.description)}</div>}
            {/* Use unique_stats if available, otherwise fall back to base stats */}
            {(item.unique_stats || item.stats) && Object.keys(item.unique_stats || item.stats).length > 0 && (
              <>
                {(item.unique_stats?.armor || item.stats?.armor) && (
                  <div className="item-tooltip-stat">
                    {t('stats.armor')}: +{item.unique_stats?.armor || item.stats?.armor}
                  </div>
                )}
                {(item.unique_stats?.hp_max || item.stats?.hp_max) && (
                  <div className="item-tooltip-stat">
                    {t('stats.hp')}: +{item.unique_stats?.hp_max || item.stats?.hp_max}
                  </div>
                )}
                {(item.unique_stats?.stamina_max || item.stats?.stamina_max) && (
                  <div className="item-tooltip-stat">
                    {t('stats.stamina')}: +{item.unique_stats?.stamina_max || item.stats?.stamina_max}
                  </div>
                )}
                {(item.unique_stats?.damage_min !== undefined || item.stats?.damage_min !== undefined) &&
                  (item.unique_stats?.damage_max !== undefined || item.stats?.damage_max !== undefined) && (
                    <div className="item-tooltip-stat">
                      {t('stats.damage')}: {item.unique_stats?.damage_min || item.stats?.damage_min}-{item.unique_stats?.damage_max || item.stats?.damage_max}
                    </div>
                  )}
                {(item.unique_stats?.weight_capacity || item.stats?.weight_capacity) && (
                  <div className="item-tooltip-stat">
                    {t('stats.weight')}: +{item.unique_stats?.weight_capacity || item.stats?.weight_capacity}kg
                  </div>
                )}
                {(item.unique_stats?.volume_capacity || item.stats?.volume_capacity) && (
                  <div className="item-tooltip-stat">
                    {t('stats.volume')}: +{item.unique_stats?.volume_capacity || item.stats?.volume_capacity}L
                  </div>
                )}
              </>
            )}
            {item.durability !== undefined && item.durability !== null && (
              <div className="item-tooltip-stat">
                {t('stats.durability')}: {item.durability}/{item.max_durability}
              </div>
            )}
            {item.tier !== undefined && item.tier !== null && item.tier > 0 && (
              <div className="item-tooltip-stat">
                ⭐ Tier: {item.tier}
              </div>
            )}
          </div>
        </>
      ) : (
        <>
          <span className="equipment-emoji">{emoji}</span>
          <span className="equipment-slot-label">{label}</span>
        </>
      )}
    </div>
  )



  return (
    <div className={`right-sidebar mobile-menu-panel ${mobileMenuOpen === 'right' ? 'open' : ''}`}>
      {/* Profile Stats */}
      <div className="profile-sidebar">
        <h3>{t('game.character')}</h3>

        <div className="sidebar-stat-bars">
          <div className="sidebar-stat-bar">
            <div className="sidebar-stat-header">
              <span className="sidebar-stat-label">{t('stats.hp')}</span>
              <span className="sidebar-stat-numbers">{playerState.health}/{playerState.max_health}</span>
            </div>
            <div className="sidebar-progress-bar">
              <div
                className="sidebar-progress-fill health"
                style={{ width: `${(playerState.health / playerState.max_health) * 100}%` }}
              ></div>
              <span className="progress-percentage">{Math.round((playerState.health / playerState.max_health) * 100)}%</span>
            </div>
          </div>

          <div className="sidebar-stat-bar">
            <div className="sidebar-stat-header">
              <span className="sidebar-stat-label">{t('stats.stamina')}</span>
              <span className="sidebar-stat-numbers">{playerState.stamina}/{playerState.max_stamina}</span>
            </div>
            <div className="sidebar-progress-bar">
              <div
                className="sidebar-progress-fill stamina"
                style={{ width: `${(playerState.stamina / playerState.max_stamina) * 100}%` }}
              ></div>
              <span className="progress-percentage">{Math.round((playerState.stamina / playerState.max_stamina) * 100)}%</span>
            </div>
          </div>
        </div>

        {profile && (
          <div className="sidebar-stats">
            <div className="sidebar-stat-row">
              <span className="sidebar-label">{t('stats.level')}:</span>
              <span className="sidebar-value">{profile.level}</span>
            </div>

            <div className="sidebar-stat-bar">
              <div className="sidebar-stat-header">
                <span className="sidebar-stat-label">{t('stats.xp')}</span>
                <span className="sidebar-stat-numbers">{profile.xp} / {(profile.level * 100)}</span>
              </div>
              <div className="sidebar-progress-bar">
                <div
                  className="sidebar-progress-fill xp"
                  style={{ width: `${(profile.xp / (profile.level * 100)) * 100}%` }}
                ></div>
                <span className="progress-percentage">{Math.round((profile.xp / (profile.level * 100)) * 100)}%</span>
              </div>
            </div>

            {profile.unspent_points > 0 && (
              <div className="sidebar-stat-row highlight">
                <span className="sidebar-label">{t('stats.unspentPoints')}:</span>
                <span className="sidebar-value">{profile.unspent_points}</span>
              </div>
            )}

            <div className="sidebar-divider"></div>

            {/* Compact 2x2 Stats Grid */}
            <div className="stats-grid">
              <div className="sidebar-stat-row compact">
                <span className="sidebar-label">{t('stats.strength')}:</span>
                <span className="sidebar-value">{profile.strength}</span>
                {profile.unspent_points > 0 && (
                  <button className="stat-plus-btn" onClick={() => onSpendPoint('strength')}>+</button>
                )}
              </div>
              <div className="sidebar-stat-row compact">
                <span className="sidebar-label">{t('stats.agility')}:</span>
                <span className="sidebar-value">{profile.agility}</span>
                {profile.unspent_points > 0 && (
                  <button className="stat-plus-btn" onClick={() => onSpendPoint('agility')}>+</button>
                )}
              </div>
              <div className="sidebar-stat-row compact">
                <span className="sidebar-label">{t('stats.endurance')}:</span>
                <span className="sidebar-value">{profile.endurance}</span>
                {profile.unspent_points > 0 && (
                  <button className="stat-plus-btn" onClick={() => onSpendPoint('endurance')}>+</button>
                )}
              </div>
              <div className="sidebar-stat-row compact">
                <span className="sidebar-label">{t('stats.intellect')}:</span>
                <span className="sidebar-value">{profile.intellect}</span>
                {profile.unspent_points > 0 && (
                  <button className="stat-plus-btn" onClick={() => onSpendPoint('intellect')}>+</button>
                )}
              </div>
            </div>

            <div className="sidebar-divider"></div>

            {/* Inventory Capacity - matching HP/Stamina/XP style */}
            <div className="sidebar-stat-bar">
              <div className="sidebar-stat-header">
                <span className="sidebar-stat-label">{t('stats.weight')}</span>
                <span className="sidebar-stat-numbers">{(profile.current_weight || 0).toFixed(1)}/{profile.max_weight || 0}kg</span>
              </div>
              <div className="sidebar-progress-bar">
                <div
                  className="sidebar-progress-fill weight"
                  style={{ width: `${Math.min(100, ((profile.current_weight || 0) / (profile.max_weight || 1)) * 100)}%` }}
                ></div>
                <span className="progress-percentage">{Math.round(Math.min(100, ((profile.current_weight || 0) / (profile.max_weight || 1)) * 100))}%</span>
              </div>
            </div>

            <div className="sidebar-stat-bar">
              <div className="sidebar-stat-header">
                <span className="sidebar-stat-label">{t('stats.volume')}</span>
                <span className="sidebar-stat-numbers">{(profile.current_volume || 0).toFixed(1)}/{profile.max_volume || 0}L</span>
              </div>
              <div className="sidebar-progress-bar">
                <div
                  className="sidebar-progress-fill volume"
                  style={{ width: `${Math.min(100, ((profile.current_volume || 0) / (profile.max_volume || 1)) * 100)}%` }}
                ></div>
                <span className="progress-percentage">{Math.round(Math.min(100, ((profile.current_volume || 0) / (profile.max_volume || 1)) * 100))}%</span>
              </div>
            </div>

            <button
              className="open-inventory-btn"
              onClick={() => setShowInventory(true)}
              style={{
                width: '100%',
                padding: '1rem',
                marginTop: '1rem',
                backgroundColor: '#2c3e50',
                border: '1px solid #34495e',
                borderRadius: '8px',
                color: '#ecf0f1',
                fontSize: '1.1rem',
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                gap: '0.5rem',
                transition: 'all 0.2s'
              }}
            >
              {t('game.inventory')}
            </button>
          </div>
        )}
      </div>

      {/* Equipment Display - Proper Grid Layout */}
      <div className="equipment-sidebar">
        <h3>{t('game.equipment')}</h3>
        <div className="equipment-grid">
          {/* Row 1: Head */}
          <div className="equipment-row">
            {renderEquipmentSlot('head', equipment.head, '🪖', t('equipment.head'))}
          </div>

          {/* Row 2: Weapon, Torso, Backpack */}
          <div className="equipment-row three-cols">
            {renderEquipmentSlot('weapon', equipment.weapon, '⚔️', t('equipment.weapon'))}
            {renderEquipmentSlot('torso', equipment.torso, '👕', t('equipment.torso'))}
            {renderEquipmentSlot('backpack', equipment.backpack, '🎒', t('equipment.backpack'))}
          </div>

          {/* Row 3: Legs & Feet */}
          <div className="equipment-row two-cols">
            {renderEquipmentSlot('legs', equipment.legs, '👖', t('equipment.legs'))}
            {renderEquipmentSlot('feet', equipment.feet, '👟', t('equipment.feet'))}
          </div>
        </div>
      </div>



      {/* Inventory Modal */}
      {showInventory && profile && (
        <InventoryModal
          playerState={playerState}
          profile={profile}
          equipment={equipment}
          inventoryFilter={inventoryFilter}
          inventoryCategoryFilter={inventoryCategoryFilter}
          onClose={() => setShowInventory(false)}
          onSetInventoryFilter={onSetInventoryFilter}
          onSetInventoryCategoryFilter={onSetInventoryCategoryFilter}
          onUseItem={onUseItem}
          onEquipItem={onEquipItem}
          onUnequipItem={onUnequipItem}
          onDropItem={onDropItem}
        />
      )}
    </div>
  )
}

export default PlayerSidebar