Mana-Loop/src/components/game/tabs/EquipmentSlotGrid.tsx

'use client';

import { EquipmentSlot } from '@/lib/game/data/equipment';
import { SLOT_NAMES } from './EquipmentTab';
import type { GameStore, EquipmentInstance } from '@/lib/game/types';
import { GameCard } from '@/components/ui/game-card';
import { Badge } from '@/components/ui/badge';
import { AlertCircle, Sword, Shield, HardHat, Shirt, Hand, Footprints, Gem } from 'lucide-react';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { RARITY_BORDER_COLORS, RARITY_BG_COLORS, RARITY_TEXT_COLORS } from './EquipmentTab';
import { ENCHANTMENT_EFFECTS } from '@/lib/game/data/enchantment-effects';
import type { EquipmentType } from '@/lib/game/data/equipment';

const SLOT_ICONS: Record<EquipmentSlot, React.ElementType> = {
  mainHand: Sword,
  offHand: Shield,
  head: HardHat,
  body: Shirt,
  hands: Hand,
  feet: Footprints,
  accessory1: Gem,
  accessory2: Gem,
};

interface EquipmentSlotGridProps {
  store: GameStore;
  selectedSlot: EquipmentSlot | null;
  onSlotClick: (slot: EquipmentSlot) => void;
  onUnequip: (slot: EquipmentSlot) => void;
  isSlotBlocked: (slot: EquipmentSlot) => boolean;
  SLOT_GROUPS: Array<{ label: string; slots: EquipmentSlot[] }>;
}

export function EquipmentSlotGrid({
  store,
  selectedSlot,
  onSlotClick,
  onUnequip,
  isSlotBlocked,
  SLOT_GROUPS,
}: EquipmentSlotGridProps) {
  const renderSlot = (slot: EquipmentSlot) => {
    const instanceId = store.equippedInstances[slot];
    const instance = instanceId ? store.equipmentInstances[instanceId] : null;
    const equipmentType = instance ? (store as any).EQUIPMENT_TYPES?.[instance.typeId] : null;
    const blocked = isSlotBlocked(slot);
    const isEmpty = !instance;
    const SlotIcon = SLOT_ICONS[slot];

    const slotContent = (
      <GameCard
        variant={blocked ? 'danger' : instance ? 'default' : 'sunken'}
        className={`relative transition-all duration-200 
          ${isEmpty && !blocked ? 'border-dashed' : ''}
          ${blocked ? 'opacity-60 cursor-not-allowed' : 'hover:border-[var(--border-default)]'}
        `}
        role="button"
        aria-label={`${SLOT_NAMES[slot]} slot${blocked ? ' (blocked by 2-handed weapon)' : ''}${instance ? `: ${instance.name}` : ' (empty)'}`}
        tabIndex={blocked ? -1 : 0}
        onClick={() => !blocked && onSlotClick(slot)}
        onKeyDown={(e) => {
          if (!blocked && (e.key === 'Enter' || e.key === ' ')) {
            onSlotClick(slot);
          }
        }}
      >
        <div className="flex items-center justify-between mb-2">
          <div className="flex items-center gap-2">
            <SlotIcon
              size={16}
              className={blocked ? 'text-[var(--text-disabled)]' : 'text-[var(--text-secondary)]'}
            />
            <span
              className={`text-sm font-semibold 
                ${blocked ? 'text-[var(--text-disabled)]' : 'text-[var(--text-primary)]'}
              `}
            >
              {SLOT_NAMES[slot]}
            </span>
            {blocked && (
              <Badge
                variant="outline"
                className="text-xs border-[var(--mana-dark)] text-[var(--mana-dark)] ml-2"
              >
                <AlertCircle size={12} className="mr-1" />
                Occupied — 2H Weapon
              </Badge>
            )}
          </div>
          {instance && !blocked && (
            <button
              className="h-6 w-6 p-0 text-[var(--color-danger)] hover:text-[var(--interactive-danger-hover)] hover:bg-[var(--interactive-danger)]/20 rounded flex items-center justify-center"
              onClick={(e) => {
                e.stopPropagation();
                onUnequip(slot);
              }}
              aria-label={`Unequip ${instance.name}`}
            >
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <line x1="18" y1="6" x2="6" y2="18" />
                <line x1="6" y1="6" x2="18" y2="18" />
              </svg>
            </button>
          )}
        </div>

        {instance ? (
          <EquipmentItemDisplay
            instance={instance}
            equipmentType={equipmentType}
            isTwoHanded={equipmentType?.twoHanded || false}
            isCompact={true}
          />
        ) : blocked ? (
          <div className="text-sm text-[var(--text-disabled)] italic">
            <AlertCircle size={14} className="inline mr-1" />
            Blocked by 2-handed weapon
          </div>
        ) : (
          <div className="text-sm text-[var(--text-muted)] italic text-center py-2">
            {SLOT_NAMES[slot]}
          </div>
        )}
      </GameCard>
    );

    if (blocked) {
      return (
        <TooltipProvider key={slot}>
          <Tooltip>
            <TooltipTrigger asChild>
              {slotContent}
            </TooltipTrigger>
            <TooltipContent className="bg-[var(--bg-elevated)] border-[var(--border-default)] text-[var(--text-primary)]">
              <p>The offhand slot is blocked because a 2-handed weapon is equipped in the main hand.</p>
              <p className="text-[var(--text-muted)] text-xs mt-1">Unequip the 2-handed weapon to use this slot.</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      );
    }

    return <div key={slot}>{slotContent}</div>;
  };

  return (
    <div className="space-y-6">
      {SLOT_GROUPS.map((group) => (
        <div key={group.label}>
          <h4 className="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider mb-2">
            {group.label}
          </h4>
          <div className={`grid gap-3
            grid-cols-2
            ${group.slots.includes('mainHand' as EquipmentSlot) ? 'sm:grid-cols-2' : 'sm:grid-cols-2 lg:grid-cols-4'}
          `}>
            {group.slots.map((slot) => renderSlot(slot))}
          </div>
        </div>
      ))}
    </div>
  );
}

