import React, { useState, useEffect } from 'react';
import './Inventory.css';

function Inventory({ cursors, currentCursorIndex, selectCursor }) {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedRarity, setSelectedRarity] = useState('all');
  const [filteredSlots, setFilteredSlots] = useState([]);
  // Minecraft inventory typically has 27 slots (9x3)
  const totalSlots = 36; // 9x4 grid

  // This will eventually come from backend with proper data
  const cursorRarities = {
    common: 'Common',
    uncommon: 'Uncommon',
    rare: 'Rare',
    epic: 'Epic',
    legendary: 'Legendary'
  };

  // Assign mock rarities to cursors for demonstration
  const getCursorRarity = (index) => {
    const rarities = Object.keys(cursorRarities);
    return rarities[index % rarities.length];
  };

  // Get currently selected cursor
  const currentCursor = cursors.length > 0 && currentCursorIndex < cursors.length
    ? cursors[currentCursorIndex]
    : null;

  // Create array of slots for the inventory grid
  const inventorySlots = Array(totalSlots).fill(null).map((_, slotIndex) => {
    // Map cursor to slot if available
    const cursorIndex = slotIndex < cursors.length ? slotIndex : null;
    const cursor = cursorIndex !== null ? cursors[cursorIndex] : null;
    const rarity = cursor ? getCursorRarity(cursorIndex) : null;
    
    return {
      slotIndex,
      cursor,
      cursorIndex,
      rarity
    };
  });

  // Apply filters to inventory slots
  useEffect(() => {
    // First, filter the slots that match our criteria
    let filtered = inventorySlots.filter(slot => {
      // Filter by search query
      const matchesSearch = !searchQuery || 
        (slot.cursor && slot.cursor.name.toLowerCase().includes(searchQuery.toLowerCase()));
      
      // Filter by rarity
      const matchesRarity = selectedRarity === 'all' || 
        (slot.rarity && slot.rarity === selectedRarity);
      
      return matchesSearch && matchesRarity;
    });
    
    // Create a new array for the filtered slots, prioritizing slots with items
    const filledSlots = filtered.filter(slot => slot.cursor);
    const emptySlots = Array(totalSlots - filledSlots.length).fill(null)
      .map((_, index) => ({ 
        slotIndex: filledSlots.length + index, 
        cursor: null, 
        cursorIndex: null, 
        rarity: null 
      }));
    
    // Combine filled slots at the beginning and empty ones at the end
    const result = [...filledSlots, ...emptySlots];
    
    setFilteredSlots(result);
  }, [searchQuery, selectedRarity, inventorySlots]);

  return (
    <div className="inventory-container">
      {/* Search and Filter Controls */}

      {/* Equipped cursor display */}
      {currentCursor && (
        <div className="equipped-cursor">
          <div className="equipped-cursor-image">
            <img 
              src={currentCursor.path} 
              alt={currentCursor.name} 
              className="equipped-image"
            />
          </div>
          <div className="equipped-cursor-info">
            <h3>Equipped</h3>
            <span className={`equipped-cursor-name ${getCursorRarity(currentCursorIndex)}`}>
              {currentCursor.name}
            </span>
            <span className="equipped-cursor-rarity">
              {cursorRarities[getCursorRarity(currentCursorIndex)]}
            </span>
          </div>
        </div>
      )}
            <div className="inventory-controls">
        <div className="search-bar">
          <input 
            type="text" 
            placeholder="Search cursors..." 
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>
        <div className="rarity-filter">
          <div className={`rarity-circle ${selectedRarity}`}></div>
          <select 
            value={selectedRarity}
            onChange={(e) => setSelectedRarity(e.target.value)}
            aria-label="Filter by rarity"
          >
            <option value="all">All Rarities</option>
            {Object.keys(cursorRarities).map(rarity => (
              <option key={rarity} value={rarity}>{cursorRarities[rarity]}</option>
            ))}
          </select>
        </div>
      </div>
      {/* Minecraft-like inventory grid */}
      <div className="cute-inventory">
        <div className="inventory-grid">
          {filteredSlots.map((slot) => (
            <div 
              key={slot.slotIndex}
              className={`inventory-slot ${slot.cursor ? 'has-item' : ''} ${slot.cursorIndex === currentCursorIndex ? 'selected' : ''} ${slot.rarity || ''}`}
              onClick={() => slot.cursor && selectCursor(slot.cursorIndex)}
            >
              {slot.cursor && (
                <>
                  <img 
                    src={slot.cursor.path} 
                    alt={slot.cursor.name} 
                    className={`inventory-item ${slot.rarity}`}
                  />
                  <div className="inventory-tooltip">
                    <span className={`tooltip-name ${slot.rarity}`}>{slot.cursor.name}</span>
                    <span className="tooltip-rarity">{cursorRarities[slot.rarity]}</span>
                  </div>
                </>
              )}
            </div>
          ))}
        </div>
      </div>
      
   
    </div>
  );
}

export default Inventory;