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

/**
 * Grid layout (row-major):
 *   finger | head | neck
 *   weapon | chest (2 rows) | cloak
 *   hands  |   ↑   | wrist
 *   feet   |   .   | legs
 */
const SLOT_LAYOUT: Array<{
  key: string;
  icon: string;
  labelKey: keyof Translations;
  area: 'finger' | 'head' | 'neck' | 'weapon' | 'chest' | 'cloak' | 'hands' | 'wrist' | 'feet' | 'legs';
}> = [
  { key: 'finger', icon: '\uD83D\uDCBF', labelKey: 'slotRing', area: 'finger' },
  { key: 'head', icon: '\u26D1\uFE0F', labelKey: 'slotHead', area: 'head' },
  { key: 'neck', icon: '\uD83D\uDCBF', labelKey: 'slotNeck', area: 'neck' },
  { key: 'main_hand', icon: '\u2694\uFE0F', labelKey: 'slotWeapon', area: 'weapon' },
  { key: 'chest', icon: '\uD83D\uDEE1\uFE0F', labelKey: 'slotChest', area: 'chest' },
  { key: 'cloak', icon: '\uD83D\uDEE1\uFE0F', labelKey: 'slotCloak', area: 'cloak' },
  { key: 'hands', icon: '\uD83D\uDC42', labelKey: 'slotHands', area: 'hands' },
  { key: 'wrist', icon: '\uD83D\uDC42', labelKey: 'slotWrist', area: 'wrist' },
  { key: 'feet', icon: '\uD83D\uDC62', labelKey: 'slotFeet', area: 'feet' },
  { key: 'legs', icon: '\uD83D\uDC62', labelKey: 'slotLegs', area: 'legs' },
];

const dollWrap: CSSProperties = {
  display: 'grid',
  gridTemplateAreas: `
    "finger head neck"
    "weapon chest cloak"
    "hands chest wrist"
    "feet . legs"
  `,
  gridTemplateColumns: 'minmax(72px, 1fr) minmax(100px, 1.2fr) minmax(72px, 1fr)',
  gap: 6,
  alignItems: 'stretch',
  justifyItems: 'center',
  padding: '8px 4px',
  minHeight: 300,
};

const chestBackdrop: CSSProperties = {
  gridArea: 'chest',
  width: '100%',
  maxWidth: 132,
  minHeight: 120,
  borderRadius: '45% 45% 40% 40% / 55% 55% 45% 45%',
  background: 'linear-gradient(180deg, rgba(70,80,110,0.4) 0%, rgba(35,40,55,0.55) 100%)',
  border: '1px solid rgba(255,255,255,0.1)',
  boxShadow: 'inset 0 -24px 48px rgba(0,0,0,0.4)',
  zIndex: 0,
  pointerEvents: 'none',
  alignSelf: 'stretch',
  justifySelf: 'center',
};

const slotBox: CSSProperties = {
  width: '100%',
  minWidth: 0,
  maxWidth: 96,
  borderRadius: 6,
  border: '1px solid rgba(255,255,255,0.14)',
  backgroundColor: 'rgba(0,0,0,0.42)',
  padding: '6px 6px',
  fontSize: 10,
  color: '#bbb',
  textAlign: 'center',
  zIndex: 1,
  position: 'relative',
};

const slotLabel: CSSProperties = {
  fontSize: 9,
  fontWeight: 600,
  color: 'rgba(200,210,230,0.55)',
  marginBottom: 4,
  textTransform: 'uppercase',
  letterSpacing: 0.3,
};

const iconRow: CSSProperties = {
  fontSize: 14,
  marginBottom: 2,
};

const itemNameStyle: CSSProperties = {
  fontWeight: 600,
  fontSize: 10,
  lineHeight: 1.25,
  wordBreak: 'break-word',
};

const statTiny: CSSProperties = {
  fontSize: 9,
  color: '#888',
  marginTop: 2,
};

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, tr: Translations): string {
  switch (statType) {
    case 'attack': return tr.atk;
    case 'defense': return tr.def;
    case 'speed': return tr.spd;
    default: return tr.stat;
  }
}

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

export function EquipmentPaperDoll({ equipment }: EquipmentPaperDollProps) {
  const tr = useT();
  return (
    <div style={dollWrap}>
      <div style={chestBackdrop} aria-hidden />

      {SLOT_LAYOUT.map((def) => {
        const item = equipment?.[def.key];
        const gridArea = def.area;

        if (!item) {
          return (
            <div key={def.key} style={{ ...slotBox, gridArea }}>
              <div style={slotLabel}>{tr[def.labelKey]}</div>
              <div style={iconRow}>{def.icon}</div>
              <div style={{ color: '#555', fontStyle: 'italic', fontSize: 9 }}>{tr.empty}</div>
            </div>
          );
        }

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

        return (
          <div
            key={def.key}
            style={{
              ...slotBox,
              gridArea,
              borderColor: `${color}55`,
              boxShadow:
                glow !== 'none'
                  ? `0 0 10px ${color}33, inset 0 0 8px ${color}18`
                  : `inset 0 0 6px ${color}15`,
            }}
          >
            <div style={slotLabel}>{tr[def.labelKey]}</div>
            <div style={iconRow}>{def.icon}</div>
            <div style={{ ...itemNameStyle, color }}>{item.name}</div>
            <div style={statTiny}>
              {statLabel(item.statType, tr)} {item.primaryStat} · ilvl {item.ilvl}
            </div>
          </div>
        );
      })}
    </div>
  );
}
