'use client';

import { Package, Trash2 } from 'lucide-react';
import type { EquipmentInstance } from '@/lib/game/types';
import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
import { CATEGORY_ICONS } from './icons';
import { RARITY_CSS_VAR, RARITY_GLOW_CSS_VAR } from './types';
import { ActionButton } from '@/components/ui/action-button';

interface EquipmentItemProps {
  instanceId: string;
  instance: EquipmentInstance;
  onDelete?: (instanceId: string) => void;
}

export function EquipmentItem({ instanceId, instance, onDelete }: EquipmentItemProps) {
  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)';
  const rarityGlow = RARITY_GLOW_CSS_VAR[instance.rarity] || 'var(--rarity-common-glow)';
  
  return (
    <div
      className="p-2 rounded border bg-[var(--bg-sunken)] group"
      style={{
        borderColor: rarityColor,
        backgroundColor: rarityGlow,
      }}
    >
      <div className="flex items-start justify-between">
        <div className="flex items-start gap-2">
          <Icon className="w-4 h-4 mt-0.5" style={{ color: rarityColor }} />
          <div>
            <div className="text-xs font-semibold" style={{ color: rarityColor }}>
              {instance.name}
            </div>
            <div className="text-xs text-[var(--text-secondary)]">
              {type?.name} • {instance.usedCapacity}/{instance.totalCapacity} cap
            </div>
            <div className="text-xs text-[var(--text-muted)] capitalize">
              {instance.rarity} • {instance.enchantments.length} enchants
            </div>
          </div>
        </div>
        {onDelete && (
          <ActionButton
            variant="ghost"
            size="sm"
            className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100 text-[var(--color-danger)] hover:text-[var(--interactive-danger-hover)] hover:bg-[var(--interactive-danger)]/20"
            onClick={() => onDelete(instanceId)}
            aria-label={`Delete ${instance.name}`}
          >
            <Trash2 className="w-3 h-3" />
          </ActionButton>
        )}
      </div>
    </div>
  );
}

interface EquipmentSectionProps {
  equipment: [string, EquipmentInstance][];
  onDeleteEquipment?: (instanceId: string) => void;
}

export function EquipmentSection({ equipment, onDeleteEquipment }: EquipmentSectionProps) {
  if (equipment.length === 0) return null;
  
  return (
    <div>
      <div className="text-xs text-[var(--text-muted)] mb-2 flex items-center gap-1">
        <Package className="w-3 h-3" />
        Equipment
      </div>
      <div className="space-y-2">
        {equipment.map(([id, instance]) => (
          <EquipmentItem
            key={id}
            instanceId={id}
            instance={instance}
            onDelete={onDeleteEquipment}
          />
        ))}
      </div>
    </div>
  );
}
