const CraftTab = ({
  weapon,
  inventoryParts,
  inventoryWeapons,
  craftMode,
  setCraftMode,
  attachPart,
  detachPart,
  equipWeapon,
  craftPrefix,
  trashWeapon,
  selectedWeaponId,
  setSelectedWeaponId,
  materialWeaponId,
  setMaterialWeaponId,
  showTooltip,
  hideTooltip,
  player
}) => {
  return (
    <div className="p-10 lg:p-16 max-w-4xl mx-auto animate-fade-in">
      <h2 className="text-2xl font-bold border-b border-gray-700 pb-4 mb-10 text-cyan-400 flex items-center gap-3">
        <Settings size={28} /> 工房 - CRAFT
      </h2>
      
      <div className="bg-gray-800 p-8 rounded-xl mb-8 shadow-2xl border border-gray-700 relative">
        <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-cyan-500 to-blue-500 opacity-50 rounded-t-xl"></div>
        <div className="text-sm text-gray-400 mb-2 font-bold tracking-widest uppercase opacity-60">Currently Tuning</div>
        <div className={`text-3xl font-black mb-8 flex items-baseline gap-3 ${weapon.rarity && RARITIES[weapon.rarity] ? RARITIES[weapon.rarity].color : 'text-yellow-300'}`}>
          <span className="text-lg opacity-80">{(PREFIXES[weapon.prefix] || PREFIXES['none']).name}</span>
          {weapon.name}
          {weapon.enhanceLv > 0 && <span className="text-blue-400 text-xl">+{weapon.enhanceLv}</span>}
        </div>
        
        <div className="flex flex-wrap justify-center gap-8 mb-4">
          {(weapon.sockets || []).map((sock, i) => (
            <div key={i} className="flex flex-col items-center shrink-0">
              <div 
                onClick={() => detachPart(i)}
                onMouseEnter={(e) => showTooltip(e, sock)}
                onMouseLeave={hideTooltip}
                className="w-24 h-24 bg-gray-900 border-2 border-dashed border-gray-500 flex items-center justify-center rounded-2xl cursor-pointer hover:border-red-400 transition-all relative group shadow-inner"
              >
                {sock ? (
                  <>
                    <div className={`scale-150 ${PARTS[sock].color}`}>{PARTS[sock].icon}</div>
                    <div className="absolute inset-0 bg-red-500/20 hidden group-hover:flex items-center justify-center rounded-2xl backdrop-blur-sm transition-all z-10">
                      <span className="text-xs font-black text-red-200 uppercase tracking-tighter">Remove</span>
                    </div>
                  </>
                ) : (
                  <span className="text-gray-700 text-[10px] font-bold uppercase tracking-widest">Empty Slot</span>
                )}
              </div>
              
              {!sock && (
                <div className="mt-4 w-full grid grid-cols-1 gap-2 max-h-48 overflow-y-auto custom-scrollbar p-1">
                  {Object.entries(inventoryParts).filter(([_, count]) => count > 0).map(([partId, count]) => (
                     <button 
                       key={partId} 
                       onClick={() => attachPart(partId, i)}
                       onMouseEnter={(e) => showTooltip(e, partId)}
                       onMouseLeave={hideTooltip}
                       className="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg border border-gray-600 flex justify-between items-center transition-all shadow hover:shadow-cyan-900/20 group"
                     >
                       <div className="flex items-center gap-2">
                         <span className={`${PARTS[partId].color} group-hover:scale-110 transition-transform`}>{PARTS[partId].icon}</span>
                         <span className={`${RARITIES[PARTS[partId].rarity].color} font-bold`}>{PARTS[partId].name}</span>
                       </div>
                       <span className="text-cyan-300 font-black bg-gray-900 px-2 py-0.5 rounded text-[10px]">x{count}</span>
                     </button>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>

      <div className="flex border-b border-gray-700 mb-8 bg-gray-900/50 p-1 rounded-t-xl gap-1">
        <button 
          onClick={() => setCraftMode('socket')}
          className={`flex-1 px-6 py-3 text-sm font-black tracking-widest uppercase transition-all rounded-t-lg ${craftMode === 'socket' ? 'text-cyan-400 border-b-2 border-cyan-400 bg-gray-800' : 'text-gray-500 hover:text-gray-300 hover:bg-gray-800/50'}`}
        >
          Weapon Storage
        </button>
        <button 
          onClick={() => setCraftMode('prefix')}
          className={`flex-1 px-6 py-3 text-sm font-black tracking-widest uppercase transition-all rounded-t-lg ${craftMode === 'prefix' ? 'text-purple-400 border-b-2 border-purple-400 bg-gray-800' : 'text-gray-500 hover:text-gray-300 hover:bg-gray-800/50'}`}
        >
          Prefix Inherit
        </button>
      </div>

      {craftMode === 'socket' && (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {inventoryWeapons.length === 0 && <p className="text-gray-500 text-sm font-bold col-span-full text-center py-16 bg-gray-800/30 rounded-2xl border border-dashed border-gray-700 uppercase tracking-widest">No weapons in inventory</p>}
          {inventoryWeapons.map(w => (
            <div key={w.id} className={`bg-gray-800 border-2 rounded-xl p-5 flex flex-col transition-all cursor-pointer group relative overflow-hidden ${selectedWeaponId === w.id ? 'border-cyan-500 shadow-[0_0_20px_rgba(6,182,212,0.15)] bg-gray-750' : 'border-gray-700 hover:border-gray-500'}`} onClick={() => setSelectedWeaponId(w.id)}>
              <div className="flex justify-between items-start mb-3 relative z-10">
                <div>
                  <div className={`text-xs font-bold uppercase tracking-tighter opacity-70 ${(PREFIXES[w.prefix] || PREFIXES['none']).color}`}>{(PREFIXES[w.prefix] || PREFIXES['none']).name || 'No Prefix'}</div>
                  <div className={`text-xl font-black ${RARITIES[w.rarity].color}`}>{w.name}</div>
                </div>
                <div className="text-right">
                  <div className="text-[10px] font-bold text-gray-500 tracking-widest">BASE ATK</div>
                  <div className="text-xl font-black text-white">{w.baseAtk}</div>
                </div>
              </div>
              
              <div className="flex gap-2 mb-4 relative z-10">
                {w.sockets.map((s, idx) => (
                  <div key={idx} className="w-8 h-8 rounded-lg bg-gray-900 border border-gray-700 flex items-center justify-center">
                    {s ? <span className={`${PARTS[s].color} scale-75`}>{PARTS[s].icon}</span> : <div className="w-1 h-1 bg-gray-700 rounded-full"></div>}
                  </div>
                ))}
              </div>

              {selectedWeaponId === w.id && (
                <div className="flex gap-2 animate-fade-in-up mt-auto pt-2 border-t border-gray-700 relative z-10">
                  <button onClick={() => equipWeapon(w.id)} className="flex-1 bg-cyan-600 hover:bg-cyan-500 text-white font-black py-2.5 rounded-lg text-xs tracking-widest uppercase transition-colors shadow-lg shadow-cyan-900/40">Equip</button>
                  <button onClick={() => trashWeapon(w.id)} className="px-4 bg-red-900/50 hover:bg-red-800 text-red-400 font-bold py-2.5 rounded-lg text-xs tracking-widest uppercase transition-colors border border-red-800/50"><Trash2 size={16} /></button>
                </div>
              )}
            </div>
          ))}
        </div>
      )}

      {craftMode === 'prefix' && (
        <div className="space-y-6">
          <div className="bg-purple-900/20 border border-purple-500/30 rounded-2xl p-8 text-center relative overflow-hidden">
             <div className="absolute -top-10 -left-10 w-40 h-40 bg-purple-500/10 rounded-full blur-3xl"></div>
             <p className="text-purple-200 text-lg mb-6 font-bold leading-relaxed">
               素材武器の<span className="text-purple-400 bg-purple-900/50 px-2 py-0.5 rounded mx-1">二つ名</span>を現在の武器に継承します。<br/>
               <span className="text-sm opacity-70">※素材となった武器と装着されていたパーツは消滅しますが、パーツはインベントリに返却されます。</span>
             </p>
             <div className="bg-gray-900/50 inline-block px-4 py-2 rounded-full border border-purple-800/30 text-purple-400 font-black text-xs tracking-widest">
                COST: 200 SCRAP
             </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {inventoryWeapons.filter(w => w.prefix !== 'none').length === 0 && <p className="text-gray-500 text-sm font-bold col-span-full text-center py-16 bg-gray-800/30 rounded-2xl border border-dashed border-gray-700 uppercase tracking-widest">No weapons with prefixes</p>}
            {inventoryWeapons.filter(w => w.prefix !== 'none').map(w => (
              <div 
                key={w.id} 
                className={`bg-gray-800 border-2 rounded-xl p-5 flex flex-col transition-all cursor-pointer group ${materialWeaponId === w.id ? 'border-purple-500 bg-gray-750 shadow-lg shadow-purple-900/20' : 'border-gray-700 hover:border-gray-500'}`}
                onClick={() => setMaterialWeaponId(w.id)}
              >
                <div className="flex justify-between items-center mb-1">
                  <div className="text-xl font-black text-purple-400">{(PREFIXES[w.prefix] || PREFIXES['none']).name}</div>
                  <div className="text-[10px] font-bold text-gray-500 tracking-widest uppercase">Target Prefix</div>
                </div>
                <div className="text-sm font-bold text-gray-400 mb-4">{w.name}</div>
                {materialWeaponId === w.id && (
                  <button 
                    onClick={(e) => { e.stopPropagation(); craftPrefix(); }} 
                    disabled={(player.scrap || 0) < 200}
                    className={`mt-2 py-3 rounded-lg font-black text-xs tracking-widest uppercase transition-all shadow-lg ${
                      (player.scrap || 0) >= 200 
                        ? 'bg-purple-600 hover:bg-purple-500 text-white shadow-purple-900/40' 
                        : 'bg-gray-700 text-gray-500 cursor-not-allowed border border-gray-600'
                    }`}
                  >
                    継承を実行する
                  </button>
                )}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};