import type { Location, PlayerState, CombatState, Profile, WorkbenchTab } from './types'
import { useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { useAudio } from '../../contexts/AudioContext'
import Workbench from './Workbench'
import { GameTooltip } from '../common/GameTooltip'
import { GameButton } from '../common/GameButton'
import { GameDropdown } from '../common/GameDropdown'
import { getAssetPath } from '../../utils/assetPath'
import { getTranslatedText } from '../../utils/i18nUtils'
import './LocationView.css'

interface LocationViewProps {
  location: Location
  playerState: PlayerState | null
  combatState: CombatState | null
  message: string
  locationMessages: Array<{ time: string; message: string }>
  expandedCorpse: string | null
  corpseDetails: any
  mobileMenuOpen: string
  showCraftingMenu: boolean
  showRepairMenu: boolean
  workbenchTab: WorkbenchTab
  craftableItems: any[]
  repairableItems: any[]
  uncraftableItems: any[]
  craftFilter: string
  repairFilter: string
  uncraftFilter: string
  craftCategoryFilter: string
  profile: Profile | null
  onSetMessage: (msg: string) => void
  onInitiateCombat: (npcId: number) => void
  onInitiatePvP: (playerId: number) => void
  onPickup: (itemId: number, quantity: number) => void
  onLootCorpse: (corpseId: string) => void
  onLootCorpseItem: (corpseId: string, itemIndex: number | null) => void
  onSetExpandedCorpse: (corpseId: string | null) => void
  onOpenCrafting?: () => void
  onOpenRepair?: () => void
  onCloseCrafting: () => void
  onSwitchWorkbenchTab: (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
  failedActionItemId: string | number | null
}

function LocationView({
  location,

  locationMessages,
  expandedCorpse,
  corpseDetails,
  mobileMenuOpen,
  showCraftingMenu,
  showRepairMenu,
  workbenchTab,
  craftableItems,
  repairableItems,
  failedActionItemId,
  uncraftableItems,
  craftFilter,
  repairFilter,
  uncraftFilter,
  craftCategoryFilter,
  profile,

  onInitiateCombat,
  onInitiatePvP,
  onPickup,
  onLootCorpse,
  onLootCorpseItem,
  onSetExpandedCorpse,
  onOpenCrafting,
  onOpenRepair,
  onCloseCrafting,
  onSwitchWorkbenchTab,
  onSetCraftFilter,
  onSetRepairFilter,
  onSetUncraftFilter,
  onSetCraftCategoryFilter,
  onCraft,
  onRepair,
  onUncraft
}: LocationViewProps) {
  const { t } = useTranslation()
  const { playSfx } = useAudio()

  // Dropdown State
  const [activeDropdown, setActiveDropdown] = useState<string | null>(null)
  const [dropdownPos, setDropdownPos] = useState({ x: 0, y: 0 })

  // Handle dropdown toggle
  const handleDropdownClick = (e: React.MouseEvent, id: string) => {
    e.stopPropagation()
    if (activeDropdown === id) {
      setActiveDropdown(null)
    } else {
      const rect = e.currentTarget.getBoundingClientRect()
      // Fix: GameDropdown uses fixed positioning, so we don't add scroll offsets
      setDropdownPos({
        x: rect.left,
        y: rect.bottom + 5
      })
      setActiveDropdown(id)
    }
  }

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = () => setActiveDropdown(null)
    window.addEventListener('click', handleClickOutside)
    return () => window.removeEventListener('click', handleClickOutside)
  }, [])

  return (
    <div className="location-view">
      <div className="location-info">
        <h2 className="centered-heading">
          {getTranslatedText(location.name)}
          {location.danger_level !== undefined && location.danger_level === 0 && (
            <GameTooltip content="Safe Zone">
              <span className="danger-badge danger-safe">✓ Safe</span>
            </GameTooltip>
          )}
          {location.danger_level !== undefined && location.danger_level > 0 && (
            <GameTooltip content={`Danger Level: ${location.danger_level}`}>
              <span className={`danger-badge danger-${location.danger_level}`}>
                ⚠️ {location.danger_level}
              </span>
            </GameTooltip>
          )}
        </h2>

        {location.tags && location.tags.length > 0 && (
          <div className="location-tags">
            {location.tags.map((tag: string, i: number) => {
              const isClickable = tag === 'workbench' || tag === 'repair_station'
              const handleClick = () => {
                if (tag === 'workbench' && onOpenCrafting) onOpenCrafting()
                else if (tag === 'repair_station' && onOpenRepair) onOpenRepair()
              }

              return (
                <GameTooltip key={i} content={isClickable ? `Click to ${tag === 'workbench' ? 'craft items' : 'repair items'}` : `This location has: ${tag}`}>
                  <span
                    className={`location-tag tag-${tag} ${isClickable ? 'clickable' : ''}`}
                    onClick={isClickable ? handleClick : undefined}
                    style={isClickable ? { cursor: 'pointer' } : undefined}
                  >
                    {tag === 'workbench' && t('tags.workbench')}
                    {tag === 'repair_station' && t('tags.repairStation')}
                    {tag === 'safe_zone' && t('tags.safeZone')}
                    {tag === 'shop' && t('tags.shop')}
                    {tag === 'shelter' && t('tags.shelter')}
                    {tag === 'medical' && t('tags.medical')}
                    {tag === 'storage' && t('tags.storage')}
                    {tag === 'water_source' && t('tags.water')}
                    {tag === 'food_source' && t('tags.food')}
                    {tag !== 'workbench' && tag !== 'repair_station' && tag !== 'safe_zone' && tag !== 'shop' && tag !== 'shelter' && tag !== 'medical' && tag !== 'storage' && tag !== 'water_source' && tag !== 'food_source' && `🏷️ ${tag}`}
                  </span>
                </GameTooltip>
              )
            })}
          </div>
        )}



        {location.image_url && (
          <div className="location-image-container">
            <img
              src={getAssetPath(location.image_url)}
              alt={getTranslatedText(location.name)}
              className="location-image"
              onError={(e: any) => (e.currentTarget.style.display = 'none')}
            />
          </div>
        )}

        <div className="location-description-box">
          <p className="location-description">{getTranslatedText(location.description)}</p>
        </div>
      </div>

      {/* {message && (
        <div className="message-box" onClick={() => onSetMessage('')}>
          {message}
        </div>
      )} */}

      {locationMessages.length > 0 && (
        <div className="location-messages-log">
          <h4>{t('location.recentActivity')}</h4>
          <div className="messages-scroll">
            {locationMessages.slice(-10).reverse().map((msg, idx) => (
              <div key={idx} className="location-message-item">
                <span className="message-time">{msg.time}</span>
                <span className="message-text">{msg.message}</span>
              </div>
            ))}
          </div>
        </div>
      )}

      <div className={`ground-entities mobile-menu-panel bottom ${mobileMenuOpen === 'bottom' ? 'open' : ''}`}>
        {/* Enemies */}
        {/* Enemies */}
        {location.npcs.filter((npc: any) => npc.type === 'enemy').length > 0 && (
          <div className="entity-section enemies-section">
            <h3>{t('location.enemies')}</h3>
            <div className="entity-list grid-view">
              {location.npcs.filter((npc: any) => npc.type === 'enemy').map((enemy: any, i: number) => {
                const id = `enemy-${enemy.id || i}`;
                return (
                  <div key={i} className="entity-card enemy-card grid-card"
                    onClick={(e) => handleDropdownClick(e, id)}>
                    {enemy.id && (
                      <div className="entity-image">
                        <img
                          src={getAssetPath(enemy.image_path || `images/npcs/${(typeof enemy.name === 'string' ? enemy.name : enemy.name?.en || '').toLowerCase().replace(/ /g, '_')}.webp`)}
                          alt={getTranslatedText(enemy.name)}
                          onError={(e: any) => { e.currentTarget.style.display = 'none' }}
                        />
                      </div>
                    )}

                    <GameTooltip content={
                      <div>
                        <div className="tooltip-title">{getTranslatedText(enemy.name)}</div>
                        <div>{t('location.level')} {enemy.level}</div>
                        <div style={{ color: '#f56565', fontSize: '0.8rem' }}>Click for actions</div>
                      </div>
                    }>
                      <div className="grid-overlay"></div>
                    </GameTooltip>

                    {/* Dropdown for Grid View */}
                    {activeDropdown === id && (
                      <GameDropdown
                        isOpen={true}
                        onClose={() => setActiveDropdown(null)}
                        position={dropdownPos}
                        width="160px"
                      >
                        <div className="game-dropdown-header">{getTranslatedText(enemy.name)}</div>
                        <GameButton
                          variant="danger"
                          size="sm"
                          onClick={() => { onInitiateCombat(enemy.id); setActiveDropdown(null); }}
                          style={{ width: '100%', justifyContent: 'flex-start' }}
                        >
                          ⚔️ {t('common.fight')}
                        </GameButton>
                        <div className="game-dropdown-divider" />
                        <div style={{ padding: '0.5rem', fontSize: '0.8rem', color: '#a0aec0' }}>
                          {t('location.level')} {enemy.level}
                        </div>
                      </GameDropdown>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {/* Corpses */}
        {location.corpses && location.corpses.length > 0 && (
          <div className="entity-section corpses-section">
            <h3>{t('location.corpses')}</h3>
            <div className="entity-list grid-view">
              {location.corpses.map((corpse: any) => (
                <div key={corpse.id} className={`corpse-container ${expandedCorpse === String(corpse.id) ? 'expanded' : ''}`}>
                  <div className="entity-card corpse-card grid-card"
                    onClick={(e) => handleDropdownClick(e, `corpse-${corpse.id}`)}
                  >
                    <GameTooltip content={
                      <div>
                        <div className="tooltip-title">{corpse.emoji} {getTranslatedText(corpse.name)}</div>
                        <div>{corpse.loot_count} {t('location.items')}</div>
                      </div>
                    }>
                      <div className="grid-corpse-content">
                        <div style={{ fontSize: '2rem' }}>{corpse.emoji}</div>
                        <div style={{ fontSize: '0.8rem', color: '#ce93d8' }}>{corpse.loot_count} items</div>
                      </div>
                    </GameTooltip>

                    {activeDropdown === `corpse-${corpse.id}` && (
                      <GameDropdown
                        isOpen={true}
                        onClose={() => setActiveDropdown(null)}
                        position={dropdownPos}
                        width="160px"
                      >
                        <div className="game-dropdown-header">{getTranslatedText(corpse.name)}</div>
                        <GameButton
                          variant="secondary"
                          size="sm"
                          onClick={() => {
                            playSfx('/audio/sfx/interact.wav')
                            onLootCorpse(String(corpse.id))
                            setActiveDropdown(null)
                          }}
                          disabled={corpse.loot_count === 0}
                          style={{ width: '100%', justifyContent: 'flex-start' }}
                        >
                          🔍 {t('common.examine')}
                        </GameButton>
                      </GameDropdown>
                    )}
                  </div>

                  {expandedCorpse === String(corpse.id) && corpseDetails && corpseDetails.loot_items && (
                    <div className="corpse-details">
                      <div className="corpse-details-header">
                        <h4>{t('location.lootableItems')}</h4>
                        <button
                          className="close-btn"
                          onClick={() => {
                            onSetExpandedCorpse(null)
                          }}
                        >
                          ✕
                        </button>
                      </div>
                      <div className="corpse-items-list">
                        {corpseDetails.loot_items.map((item: any) => (
                          <div key={item.index} className={`corpse-item ${!item.can_loot ? 'locked' : ''}`}>
                            <div className="corpse-item-info">
                              <div className="corpse-item-name">
                                {item.emoji} {getTranslatedText(item.item_name)}
                              </div>
                              <div className="corpse-item-qty">
                                {t('common.qty')}: {item.quantity_min}{item.quantity_min !== item.quantity_max ? `-${item.quantity_max}` : ''}
                              </div>
                              {item.required_tool && (
                                <div className={`corpse-item-tool ${item.has_tool ? 'has-tool' : 'needs-tool'}`}>
                                  🔧 {getTranslatedText(item.required_tool_name)} {item.has_tool ? '✓' : '✗'}
                                </div>
                              )}
                            </div>
                            <GameTooltip content={!item.can_loot ? `Requires ${getTranslatedText(item.required_tool_name)}` : 'Loot this item'}>
                              <button
                                className="corpse-item-loot-btn"
                                onClick={() => onLootCorpseItem(String(corpse.id), item.index)}
                                disabled={!item.can_loot}
                              >
                                {item.can_loot ? `📦 ${t('common.loot')}` : '🔒'}
                              </button>
                            </GameTooltip>
                          </div>
                        ))}
                      </div>
                      <button
                        className="loot-all-btn"
                        onClick={() => onLootCorpseItem(String(corpse.id), null)}
                      >
                        📦 {t('common.lootAll')}
                      </button>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Friendly NPCs */}
        {location.npcs.filter((npc: any) => npc.type !== 'enemy').length > 0 && (
          <div className="entity-section npcs-section">
            <h3>{t('location.npcs')}</h3>
            <div className="entity-list grid-view">
              {location.npcs.filter((npc: any) => npc.type !== 'enemy').map((npc: any, i: number) => (
                <div key={i} className="entity-card npc-card grid-card"
                  onClick={(e) => handleDropdownClick(e, `npc-${i}`)}
                >
                  <span className="entity-icon" style={{ fontSize: '2.5rem' }}>🧑</span>

                  <GameTooltip content={
                    <div>
                      <div className="tooltip-title">{getTranslatedText(npc.name)}</div>
                      <div>{t('location.level')} {npc.level}</div>
                    </div>
                  }>
                    <div className="grid-overlay"></div>
                  </GameTooltip>

                  {activeDropdown === `npc-${i}` && (
                    <GameDropdown
                      isOpen={true}
                      onClose={() => setActiveDropdown(null)}
                      position={dropdownPos}
                    >
                      <div className="game-dropdown-header">{getTranslatedText(npc.name)}</div>
                      <GameButton variant="primary" size="sm" style={{ width: '100%', justifyContent: 'flex-start' }}>
                        💬 {t('common.talk')}
                      </GameButton>
                    </GameDropdown>
                  )}
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Items on Ground */}
        {location.items.length > 0 && (
          <div className="entity-section items-section">
            <h3>{t('location.itemsOnGround')}</h3>
            <div className="entity-list grid-view">
              {location.items.map((item: any, i: number) => {
                // Use loose equality to handle potential string/number mismatches
                const isShaking = failedActionItemId == item.id;
                const itemId = `item-${item.id}-${i}`;
                return (
                  <div key={i} className={`entity-card item-card ${isShaking ? 'shake' : ''} grid-card`}
                    onClick={(e) => handleDropdownClick(e, itemId)}
                  >
                    <GameTooltip content={
                      <div className="item-info-tooltip-content">
                        {item.description && <div className="item-tooltip-desc">{getTranslatedText(item.description)}</div>}
                        {item.weight !== undefined && item.weight > 0 && (
                          <div className="item-tooltip-stat">
                            ⚖️ {t('stats.weight')}: {item.weight}kg {item.quantity > 1 && `(Total: ${(item.weight * item.quantity).toFixed(2)}kg)`}
                          </div>
                        )}
                        {item.volume !== undefined && item.volume > 0 && (
                          <div className="item-tooltip-stat">
                            📦 {t('stats.volume')}: {item.volume}L {item.quantity > 1 && `(Total: ${(item.volume * item.quantity).toFixed(2)}L)`}
                          </div>
                        )}
                        {item.hp_restore && item.hp_restore > 0 && (
                          <div className="item-tooltip-stat">❤️ {t('stats.hpRestore')}: +{item.hp_restore}</div>
                        )}
                        {item.stamina_restore && item.stamina_restore > 0 && (
                          <div className="item-tooltip-stat">⚡ {t('stats.staminaRestore')}: +{item.stamina_restore}</div>
                        )}
                        {item.damage_min !== undefined && item.damage_max !== undefined && (item.damage_min > 0 || item.damage_max > 0) && (
                          <div className="item-tooltip-stat">
                            ⚔️ {t('stats.damage')}: {item.damage_min}-{item.damage_max}
                          </div>
                        )}
                        {item.durability !== undefined && item.durability !== null && item.max_durability !== undefined && item.max_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">⭐ {t('stats.tier')}: {item.tier}</div>
                        )}
                      </div>
                    }>
                      <div className="entity-content-wrapper grid-content">
                        {item.image_path ? (
                          <img
                            src={getAssetPath(item.image_path)}
                            alt={getTranslatedText(item.name)}
                            className="entity-icon"
                            style={{ width: '100%', height: '100%', objectFit: 'contain' }}
                            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={`entity-icon ${item.image_path ? 'hidden' : ''}`} style={!item.image_path ? { fontSize: '2rem' } : {}}>{item.emoji || '📦'}</span>

                        {item.quantity > 1 && (
                          <div className="grid-quantity">x{item.quantity}</div>
                        )}
                      </div>
                    </GameTooltip>

                    {activeDropdown === itemId && (
                      <GameDropdown
                        isOpen={true}
                        onClose={() => setActiveDropdown(null)}
                        position={dropdownPos}
                        width="160px"
                      >
                        <div className="game-dropdown-header">{getTranslatedText(item.name)}</div>
                        <GameButton
                          variant="success"
                          size="sm"
                          onClick={() => { onPickup(item.id, 1); setActiveDropdown(null); }}
                          style={{ width: '100%', justifyContent: 'flex-start' }}
                        >
                          🤚 {t('common.pickUp')} (x1)
                        </GameButton>
                        {item.quantity > 1 && (
                          <GameButton
                            variant="success"
                            size="sm"
                            onClick={() => { onPickup(item.id, item.quantity); setActiveDropdown(null); }}
                            style={{ width: '100%', justifyContent: 'flex-start' }}
                          >
                            🤚 {t('common.pickUp')} ({t('common.all')})
                          </GameButton>
                        )}
                      </GameDropdown>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {/* Other Players */}
        {location.other_players && location.other_players.length > 0 && (
          <div className="entity-section players-section">
            <h3>👥 Other Players</h3>
            <div className="entity-list">
              {location.other_players.map((player: any, i: number) => (
                <div key={i} className="entity-card player-card">
                  <span className="entity-icon">🧍</span>
                  <div className="entity-info">
                    <div className="entity-name">{player.name || player.username}</div>
                    <div className="entity-level">Lv. {player.level}</div>
                    {player.level_diff !== undefined && (
                      <div className="level-diff">
                        {player.level_diff > 0 ? `+${player.level_diff}` : player.level_diff} levels
                      </div>
                    )}
                  </div>
                  {player.can_pvp && (
                    <GameTooltip content={`Attack ${player.name || player.username}`}>
                      <button
                        className="pvp-btn"
                        onClick={() => onInitiatePvP(player.id)}
                      >
                        {t('game.attack')}
                      </button>
                    </GameTooltip>
                  )}
                  {!player.can_pvp && player.level_diff !== undefined && Math.abs(player.level_diff) > 3 && (
                    <div className="pvp-disabled-reason">{t('game.levelDifferenceTooHigh')}</div>
                  )}
                  {!player.can_pvp && location.danger_level !== undefined && location.danger_level < 3 && (
                    <div className="pvp-disabled-reason">{t('game.areaTooSafeForPvP')}</div>
                  )}
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

      {(showCraftingMenu || showRepairMenu) && (
        <Workbench
          showCraftingMenu={showCraftingMenu}
          showRepairMenu={showRepairMenu}
          workbenchTab={workbenchTab}
          craftableItems={craftableItems}
          repairableItems={repairableItems}
          uncraftableItems={uncraftableItems}
          craftFilter={craftFilter}
          repairFilter={repairFilter}
          uncraftFilter={uncraftFilter}
          craftCategoryFilter={craftCategoryFilter}
          profile={profile}
          onCloseCrafting={onCloseCrafting}
          onSwitchTab={onSwitchWorkbenchTab}
          onSetCraftFilter={onSetCraftFilter}
          onSetRepairFilter={onSetRepairFilter}
          onSetUncraftFilter={onSetUncraftFilter}
          onSetCraftCategoryFilter={onSetCraftCategoryFilter}
          onCraft={onCraft}
          onRepair={onRepair}
          onUncraft={onUncraft}
        />
      )}
    </div>
  )
}

export default LocationView
