'use client';

import { DebugName } from '@/components/game/debug/debug-context';
import { computeEquipmentEffects } from '@/lib/game/effects';
import type { EquipmentInstance } from '@/lib/game/types';

interface EquipmentEffectsSummaryProps {
  equipmentInstances: Record<string, EquipmentInstance>;
  equippedInstances: Record<string, string | null>;
}

const BONUS_LABELS: Record<string, string> = {
  maxMana: 'Max Mana',
  regen: 'Mana Regen',
  clickMana: 'Click Mana',
  baseDamage: 'Base Damage',
  elementCap: 'Element Cap',
  critChance: 'Crit Chance',
  attackSpeed: 'Attack Speed',
  meditationEfficiency: 'Meditation Efficiency',
  studySpeed: 'Study Speed',
};

const MULT_LABELS: Record<string, string> = {
  maxMana: 'Max Mana',
  regen: 'Mana Regen',
  clickMana: 'Click Mana',
  baseDamage: 'Base Damage',
  attackSpeed: 'Attack Speed',
  elementCap: 'Element Cap',
  meditationEfficiency: 'Meditation Efficiency',
  studySpeed: 'Study Speed',
};

export function EquipmentEffectsSummary({ equipmentInstances, equippedInstances }: EquipmentEffectsSummaryProps) {
  const { bonuses, multipliers, specials } = computeEquipmentEffects(equipmentInstances, equippedInstances);

  const bonusEntries = Object.entries(bonuses).filter(([, v]) => v !== 0);
  const multEntries = Object.entries(multipliers).filter(([, v]) => v !== 1);
  const specialEntries = Array.from(specials);

  if (bonusEntries.length === 0 && multEntries.length === 0 && specialEntries.length === 0) {
    return null;
  }

  return (
    <DebugName name="EquipmentEffectsSummary">
    <div className="p-3 rounded border border-[var(--border-default)] bg-[var(--bg-sunken)] space-y-2">
      <h3 className="text-sm font-semibold text-[var(--text-primary)]">Equipment Effects</h3>

      {bonusEntries.length > 0 && (
        <div className="space-y-1">
          <div className="text-xs text-[var(--text-muted)]">Bonuses</div>
          {bonusEntries.map(([key, value]) => (
            <div key={key} className="flex justify-between text-xs">
              <span className="text-[var(--text-secondary)]">
                {BONUS_LABELS[key] || key}
              </span>
              <span className="text-[var(--color-success)]">
                {value > 0 ? '+' : ''}{typeof value === 'number' && !Number.isInteger(value) ? value.toFixed(2) : value}
              </span>
            </div>
          ))}
        </div>
      )}

      {multEntries.length > 0 && (
        <div className="space-y-1">
          <div className="text-xs text-[var(--text-muted)]">Multipliers</div>
          {multEntries.map(([key, value]) => (
            <div key={key} className="flex justify-between text-xs">
              <span className="text-[var(--text-secondary)]">
                {MULT_LABELS[key] || key}
              </span>
              <span className="text-[var(--color-info)]">
                ×{typeof value === 'number' ? value.toFixed(2) : value}
              </span>
            </div>
          ))}
        </div>
      )}

      {specialEntries.length > 0 && (
        <div className="space-y-1">
          <div className="text-xs text-[var(--text-muted)]">Specials</div>
          {specialEntries.map((id) => (
            <div key={id} className="text-xs text-[var(--color-warning)]">
              ★ {id}
            </div>
          ))}
        </div>
      )}
    </div>
    </DebugName>
  );
}
