import { useState, useEffect, type MouseEvent, type ChangeEvent } from 'react'
import { useTranslation } from 'react-i18next'
import type { Profile, WorkbenchTab } from './types'
import { getAssetPath } from '../../utils/assetPath'
import { getTranslatedText } from '../../utils/i18nUtils'
import './Workbench.css'

interface WorkbenchProps {
  showCraftingMenu: boolean
  showRepairMenu: boolean
  workbenchTab: WorkbenchTab
  craftableItems: any[]
  repairableItems: any[]
  uncraftableItems: any[]
  craftFilter: string
  repairFilter: string
  uncraftFilter: string
  craftCategoryFilter: string
  profile: Profile | null
  onCloseCrafting: () => void
  onSwitchTab: (tab: WorkbenchTab) => void
  onSetCraftFilter: (filter: string) => void
  onSetRepairFilter: (filter: string) => void
  onSetUncraftFilter: (filter: string) => void
  onSetCraftCategoryFilter: (category: string) => void
  onCraft: (itemId: number) => void
  onRepair: (uniqueItemId: string, inventoryId: number) => void
  onUncraft: (uniqueItemId: string, inventoryId: number) => void
}

function Workbench({
  showCraftingMenu,
  showRepairMenu,
  workbenchTab,
  craftableItems,
  repairableItems,
  uncraftableItems,
  craftFilter,
  repairFilter,
  uncraftFilter,
  craftCategoryFilter,
  profile,
  onCloseCrafting,
  onSwitchTab,
  onSetCraftFilter,
  onSetRepairFilter,
  onSetUncraftFilter,
  onSetCraftCategoryFilter,
  onCraft,
  onRepair,
  onUncraft
}: WorkbenchProps) {
  const { t } = useTranslation()

  const [selectedItem, setSelectedItem] = useState<any>(null)

  // Reset selection when tab changes
  useEffect(() => {
    setSelectedItem(null)
  }, [workbenchTab])

  // Update selectedItem when items list changes (after repair/craft/salvage)
  useEffect(() => {
    if (selectedItem) {
      const items = getItems()
      // Find the updated item by unique_item_id or inventory_id
      const updatedItem = items.find(item => {
        if (selectedItem.unique_item_id && item.unique_item_id) {
          return item.unique_item_id === selectedItem.unique_item_id
        }
        if (selectedItem.inventory_id && item.inventory_id) {
          return item.inventory_id === selectedItem.inventory_id
        }
        return item.item_id === selectedItem.item_id
      })

      if (updatedItem) {
        setSelectedItem(updatedItem)
      } else {
        // Item no longer exists (e.g., was salvaged)
        setSelectedItem(null)
      }
    }
  }, [craftableItems, repairableItems, uncraftableItems])

  if (!showCraftingMenu && !showRepairMenu) return null

  const getItems = () => {
    switch (workbenchTab) {
      case 'craft':
        return craftableItems.filter(item =>
          getTranslatedText(item.name).toLowerCase().includes(craftFilter.toLowerCase()) &&
          (craftCategoryFilter === 'all' || item.category === craftCategoryFilter)
        )
      case 'repair':
        return repairableItems
          .filter(item => getTranslatedText(item.name).toLowerCase().includes(repairFilter.toLowerCase()))
          .sort((a, b) => {
            if (a.needs_repair && !b.needs_repair) return -1
            if (!a.needs_repair && b.needs_repair) return 1
            return 0
          })
      case 'uncraft':
        return uncraftableItems.filter(item =>
          getTranslatedText(item.name).toLowerCase().includes(uncraftFilter.toLowerCase())
        )
      default:
        return []
    }
  }

  const items = getItems()

  const renderItemDetails = () => {
    if (!selectedItem) {
      return (
        <div className="workbench-empty-state">
          <div style={{ fontSize: '4rem', marginBottom: '1rem' }}>🔧</div>
          <h3>{t('crafting.selectItem')}</h3>
          <p>{t('crafting.chooseFromList')}</p>
        </div>
      )
    }

    const item = selectedItem
    const imagePath = getAssetPath(item.image_path || `images/items/${item.item_id || item.id}.webp`)

    return (
      <>
        <div className="detail-header">
          <div className="detail-image-container">
            {imagePath ? (
              <img
                src={imagePath}
                alt={getTranslatedText(item.name)}
                className="detail-image"
                onError={(e) => {
                  (e.target as HTMLImageElement).style.display = 'none';
                  const icon = (e.target as HTMLImageElement).nextElementSibling;
                  if (icon) icon.classList.remove('hidden');
                }}
              />
            ) : null}
            <div className={`detail-image-fallback ${imagePath ? 'hidden' : ''}`} style={{ fontSize: '4rem' }}>
              {item.emoji || '📦'}
            </div>
          </div>
          <div className="item-detail-header">
            <h2 className="detail-title">{item.emoji} {getTranslatedText(item.name)}</h2>
            {item.description && <p className="detail-description">{getTranslatedText(item.description)}</p>}

            {/* Base Stats Display for Crafting */}
            {workbenchTab === 'craft' && (item.base_stats || item.stats) && (
              <div style={{ marginTop: '1rem' }}>
                <div className="item-stats" style={{ display: 'flex', gap: '1rem', justifyContent: 'center', flexWrap: 'wrap' }}>
                  {Object.entries(item.base_stats || item.stats).map(([key, value]) => {
                    const icons: Record<string, string> = {
                      weight_capacity: `⚖️ ${t('game.weight')}`,
                      volume_capacity: `📦 ${t('game.volume')}`,
                      armor: `🛡️ ${t('stats.armor')}`,
                      hp_max: `❤️ ${t('stats.maxHp')}`,
                      stamina_max: `⚡ ${t('stats.maxStamina')}`,
                      damage_min: `⚔️ ${t('stats.damage')} Min`,
                      damage_max: `⚔️ ${t('stats.damage')} Max`
                    }
                    const label = icons[key] || key.replace('_', ' ')
                    const unit = key.includes('weight') ? 'kg' : key.includes('volume') ? 'L' : ''
                    return (
                      <div key={key} className="stat-badge" style={{ background: 'rgba(0,0,0,0.3)', padding: '0.3rem 0.6rem', borderRadius: '4px', fontSize: '0.9rem', color: '#ccc' }}>
                        <span style={{ color: '#aaa' }}>{label}:</span> <span style={{ color: '#fff', fontWeight: 'bold' }}>+{Math.round(Number(value))}{unit}</span>
                      </div>
                    )
                  })}
                </div>
                <p style={{ fontSize: '0.8rem', color: '#888', fontStyle: 'italic', marginTop: '0.5rem', textAlign: 'center' }}>
                  * {t('crafting.potentialBaseStats')}
                </p>
              </div>
            )}

            {/* Stats Display for Repair/Salvage */}
            {workbenchTab !== 'craft' && (item.unique_item_data?.unique_stats || item.unique_item_data || item.base_stats || item.stats) && (
              <div className="item-stats" style={{ display: 'flex', gap: '1rem', justifyContent: 'center', marginTop: '1rem', flexWrap: 'wrap' }}>
                {Object.entries(item.unique_item_data?.unique_stats ?? item.unique_item_data ?? item.base_stats ?? item.stats ?? {}).filter(([k]) => !['id', 'item_id', 'durability', 'max_durability', 'created_at', 'tier'].includes(k)).map(([key, value]) => {
                  const icons: Record<string, string> = {
                    weight_capacity: `⚖️ ${t('game.weight')}`,
                    volume_capacity: `📦 ${t('game.volume')}`,
                    armor: `🛡️ ${t('stats.armor')}`,
                    hp_max: `❤️ ${t('stats.maxHp')}`,
                    stamina_max: `⚡ ${t('stats.maxStamina')}`,
                    damage_min: `⚔️ ${t('stats.damage')} Min`,
                    damage_max: `⚔️ ${t('stats.damage')} Max`
                  }
                  const label = icons[key] || key.replace('_', ' ')
                  const unit = key.includes('weight') ? 'kg' : key.includes('volume') ? 'L' : ''
                  return (
                    <div key={key} className="stat-badge" style={{ background: 'rgba(0,0,0,0.3)', padding: '0.3rem 0.6rem', borderRadius: '4px', fontSize: '0.9rem', color: '#ccc' }}>
                      <span style={{ color: '#aaa' }}>{label}:</span> <span style={{ color: '#fff', fontWeight: 'bold' }}>+{Math.round(Number(value))}{unit}</span>
                    </div>
                  )
                })}
              </div>
            )}
          </div>

          {workbenchTab === 'craft' && (
            <>
              <div className="detail-requirements">
                <h4>{t('crafting.requirements')}</h4>

                <div className={`requirement-item ${item.meets_level ? 'met' : 'missing'}`}>
                  <span>{t('crafting.levelRequired', { level: item.craft_level })}</span>
                  <span>{item.meets_level ? '✅' : `❌ (Lv. ${profile?.level || 1})`}</span>
                </div>

                {item.tools && item.tools.length > 0 && (
                  <>
                    <h5 style={{ marginTop: '1rem', marginBottom: '0.5rem', color: '#aaa' }}>{t('crafting.tools')}</h5>
                    {item.tools.map((tool: any, i: number) => (
                      <div key={i} className={`requirement-item ${tool.has_tool ? 'met' : 'missing'}`}>
                        <span>{tool.emoji} {getTranslatedText(tool.name)}</span>
                        <span>
                          {tool.has_tool ? `✅ ${tool.tool_durability}/${tool.max_durability} (${t('crafting.cost')}: ${tool.durability_cost})` : `❌ ${t('crafting.missing')} (${t('crafting.cost')}: ${tool.durability_cost})`}
                        </span>
                      </div>
                    ))}
                  </>
                )}

                <h5 style={{ marginTop: '1rem', marginBottom: '0.5rem', color: '#aaa' }}>{t('crafting.materials')}</h5>
                {item.materials && item.materials.length > 0 ? (
                  item.materials.map((mat: any, i: number) => (
                    <div key={i} className={`requirement-item ${mat.has_enough ? 'met' : 'missing'}`}>
                      <span>{mat.emoji} {getTranslatedText(mat.name)}</span>
                      <span>{mat.available} / {mat.required}</span>
                    </div>
                  ))
                ) : (
                  <div className="requirement-item met">
                    <span>{t('crafting.noMaterialsRequired')}</span>
                  </div>
                )}
              </div>

              <div className="detail-actions">
                <button
                  className="craft-btn"
                  disabled={!item.can_craft || (profile?.stamina || 0) < (item.stamina_cost || 1)}
                  onClick={() => onCraft(item.item_id)}
                  style={{ width: '100%', padding: '1rem', fontSize: '1.2rem', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}
                >
                  <span>
                    {!item.meets_level ? t('crafting.levelRequired', { level: item.craft_level }) :
                      !item.can_craft ? t('crafting.missingRequirements') : t('crafting.craftItem')}
                  </span>
                  {item.can_craft && (
                    <span style={{ fontSize: '0.9rem', opacity: 0.9 }}>
                      {t('crafting.staminaCost', { cost: item.stamina_cost || 5 })}
                    </span>
                  )}
                </button>
              </div>
            </>
          )}

          {workbenchTab === 'repair' && (
            <>
              <div className="detail-requirements">
                <h4>🔧 {workbenchTab === 'repair' ? t('game.repair') : t('game.salvage')}</h4>

                {!item.needs_repair ? (
                  <p className="repair-info full-durability" style={{ textAlign: 'center', marginBottom: '1rem' }}>{t('crafting.perfectCondition')}</p>
                ) : (
                  <>
                    <div className="repair-preview-text">
                      <span className="current">Current: {item.durability_percent}%</span>
                      <span className="restored">After Repair: {Math.min(100, item.durability_percent + (item.repair_percentage || 0))}%</span>
                    </div>
                    <div className="repair-preview-bar">
                      <div
                        className="repair-preview-current"
                        style={{ width: `${item.durability_percent}%` }}
                      ></div>
                      <div
                        className="repair-preview-restored"
                        style={{
                          left: `${item.durability_percent}%`,
                          width: `${Math.min(100 - item.durability_percent, item.repair_percentage || 0)}%`
                        }}
                      ></div>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '1rem', fontSize: '0.85rem', color: '#aaa' }}>
                      <span>{item.current_durability}/{item.max_durability}</span>
                      <span>+{Math.round((item.max_durability || 0) * ((item.repair_percentage || 0) / 100))} durability</span>
                    </div>
                  </>
                )}

                {item.needs_repair && (
                  <>
                    {item.tools && item.tools.length > 0 && (
                      <>
                        <h5 style={{ marginTop: '1rem', marginBottom: '0.5rem', color: '#aaa' }}>Tools</h5>
                        {item.tools.map((tool: any, i: number) => (
                          <div key={i} className={`requirement-item ${tool.has_tool ? 'met' : 'missing'}`}>
                            <span>{tool.emoji} {getTranslatedText(tool.name)}</span>
                            <span>
                              {tool.has_tool ? `✅ ${tool.tool_durability}/${tool.tool_max_durability} (Cost: ${tool.durability_cost})` : `❌ Missing (Cost: ${tool.durability_cost})`}
                            </span>
                          </div>
                        ))}
                      </>
                    )}

                    <h5 style={{ marginTop: '1rem', marginBottom: '0.5rem', color: '#aaa' }}>Materials</h5>
                    {item.materials.map((mat: any, i: number) => (
                      <div key={i} className={`requirement-item ${mat.has_enough ? 'met' : 'missing'}`}>
                        <span>{mat.emoji} {getTranslatedText(mat.name)}</span>
                        <span>{mat.available} / {mat.quantity}</span>
                      </div>
                    ))}
                  </>
                )}
              </div>

              <div className="detail-actions">
                <button
                  className="repair-btn"
                  disabled={!item.can_repair || (profile?.stamina || 0) < (item.stamina_cost || 1)}
                  onClick={() => onRepair(item.unique_item_id, item.inventory_id)}
                  style={{ width: '100%', padding: '1rem', fontSize: '1.2rem', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}
                >
                  <span>
                    {!item.needs_repair ? t('crafting.alreadyFull') :
                      !item.can_repair ? t('crafting.missingRequirements') : t('crafting.repairItem')}
                  </span>
                  {item.needs_repair && item.can_repair && (
                    <span style={{ fontSize: '0.9rem', opacity: 0.9 }}>
                      {t('crafting.staminaCost', { cost: item.stamina_cost || 3 })}
                    </span>
                  )}
                </button>
              </div>
            </>
          )}

          {workbenchTab === 'uncraft' && (
            <>
              <div className="detail-requirements">
                <h4>♻️ {t('game.salvage')}</h4>

                {/* Show durability bar if we have durability data */}
                {(item.unique_item_data || item.durability_percent !== undefined) && (
                  <div className="durability-display" style={{ marginBottom: '1rem' }}>
                    <div className="durability-bar" style={{ height: '8px' }}>
                      <div
                        className={`durability-fill ${(item.unique_item_data?.durability_percent || item.durability_percent) === 100 ? 'full' : ''}`}
                        style={{ width: `${item.unique_item_data?.durability_percent || item.durability_percent || 0}%` }}
                      ></div>
                    </div>
                    <div style={{ textAlign: 'right', fontSize: '0.8rem', marginTop: '0.2rem', color: '#aaa' }}>
                      Condition: {item.unique_item_data?.durability_percent || item.durability_percent || 0}%
                    </div>
                  </div>
                )}

                <div className="materials-list">
                  {(() => {
                    const durabilityRatio = item.unique_item_data?.durability_percent !== undefined
                      ? (item.unique_item_data.durability_percent || 0) / 100
                      : item.durability_percent !== undefined
                        ? (item.durability_percent || 0) / 100
                        : 1.0
                    const adjustedYield = (item.uncraft_yield || item.base_yield || []).map((mat: any) => ({
                      ...mat,
                      adjusted_quantity: Math.round((mat.quantity || 0) * durabilityRatio)
                    }))

                    return (
                      <>
                        {durabilityRatio < 1.0 && (
                          <div className="uncraft-warning" style={{ marginBottom: '1rem', color: '#ffc107' }}>
                            {t('crafting.yieldReduced', { percent: Math.round((1 - durabilityRatio) * 100) })}
                          </div>
                        )}

                        {item.loss_chance && (
                          <div className="uncraft-warning" style={{ marginBottom: '1rem', color: '#ff9800' }}>
                            ⚠️ {Math.round(item.loss_chance * 100)}% chance to lose each material
                          </div>
                        )}

                        {adjustedYield.map((mat: any, i: number) => (
                          <div key={i} className="requirement-item met">
                            <span>{mat.emoji} {getTranslatedText(mat.name)}</span>
                            <span>x{mat.adjusted_quantity}</span>
                          </div>
                        ))}
                      </>
                    )
                  })()}
                </div>
              </div>

              <div className="detail-actions">
                <button
                  className="uncraft-btn"
                  disabled={(profile?.stamina || 0) < (item.stamina_cost || 1)}
                  onClick={() => {
                    if (window.confirm(t('crafting.confirmSalvage', { name: getTranslatedText(item.name) }))) {
                      onUncraft(item.unique_item_id, item.inventory_id)
                    }
                  }}
                  style={{ width: '100%', padding: '1rem', fontSize: '1.2rem', backgroundColor: '#d32f2f', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}
                >
                  <span>♻️ {t('game.salvage')}</span>
                  <span style={{ fontSize: '0.9rem', opacity: 0.9 }}>
                    {t('crafting.staminaCost', { cost: item.stamina_cost || 2 })}
                  </span>
                </button>
              </div>
            </>
          )}
        </div>
      </>
    )
  }

  const categories = [
    { id: 'all', label: t('categories.all'), icon: '🎒' },
    { id: 'weapon', label: t('categories.weapon'), icon: '⚔️' },
    { id: 'armor', label: t('categories.armor'), icon: '🛡️' },
    { id: 'clothing', label: t('categories.clothing'), icon: '👕' },
    { id: 'tool', label: t('categories.tool'), icon: '🛠️' },
    { id: 'consumable', label: t('categories.consumable'), icon: '🍖' },
    { id: 'resource', label: t('categories.resource'), icon: '📦' },
    { id: 'misc', label: t('categories.misc'), icon: '📦' }
  ]

  return (
    <div className="workbench-overlay" onClick={(e: MouseEvent<HTMLDivElement>) => {
      if (e.target === e.currentTarget) onCloseCrafting()
    }}>
      <div className="workbench-menu">
        <div className="workbench-header">
          <h3>{t('game.workbench')}</h3>
          <div className="workbench-tabs">
            <button
              className={`tab-btn ${workbenchTab === 'craft' ? 'active' : ''}`}
              onClick={() => onSwitchTab('craft')}
            >
              {t('game.craft')}
            </button>
            <button
              className={`tab-btn ${workbenchTab === 'repair' ? 'active' : ''}`}
              onClick={() => onSwitchTab('repair')}
            >
              {t('game.repair')}
            </button>
            <button
              className={`tab-btn ${workbenchTab === 'uncraft' ? 'active' : ''}`}
              onClick={() => onSwitchTab('uncraft')}
            >
              {t('game.salvage')}
            </button>
          </div>
          <button className="close-btn" onClick={onCloseCrafting}>✕</button>
        </div>

        <div className="workbench-content-grid">
          {/* Column 1: Categories Sidebar */}
          <div className="workbench-sidebar">
            <h4 className="sidebar-title">{t('location.lootableItems').replace(':', '')}</h4>
            <div className="category-list">
              {categories.map(cat => (
                <button
                  key={cat.id}
                  className={`category-btn ${craftCategoryFilter === cat.id ? 'active' : ''}`}
                  onClick={() => onSetCraftCategoryFilter(cat.id)}
                >
                  <span className="cat-icon">{cat.icon}</span>
                  <span className="cat-label">{cat.label}</span>
                </button>
              ))}
            </div>
          </div>

          {/* Column 2: Items List */}
          <div className="workbench-items-column">
            <div className="workbench-filters">
              <div className="game-search-container">
                <span className="game-search-icon">🔍</span>
                <input
                  type="text"
                  placeholder={t('game.searchItems')}
                  value={workbenchTab === 'craft' ? craftFilter : workbenchTab === 'repair' ? repairFilter : uncraftFilter}
                  onChange={(e: ChangeEvent<HTMLInputElement>) => {
                    if (workbenchTab === 'craft') onSetCraftFilter(e.target.value)
                    else if (workbenchTab === 'repair') onSetRepairFilter(e.target.value)
                    else onSetUncraftFilter(e.target.value)
                  }}
                  className="game-search-input"
                />
              </div>
            </div>

            <div className="workbench-items-list">
              {items.filter(item => {
                // Text search filter
                const searchFilter = workbenchTab === 'craft' ? craftFilter : workbenchTab === 'repair' ? repairFilter : uncraftFilter
                const matchesSearch = !searchFilter || getTranslatedText(item.name).toLowerCase().includes(searchFilter.toLowerCase())

                // Category filter (apply to all tabs)
                let matchesCategory = true
                if (craftCategoryFilter !== 'all') {
                  // Assuming item has a 'type' property that matches category IDs
                  matchesCategory = item.type === craftCategoryFilter
                }

                return matchesSearch && matchesCategory
              }).length === 0 ? (
                <div className="empty-state">
                  {t('game.noItemsFound')}
                </div>
              ) : (
                items
                  .filter(item => {
                    // Text search filter
                    const searchFilter = workbenchTab === 'craft' ? craftFilter : workbenchTab === 'repair' ? repairFilter : uncraftFilter
                    const matchesSearch = !searchFilter || getTranslatedText(item.name).toLowerCase().includes(searchFilter.toLowerCase())

                    // Category filter (apply to all tabs)
                    let matchesCategory = true
                    if (craftCategoryFilter !== 'all') {
                      // Assuming item has a 'type' property that matches category IDs
                      matchesCategory = item.type === craftCategoryFilter
                    }

                    return matchesSearch && matchesCategory
                  })
                  .map((item: any, idx: number) => {
                    const imagePath = getAssetPath(item.image_path || `images/items/${item.item_id || item.id}.webp`)
                    return (
                      <div
                        key={item.unique_item_id || item.item_id || idx}
                        className={`workbench-item-card ${selectedItem === item ? 'selected' : ''} ${workbenchTab === 'craft' && item.can_craft ? 'craftable' : ''} ${workbenchTab === 'repair' && item.needs_repair ? 'repairable' : ''} ${workbenchTab === 'uncraft' && item.can_uncraft ? 'salvageable' : ''}`}
                        onClick={() => setSelectedItem(item)}
                      >
                        {/* Item Image/Icon */}
                        <div className="item-image-thumb">
                          {imagePath ? (
                            <img
                              src={imagePath}
                              alt={getTranslatedText(item.name)}
                              className="item-thumb-img"
                              onError={(e) => {
                                (e.target as HTMLImageElement).style.display = 'none';
                                const icon = (e.target as HTMLImageElement).nextElementSibling;
                                if (icon) icon.classList.remove('hidden');
                              }}
                            />
                          ) : null}
                          <div className={`item-thumb-emoji ${imagePath ? 'hidden' : ''}`}>
                            {item.emoji || '📦'}
                          </div>
                        </div>

                        <div className="item-card-content">
                          <div className="item-header-row">
                            <span
                              className={`item-name ${(workbenchTab === 'repair' || workbenchTab === 'uncraft') && item.tier ? `text-tier-${item.tier}` : ''}`}
                            >
                              {getTranslatedText(item.name)}
                            </span>
                            {item.location === 'equipped' && <span className="item-card-equipped" style={{ marginLeft: '0.5rem' }}>{t('game.equipped')}</span>}
                          </div>

                          <div className="item-meta-row">
                          </div>

                          {/* Stats display for repair/salvage items */}
                          {(workbenchTab === 'repair' || workbenchTab === 'uncraft') && (() => {
                            const statsSource = item.unique_item_data?.unique_stats ?? item.unique_item_data ?? item.base_stats ?? item.stats ?? {};
                            const damage_min = statsSource.damage_min;
                            const damage_max = statsSource.damage_max;
                            const armor = statsSource.armor;

                            return (damage_min || armor) ? (
                              <div className="item-stats-mini">
                                {damage_min && (
                                  <span className="stat-mini">⚔️ {damage_min}-{damage_max}</span>
                                )}
                                {armor && (
                                  <span className="stat-mini">🛡️ {armor}</span>
                                )}
                              </div>
                            ) : null;
                          })()}

                          {/* Condition bar for Salvage tab */}
                          {workbenchTab === 'uncraft' && item.durability_percent !== undefined && (
                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                              <div className="mini-progress-bar" style={{ flex: 1 }}>
                                <div
                                  className={`mini-progress-fill ${item.durability_percent < 30 ? 'critical' : item.durability_percent < 70 ? 'warning' : 'good'}`}
                                  style={{ width: `${item.durability_percent}%` }}
                                ></div>
                              </div>
                              {(item.current_durability !== undefined && item.current_durability !== null) && (
                                <span className="stat-mini durability" style={{ flexShrink: 0 }}>🔧 {item.current_durability}/{item.max_durability}</span>
                              )}
                            </div>
                          )}

                          {/* Progress Bar for Repair tab */}
                          {workbenchTab === 'repair' && item.durability_percent !== undefined && (
                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                              <div className="mini-progress-bar" style={{ flex: 1 }}>
                                <div
                                  className={`mini-progress-fill ${item.durability_percent < 30 ? 'critical' : item.durability_percent < 70 ? 'warning' : 'good'}`}
                                  style={{ width: `${item.durability_percent}%` }}
                                ></div>
                              </div>
                              {(item.current_durability !== undefined && item.current_durability !== null) && (
                                <span className="stat-mini durability" style={{ flexShrink: 0 }}>🔧 {item.current_durability}/{item.max_durability}</span>
                              )}
                            </div>
                          )}
                        </div>
                      </div>
                    )
                  })
              )}
            </div>
          </div>

          {/* Column 3: Details */}
          <div className="workbench-details-column">
            {renderItemDetails()}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Workbench