interface EquipmentItemDisplayProps {
  instance: EquipmentInstance;
  equipmentType: EquipmentType | undefined;
  isTwoHanded: boolean;
  isCompact?: boolean;
}

function EquipmentItemDisplay({
  instance,
  equipmentType,
  isTwoHanded,
  isCompact = false,
}: EquipmentItemDisplayProps) {
  return (
    <div className="space-y-1">
      <div className={`font-semibold text-sm ${RARITY_TEXT_COLORS[instance.rarity] || 'text-[var(--text-primary)]'}`}>
        {instance.name}
        {isTwoHanded && (
          <Badge
            variant="outline"
            className="ml-2 text-xs border-[var(--mana-light)] text-[var(--mana-light)]"
          >
            2-Handed
          </Badge>
        )}
      </div>
      <div className="text-xs text-[var(--text-secondary)]">
        Enchantments: {instance.enchantments.length}/{instance.totalCapacity}
      </div>
      {instance.enchantments.length > 0 && (
        <EnchantmentsDisplay enchantments={instance.enchantments} compact={isCompact} />
      )}
    </div>
  );
}

interface EnchantmentsDisplayProps {
  enchantments: Array<{ effectId: string; stacks: number }>;
  compact?: boolean;
}

function EnchantmentsDisplay({ enchantments, compact = false }: EnchantmentsDisplayProps) {
  return (
    <div className={`flex flex-wrap gap-1 ${compact ? 'mt-1' : ''}`}>
      {enchantments.map((ench, i) => {
        const effect = ENCHANTMENT_EFFECTS[ench.effectId];
        return (
          <TooltipProvider key={i}>
            <Tooltip>
              <TooltipTrigger asChild>
                <Badge
                  variant="outline"
                  className="text-xs cursor-help border-[var(--border-default)] text-[var(--text-secondary)]"
                >
                  {effect?.name || ench.effectId}
                  {ench.stacks > 1 && ` x${ench.stacks}`}
                </Badge>
              </TooltipTrigger>
              <TooltipContent className="bg-[var(--bg-elevated)] border-[var(--border-default)] text-[var(--text-primary)]">
                <p>{effect?.description || 'Unknown effect'}</p>
                <p className="text-[var(--text-muted)] text-xs">
                  Category: {effect?.category || 'unknown'}
                </p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        );
      })}
    </div>
  );
}