import { useEffect, useState } from "react";
import "../../styles/ConfirmBuyModal.css";

export default function ConfirmBuyModal({
  item,
  onConfirm,
  onCancel,
  allItems = [],
  onNavigate
}) {
  const [quantity, setQuantity] = useState(item.quantity);
  const maxQuantity = item.quantity;

  // Update quantity when item changes (navigation)
  useEffect(() => {
    setQuantity(item.quantity);
  }, [item.id, item.quantity]);

  // Find current index and check for prev/next
  const currentIndex = allItems.findIndex(i => i.id === item.id);
  const hasPrev = currentIndex > 0;
  const hasNext = currentIndex < allItems.length - 1;

  const handleIncrement = () => {
    if (quantity < maxQuantity) {
      setQuantity(prev => prev + 1);
    }
  };

  const handleDecrement = () => {
    if (quantity > 1) {
      setQuantity(prev => prev - 1);
    }
  };

  const handleConfirm = () => {
    onConfirm(quantity);
  };

  const handlePrev = () => {
    if (hasPrev && onNavigate) {
      const prevItem = allItems[currentIndex - 1];
      onNavigate(prevItem);
    }
  };

  const handleNext = () => {
    if (hasNext && onNavigate) {
      const nextItem = allItems[currentIndex + 1];
      onNavigate(nextItem);
    }
  };

  const imageUrl = item.item_image && item.image_mime_type
    ? `data:${item.image_mime_type};base64,${item.item_image}`
    : null;

  return (
    <div className="confirm-buy-modal-overlay" onClick={onCancel}>
      <div className="confirm-buy-modal" onClick={(e) => e.stopPropagation()}>
        <div className="confirm-buy-header">
          {item.zone && <div className="confirm-buy-zone">{item.zone}</div>}
          <h2 className="confirm-buy-item-name">{item.item_name}</h2>
        </div>

        <div className="confirm-buy-image-section">
          <button
            className="confirm-buy-nav-btn confirm-buy-nav-prev"
            onClick={handlePrev}
            style={{ visibility: hasPrev ? 'visible' : 'hidden' }}
            disabled={!hasPrev}
          >
            ‹
          </button>

          <div className="confirm-buy-image-container">
            {imageUrl ? (
              <img src={imageUrl} alt={item.item_name} className="confirm-buy-image" />
            ) : (
              <div className="confirm-buy-image-placeholder">📦</div>
            )}
          </div>

          <button
            className="confirm-buy-nav-btn confirm-buy-nav-next"
            onClick={handleNext}
            style={{ visibility: hasNext ? 'visible' : 'hidden' }}
            disabled={!hasNext}
          >
            ›
          </button>
        </div>

        <div className="confirm-buy-quantity-section">
          <div className="confirm-buy-counter">
            <button
              onClick={handleDecrement}
              className="confirm-buy-counter-btn"
              disabled={quantity <= 1}
            >
              −
            </button>
            <input
              type="number"
              value={quantity}
              readOnly
              className="confirm-buy-counter-display"
            />
            <button
              onClick={handleIncrement}
              className="confirm-buy-counter-btn"
              disabled={quantity >= maxQuantity}
            >
              +
            </button>
          </div>
        </div>

        <div className="confirm-buy-actions">
          <button onClick={onCancel} className="confirm-buy-cancel">
            Cancel
          </button>
          <button onClick={handleConfirm} className="confirm-buy-confirm">
            Mark as Bought
          </button>
        </div>
      </div>
    </div>
  );
}