function CharacterSheet({ character, onClose }) {
  if (!character) return null;

  const stats = character.stats || { str: 10, int: 10, dex: 10, con: 10, wis: 10, cha: 10 };
  const maxHp = character.maxHp || 100;
  const maxMp = character.maxMp || 50;
  const hpPercent = ((character.hp || maxHp) / maxHp) * 100;
  const mpPercent = ((character.mp || maxMp) / maxMp) * 100;

  const getStatColor = (value) => {
    if (value >= 15) return '#4caf50';
    if (value >= 10) return '#ffd700';
    return '#ff6b6b';
  };

  const StatBox = ({ label, value, icon }) => (
    <div className="stat-box">
      <span className="stat-icon">{icon}</span>
      <span className="stat-label">{label}</span>
      <span className="stat-value" style={{ color: getStatColor(value) }}>{value}</span>
    </div>
  );

  return (
    <div className="character-sheet-overlay" onClick={onClose}>
      <div className="character-sheet" onClick={(e) => e.stopPropagation()}>
        <div className="sheet-header">
          <div className="sheet-title">
            <span className="title-icon">👤</span>
            <h2>Character Sheet</h2>
          </div>
          <button className="close-btn" onClick={onClose}>✕</button>
        </div>

        <div className="character-info">
          <div className="character-portrait">
            <span className="portrait-icon">{character.classIcon || '🌟'}</span>
            <div className="portrait-frame" />
          </div>
          <div className="character-details">
            <h3 className="char-name">{character.name}</h3>
            <p className="char-class">{character.class || 'Reincarnated Soul'}</p>
            <p className="char-level">Level {character.level || 1}</p>
            {character.xp !== undefined && (
              <div className="xp-bar-container">
                <div className="xp-bar" style={{ width: `${Math.min(100, (character.xp / character.xpToLevel) * 100)}%` }} />
                <span className="xp-text">{character.xp} / {character.xpToLevel} XP</span>
              </div>
            )}
          </div>
        </div>

        <div className="vitals-section">
          <div className="vital-bar">
            <div className="vital-label"><span className="vital-icon">❤️</span> Health</div>
            <div className="vital-bar-bg">
              <div className="vital-bar-fill hp-fill" style={{ width: `${hpPercent}%` }} />
            </div>
            <span className="vital-value">{character.hp || maxHp} / {maxHp}</span>
          </div>

          <div className="vital-bar">
            <div className="vital-label"><span className="vital-icon">💎</span> Mana</div>
            <div className="vital-bar-bg">
              <div className="vital-bar-fill mp-fill" style={{ width: `${mpPercent}%` }} />
            </div>
            <span className="vital-value">{character.mp || maxMp} / {maxMp}</span>
          </div>
        </div>

        {character.statusEffects && character.statusEffects.length > 0 && (
          <div className="status-section">
            <h4 className="section-subtitle"><span className="section-icon">✨</span> Status Effects</h4>
            <div className="status-effects">
              {character.statusEffects.map((effect, idx) => (
                <div key={idx} className={`status-effect ${effect.type || 'neutral'}`}>
                  <span className="effect-icon">{effect.icon || '⭐'}</span>
                  <span className="effect-name">{effect.name}</span>
                  {effect.duration && <span className="effect-duration">{effect.duration} turns</span>}
                </div>
              ))}
            </div>
          </div>
        )}

        {character.blessing && (
          <div className="blessing-section">
            <h4 className="section-subtitle"><span className="section-icon">✨</span> Divine Blessing</h4>
            <div className="blessing-display">
              <span className="blessing-icon-large">{character.blessing.icon}</span>
              <div>
                <strong>{character.blessing.name}</strong>
                <p>{character.blessing.description}</p>
              </div>
            </div>
          </div>
        )}

        {character.prophecy && (
          <div className="prophecy-section">
            <h4 className="section-subtitle"><span className="section-icon">🔮</span> Your Prophecy</h4>
            <div className="prophecy-display-small">
              <em>"{character.prophecy}"</em>
            </div>
          </div>
        )}

        <div className="attributes-section">
          <h4 className="section-subtitle"><span className="section-icon">📊</span> Attributes</h4>
          <div className="stats-grid">
            <StatBox label="Strength" value={stats.str || 10} icon="💪" />
            <StatBox label="Intelligence" value={stats.int || 10} icon="🧠" />
            <StatBox label="Dexterity" value={stats.dex || 10} icon="🎯" />
            <StatBox label="Constitution" value={stats.con || 10} icon="🛡️" />
            <StatBox label="Wisdom" value={stats.wis || 10} icon="📖" />
            <StatBox label="Charisma" value={stats.cha || 10} icon="💬" />
          </div>
        </div>

        {character.inventory && character.inventory.length > 0 && (
          <div className="inventory-section">
            <h4 className="section-subtitle"><span className="section-icon">🎒</span> Equipment</h4>
            <div className="equipment-slots">
              {character.inventory.slice(0, 6).map((item, idx) => (
                <div key={idx} className="equip-slot" title={item.description}>
                  <span className="equip-icon">{item.icon || '📦'}</span>
                  <span className="equip-name">{item.name}</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default CharacterSheet;
