API/client/src/views/GameInterface/tabs/components/DatapackDetailsModal.jsx

import React from "react";
import GameDataManager from "../../../../services/GameDataManager";
import { config } from "../../../../config/api";
import "./DatapackDetailsModal.css";

const DatapackDetailsModal = ({ data, onClose }) => {
  if (!data) return null;

  const renderStats = () => {
    if (!data.stats) return null;
    return (
      <div className="details-stats">
        {Object.entries(data.stats).map(([key, value]) => (
          <div key={key} className="stat-row">
            <span className="stat-label">
              {GameDataManager.getStatName(key) || key}:
            </span>
            <span className="stat-value">{value}</span>
          </div>
        ))}
      </div>
    );
  };

  const renderLoot = () => {
    if (!data.loot || data.loot.length === 0) return null;

    return (
      <div className="details-section">
        <h4>Loot Table</h4>
        <div className="loot-list-full">
          {data.loot.map((entry, idx) => {
            const itemInfo = GameDataManager.getItem(entry.id);
            const countDisplay =
              typeof entry.count === "object"
                ? `${entry.count.min}-${entry.count.max}`
                : entry.count;

            return (
              <div key={idx} className="loot-detail-item">
                <div className="loot-item-icon">
                  {itemInfo?.texture ? (
                    <img
                      src={`${config.serverUrl}/static/${itemInfo.texture}`}
                      alt={itemInfo.displayName}
                    />
                  ) : (
                    <div className="fallback-mini">?</div>
                  )}
                </div>
                <div className="loot-item-info">
                  <span className="loot-item-name">
                    {itemInfo?.displayName || entry.id}
                  </span>
                  <span className="loot-item-meta">
                    {Math.round(entry.chance * 100)}% chance • Amount:{" "}
                    {countDisplay}
                  </span>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div
        className="datapack-modal-content"
        onClick={(e) => e.stopPropagation()}
      >
        <button className="modal-close" onClick={onClose}>
          &times;
        </button>

        <div className="modal-header">
          <div className="modal-icon-big">
            {data.texture ? (
              <img src={`${config.serverUrl}/static/${data.texture}`} alt="" />
            ) : (
              <div className="fallback-icon">{data.displayName?.[0]}</div>
            )}
          </div>
          <div className="modal-title-group">
            <h3>{data.displayName}</h3>
            <code className="modal-raw-id">{data.id}</code>
          </div>
        </div>

        <div className="modal-body">
          {data.description && (
            <p className="details-description">{data.description}</p>
          )}

          <div className="details-section">
            <h4>Properties & Stats</h4>
            {renderStats()}

            {data.sectionType === "hostiles" && data.level && (
              <div className="stat-row">
                <span className="stat-label">Base Level:</span>
                <span className="stat-value">{data.level}</span>
              </div>
            )}
          </div>

          {data.sectionType === "hostiles" && renderLoot()}

          {data.ingredients && (
            <div className="details-section">
              <h4>Recipe Requirements</h4>
              <div className="ingredients-list">
                {data.ingredients.map((ing, idx) => (
                  <div key={idx} className="ingredient-item">
                    <span>{ing.displayName}</span>
                    <span>x{ing.quantity}</span>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default DatapackDetailsModal;