import React from "react";
import GameDataManager from "../../../../services/GameDataManager.js";
import { getServerUrl } from "../../../../config/api.js";
import "./DungeonFinish.css";
const DungeonFinish = ({ rewards, onExit }) => {
  const CONNECT_URL = getServerUrl();
  const ASSET_BASE_URL = `${CONNECT_URL}/static/`;

  const getFullTextureUrl = (path) => {
    if (!path) return "/assets/no-image.png";
    if (path.startsWith("http")) return path;
    return `${ASSET_BASE_URL}${path}`;
  };

  return (
    <div className="dungeon-summary-overlay">
      <div className="summary-card">
        <div className="summary-header">
          <div className="glitch-wrapper">
            <h2 className="summary-title" data-text="MISSION_ACCOMPLISHED">
              MISSION_ACCOMPLISHED
            </h2>
          </div>
          <div className="summary-line"></div>
        </div>

        <div className="summary-body">
          <div className="reward-stats">
            <div className="stat-box">
              <span className="stat-label">EXPERIENCE_DATA</span>
              <span className="stat-value">+{rewards.xp || 0} XP</span>
            </div>
            <div className="stat-box">
              <span className="stat-label">CREDITS_TRANSFER</span>
              <span className="stat-value cyan-text">
                +{rewards.credits || 0} CR
              </span>
            </div>
          </div>

          <div className="loot-section">
            <h4 className="section-label">ASSETS_RECOVERED</h4>
            <div className="loot-grid">
              {rewards.items && rewards.items.length > 0 ? (
                rewards.items.map((item, idx) => {
                  const itemData = GameDataManager.getItem(item.id);
                  const textureUrl = getFullTextureUrl(itemData?.texture);

                  return (
                    <div key={idx} className="loot-item-slot">
                      <div className="loot-img-container">
                        <img src={textureUrl} />
                      </div>
                      <span className="loot-qty">x{item.count}</span>
                      <div className="loot-name-hint"></div>
                    </div>
                  );
                })
              ) : (
                <div className="no-loot-msg">NO_RESOURCES_FOUND</div>
              )}
            </div>
          </div>
        </div>

        <button className="summary-btn" onClick={onExit}>
          CONFIRM & RETURN TO BASE
        </button>
      </div>
    </div>
  );
};

export default DungeonFinish;