import type { PlayerState, Profile, Equipment } from './types'

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: (itemId: number, 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) {
  return (
    <div className={`right-sidebar mobile-menu-panel ${mobileMenuOpen === 'right' ? 'open' : ''}`}>
      {/* Profile Stats */}
      <div className="profile-sidebar">
        <h3>👤 Character</h3>
        
        <div className="sidebar-stat-bars">
          <div className="sidebar-stat-bar">
            <div className="sidebar-stat-header">
              <span className="sidebar-stat-label">❤️ 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">⚡ 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">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">⭐ 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">⭐ Unspent:</span>
                <span className="sidebar-value">{profile.unspent_points}</span>
              </div>
            )}
            
            <div className="sidebar-divider"></div>
            
            <div className="sidebar-stat-row">
              <span className="sidebar-label">💪 STR:</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">
              <span className="sidebar-label">🏃 AGI:</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">
              <span className="sidebar-label">🛡️ END:</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">
              <span className="sidebar-label">🧠 INT:</span>
              <span className="sidebar-value">{profile.intellect}</span>
              {profile.unspent_points > 0 && (
                <button className="stat-plus-btn" onClick={() => onSpendPoint('intellect')}>+</button>
              )}
            </div>
          </div>
        )}
      </div>

      {/* Equipment Display */}
      <div className="equipment-sidebar">
        <h3>⚔️ Equipment</h3>
        <div className="equipment-grid">
          {Object.entries(equipment).map(([slot, item]: [string, any]) => (
            <div key={slot} className="equipment-row">
              <div className={`equipment-slot ${item ? 'filled' : 'empty'}`}>
                {item ? (
                  <>
                    <button className="equipment-unequip-btn" onClick={() => onUnequipItem(slot)} title="Unequip">✕</button>
                    <div className="equipment-item-content">
                      <span className="equipment-emoji">{item.emoji}</span>
                      <span className={`equipment-name ${item.tier ? `tier-${item.tier}` : ''}`}>{item.name}</span>
                      {item.durability && item.durability !== null && (
                        <span className="equipment-durability">{item.durability}/{item.max_durability}</span>
                      )}
                    </div>
                  </>
                ) : (
                  <div className="equipment-slot-label">{slot}</div>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Inventory */}
      <div className="inventory-sidebar">
        <h3>🎒 Inventory</h3>
        {profile && (
          <div className="inventory-capacity">
            <div className="capacity-info">
              <span>⚖️ {(profile.current_weight || 0).toFixed(1)}/{profile.max_weight}kg</span>
              <span>📦 {(profile.current_volume || 0).toFixed(1)}/{profile.max_volume}L</span>
            </div>
          </div>
        )}
        
        <div className="filter-box">
          <input 
            type="text" 
            placeholder="🔍 Filter items..." 
            value={inventoryFilter}
            onChange={(e) => onSetInventoryFilter(e.target.value)}
            className="filter-input"
          />
          <select 
            value={inventoryCategoryFilter}
            onChange={(e) => onSetInventoryCategoryFilter(e.target.value)}
            className="filter-select"
          >
            <option value="all">All</option>
            <option value="weapon">⚔️ Weapons</option>
            <option value="armor">🛡️ Armor</option>
            <option value="consumable">🍎 Consumables</option>
            <option value="material">🪵 Materials</option>
            <option value="tool">🔨 Tools</option>
            <option value="other">📦 Other</option>
          </select>
        </div>

        <div className="inventory-list">
          {playerState.inventory
            .filter((item: any) => 
              item.name.toLowerCase().includes(inventoryFilter.toLowerCase()) &&
              (inventoryCategoryFilter === 'all' || item.category === inventoryCategoryFilter)
            )
            .map((item: any, idx: number) => (
            <div key={idx} className="inventory-item">
              <div className="inventory-item-header">
                <span className={`item-name ${item.tier ? `tier-${item.tier}` : ''}`}>
                  {item.emoji} {item.name}
                </span>
                {item.quantity > 1 && <span className="item-quantity">×{item.quantity}</span>}
              </div>
              
              {item.description && <p className="item-description">{item.description}</p>}
              
              {item.durability !== undefined && item.durability !== null && (
                <div className="durability-display">
                  <div className="durability-bar">
                    <div 
                      className={`durability-fill ${(item.durability / item.max_durability * 100) === 100 ? 'full' : ''}`}
                      style={{ width: `${(item.durability / item.max_durability) * 100}%` }}
                    ></div>
                    <span className="durability-text">{item.durability}/{item.max_durability}</span>
                  </div>
                </div>
              )}
              
              <div className="inventory-item-actions">
                {item.category === 'consumable' && (
                  <button 
                    className="item-action-btn use-btn"
                    onClick={() => onUseItem(item.item_id, item.inventory_id)}
                  >
                    Use
                  </button>
                )}
                {item.slot && !item.is_equipped && (
                  <button 
                    className="item-action-btn equip-btn"
                    onClick={() => onEquipItem(item.item_id, item.inventory_id)}
                  >
                    Equip
                  </button>
                )}
                <button 
                  className="item-action-btn drop-btn"
                  onClick={() => {
                    const qty = item.quantity > 1 
                      ? parseInt(prompt(`Drop how many? (1-${item.quantity})`, '1') || '1') 
                      : 1
                    if (qty > 0 && qty <= item.quantity) {
                      onDropItem(item.item_id, item.inventory_id, qty)
                    }
                  }}
                >
                  Drop
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default PlayerSidebar
