'use client';

import { Lock, Package } from 'lucide-react';
import type { EquipmentInstance, EquipmentSlot } from '@/lib/game/types';
import { EQUIPMENT_TYPES, SLOT_NAMES } from '@/lib/game/data/equipment';
import { RARITY_CSS_VAR } from '@/components/game/LootInventory/types';
import { CATEGORY_ICONS } from '@/components/game/LootInventory/icons';
import { DebugName } from '@/components/game/debug/debug-context';
import { ActionButton } from '@/components/ui/action-button';

interface EquipmentSlotGridProps {
  equippedInstances: Record<string, string | null>;
  equipmentInstances: Record<string, EquipmentInstance>;
  onUnequip: (slot: EquipmentSlot) => void;
}

const SLOTS: EquipmentSlot[] = ['mainHand', 'offHand', 'head', 'body', 'hands', 'feet', 'accessory1', 'accessory2'];

/**
 * Determine if a slot is blocked by a two-handed weapon in mainHand.
 * Returns the type name of the blocking weapon, or null if not blocked.
 */
function getTwoHandedBlocker(
  slot: EquipmentSlot,
  equippedInstances: Record<string, string | null>,
  equipmentInstances: Record<string, EquipmentInstance>,
): string | null {
  if (slot !== 'offHand') return null;
  const mainHandId = equippedInstances.mainHand;
  if (!mainHandId) return null;
  const mainHandInstance = equipmentInstances[mainHandId];
  if (!mainHandInstance) return null;
  const mainHandType = EQUIPMENT_TYPES[mainHandInstance.typeId];
  if (mainHandType?.twoHanded) {
    return mainHandType.name;
  }
  return null;
}

export function EquipmentSlotGrid({ equippedInstances, equipmentInstances, onUnequip }: EquipmentSlotGridProps) {
  return (
    <DebugName name="EquipmentSlotGrid">
    <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
      {SLOTS.map((slot) => {
        const instanceId = equippedInstances[slot];
        const instance = instanceId ? equipmentInstances[instanceId] : null;
        const blocker = getTwoHandedBlocker(slot, equippedInstances, equipmentInstances);

        if (instance) {
          const type = EQUIPMENT_TYPES[instance.typeId];
          const Icon = type ? CATEGORY_ICONS[type.category] || Package : Package;
          const rarityColor = RARITY_CSS_VAR[instance.rarity] || 'var(--rarity-common)';

          return (
            <div
              key={slot}
              className="p-3 rounded border bg-[var(--bg-sunken)] space-y-2"
              style={{ borderColor: rarityColor }}
            >
              <div className="flex items-center justify-between">
                <span className="text-xs text-[var(--text-muted)]">{SLOT_NAMES[slot]}</span>
                <Icon className="w-4 h-4" style={{ color: rarityColor }} />
              </div>
              <div className="text-sm font-semibold truncate" style={{ color: rarityColor }}>
                {instance.name}
              </div>
              <div className="text-xs text-[var(--text-muted)]">
                {instance.usedCapacity}/{instance.totalCapacity} cap
              </div>
              <div className="text-xs text-[var(--text-muted)]">
                {instance.enchantments.length} enchant{instance.enchantments.length !== 1 ? 's' : ''} • {instance.quality}% quality
              </div>
              <ActionButton
                variant="ghost"
                size="sm"
                className="w-full text-xs"
                onClick={() => onUnequip(slot)}
              >
                Unequip
              </ActionButton>
            </div>
          );
        }

        // Blocked by two-handed weapon
        if (blocker) {
          return (
            <div
              key={slot}
              className="p-3 rounded border border-dashed border-[var(--border-muted)] bg-[var(--bg-sunken)]/50 space-y-2 opacity-60"
            >
              <div className="flex items-center justify-between">
                <span className="text-xs text-[var(--text-muted)]">{SLOT_NAMES[slot]}</span>
                <Lock className="w-4 h-4 text-[var(--text-muted)]" />
              </div>
              <div className="text-sm text-[var(--text-muted)] italic">Blocked: {blocker}</div>
            </div>
          );
        }

        return (
          <div
            key={slot}
            className="p-3 rounded border border-dashed border-[var(--border-default)] bg-[var(--bg-sunken)] space-y-2"
          >
            <div className="flex items-center justify-between">
              <span className="text-xs text-[var(--text-muted)]">{SLOT_NAMES[slot]}</span>
              <Package className="w-4 h-4 text-[var(--text-muted)]" />
            </div>
            <div className="text-sm text-[var(--text-muted)] italic">Empty</div>
          </div>
        );
      })}
    </div>
    </DebugName>
  );
}
