import { useState, type CSSProperties } from 'react';
import type { EquipmentItem } from '../game/types';
import { RARITY_COLORS, RARITY_GLOW } from '../shared/constants';

/** Ordered slot definitions for display */
const SLOT_DEFS: Array<{ key: string; icon: string; label: string }> = [
  { key: 'main_hand', icon: '\u2694\uFE0F', label: 'Weapon' },
  { key: 'chest', icon: '\uD83D\uDEE1\uFE0F', label: 'Chest' },
  { key: 'head', icon: '\u26D1\uFE0F', label: 'Head' },
  { key: 'feet', icon: '\uD83D\uDC62', label: 'Feet' },
  { key: 'neck', icon: '\uD83D\uDCBF', label: 'Neck' },
  { key: 'hands', icon: '\uD83D\uDC42', label: 'Hands' },
  { key: 'legs', icon: '\uD83D\uDC62', label: 'Legs' },
  { key: 'cloak', icon: '\uD83D\uDEE1\uFE0F', label: 'Cloak' },
  { key: 'finger', icon: '\uD83D\uDCBF', label: 'Finger' },
  { key: 'wrist', icon: '\uD83D\uDC42', label: 'Wrist' },
];

function rarityColor(rarity: string): string {
  return RARITY_COLORS[rarity.toLowerCase()] ?? '#9d9d9d';
}

function rarityGlow(rarity: string): string {
  return RARITY_GLOW[rarity.toLowerCase()] ?? 'none';
}

function statLabel(statType: string): string {
  switch (statType) {
    case 'attack': return 'ATK';
    case 'defense': return 'DEF';
    case 'speed': return 'SPD';
    default: return 'STAT';
  }
}

const wrapStyle: CSSProperties = {
  marginTop: 6,
  borderRadius: 8,
  backgroundColor: 'rgba(0,0,0,0.45)',
  border: '1px solid rgba(255,255,255,0.12)',
  overflow: 'hidden',
  flex: 1,
  minWidth: 0,
};

const headerStyle: CSSProperties = {
  width: '100%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  padding: '6px 10px',
  fontSize: 12,
  fontWeight: 700,
  color: '#e8e8e8',
  cursor: 'pointer',
  userSelect: 'none',
  WebkitTapHighlightColor: 'transparent',
  background: 'rgba(255,255,255,0.04)',
  border: 'none',
  fontFamily: 'inherit',
};

const bodyStyle: CSSProperties = {
  padding: '8px 10px 10px',
  fontSize: 11,
  color: '#ccc',
};

const slotRow: CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  padding: '4px 0',
  borderBottom: '1px solid rgba(255,255,255,0.06)',
};

const slotLeftStyle: CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  gap: 6,
  minWidth: 0,
  overflow: 'hidden',
};

const slotIconStyle: CSSProperties = {
  fontSize: 13,
  flexShrink: 0,
  width: 18,
  textAlign: 'center',
};

const emptyLabelStyle: CSSProperties = {
  color: '#555',
  fontStyle: 'italic',
  fontSize: 10,
};

const itemNameStyle: CSSProperties = {
  fontWeight: 600,
  fontSize: 11,
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
};

const statValStyle: CSSProperties = {
  fontSize: 10,
  color: '#999',
  flexShrink: 0,
  textAlign: 'right',
  marginLeft: 8,
};

interface EquipmentPanelProps {
  equipment: Record<string, EquipmentItem>;
}

export function EquipmentPanel({ equipment }: EquipmentPanelProps) {
  const [open, setOpen] = useState(false);

  const equippedCount = equipment ? Object.keys(equipment).length : 0;

  return (
    <div style={wrapStyle}>
      <button
        type="button"
        style={headerStyle}
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
      >
        <span>Equipment ({equippedCount})</span>
        <span style={{ opacity: 0.7, fontSize: 11 }}>{open ? '\u25BC' : '\u25B6'}</span>
      </button>
      {open && (
        <div style={bodyStyle}>
          {SLOT_DEFS.map((def) => {
            const item = equipment?.[def.key];
            if (!item) {
              return (
                <div key={def.key} style={slotRow}>
                  <div style={slotLeftStyle}>
                    <span style={slotIconStyle}>{def.icon}</span>
                    <span style={emptyLabelStyle}>{def.label}</span>
                  </div>
                  <span style={{ ...statValStyle, color: '#444' }}>Empty</span>
                </div>
              );
            }

            const color = rarityColor(item.rarity);
            const glow = rarityGlow(item.rarity);

            return (
              <div
                key={def.key}
                style={{
                  ...slotRow,
                  borderBottomColor: `${color}22`,
                  boxShadow: glow !== 'none' ? `inset 0 -1px 4px ${color}15` : undefined,
                }}
              >
                <div style={slotLeftStyle}>
                  <span style={slotIconStyle}>{def.icon}</span>
                  <span style={{ ...itemNameStyle, color }}>{item.name}</span>
                </div>
                <span style={statValStyle}>
                  {statLabel(item.statType)} {item.primaryStat}
                  {' \u00B7 '}ilvl {item.ilvl}
                </span>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}
