import React from "react";
import "./CraftModal.css";

const CraftModal = ({
  recipe,
  onClose,
  onStartCraft,
  activeCraft,
  getOwnedAmount,
}) => {
  if (!recipe) return null;

  const isBusy = !!activeCraft;
  const outputQty = Object.values(recipe.output || {})[0] || 1;
  const canAfford = recipe.ingredients?.every(
    (ing) => getOwnedAmount(ing.itemId) >= ing.quantity,
  );

  return (
    <div className="craft-modal-overlay" onClick={onClose}>
      <div className="craft-modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h3>
            <i className="fas fa-tools"></i> Construction: {recipe.displayName}
          </h3>
          <button className="close-x" onClick={onClose}>
            &times;
          </button>
        </div>

        <div className="modal-body">
          <div className="requirements-section">
            <h4>
              <i className="fas fa-list-ul"></i> Required Resources
            </h4>
            <div className="res-grid">
              {recipe.ingredients?.map((ing) => {
                const owned = getOwnedAmount(ing.itemId);
                const hasEnough = owned >= ing.quantity;

                return (
                  <div
                    key={ing.itemId}
                    className={`res-item ${hasEnough ? "enough" : "not-enough"}`}
                  >
                    <div className="res-main-info">
                      <i
                        className={`fas fa-cube ${hasEnough ? "icon-green" : "icon-red"}`}
                      ></i>
                      <span className="res-name">{ing.displayName}</span>
                    </div>
                    <div className="res-quantity-info">
                      <span
                        className={`owned-val ${hasEnough ? "val-green" : "val-red"}`}
                      >
                        {owned}
                      </span>
                      <span className="required-val"> / {ing.quantity}</span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          <div className="outcome-section">
            <h4>
              <i className="fas fa-box-open"></i> Outcome
            </h4>
            <div className="outcome-info">
              <div className="outcome-row">
                <span>Result:</span>
                <strong>
                  {recipe.displayName} x{outputQty}
                </strong>
              </div>
              <div className="outcome-row">
                <span>Time:</span>
                <strong>{recipe.time_seconds}s</strong>
              </div>
            </div>
          </div>
        </div>

        <div className="modal-footer">
          {activeCraft && activeCraft.recipeId === recipe.id ? (
            <div className="modal-progress-container">
              <div className="progress-text">
                Processing... {activeCraft.timeLeft}s
              </div>
              <div className="progress-bar-bg">
                <div
                  className="progress-bar-fill"
                  style={{
                    width: `${((activeCraft.totalTime - activeCraft.timeLeft) / activeCraft.totalTime) * 100}%`,
                  }}
                ></div>
              </div>
            </div>
          ) : (
            <>
              <button
                className={`btn-start-craft ${!canAfford || isBusy ? "disabled" : ""}`}
                onClick={() => canAfford && !isBusy && onStartCraft(recipe)}
                disabled={!canAfford || isBusy}
              >
                {isBusy
                  ? "System Busy..."
                  : !canAfford
                    ? "Insufficient Resources"
                    : `Start Construction (${recipe.time_seconds}s)`}
              </button>
              <button className="btn-cancel" onClick={onClose}>
                Close
              </button>
            </>
          )}
        </div>
      </div>
    </div>
  );
};

export default CraftModal;
