import placeholderImage from "../assets/placeholder.svg";

function RecipeDetails({ recipe, onEditClick, onDeleteClick, onShowDeleteModal, isAuthenticated, currentUser }) {
  if (!recipe) {
    return (
      <section className="panel placeholder">
        <p>עדיין לא נבחר מתכון. בחר מתכון מהרשימה או צור מתכון חדש.</p>
      </section>
    );
  }

  const handleDelete = () => {
    onShowDeleteModal(recipe.id, recipe.name);
  };

  // Debug ownership check
  console.log('Recipe ownership check:', {
    recipeUserId: recipe.user_id,
    recipeUserIdType: typeof recipe.user_id,
    currentUserId: currentUser?.id,
    currentUserIdType: typeof currentUser?.id,
    isEqual: recipe.user_id === currentUser?.id
  });

  return (
    <section className="panel recipe-card">
      {/* Recipe Image */}
      <div className="recipe-image-container">
        <img src={recipe.image || placeholderImage} alt={recipe.name} className="recipe-image" />
      </div>

      <header className="recipe-header">
        <div>
          <h2>{recipe.name}</h2>
          <p className="recipe-subtitle">
            {translateMealType(recipe.meal_type)} · {recipe.time_minutes} דקות הכנה
          </p>
          {recipe.made_by && (
            <h4 className="recipe-made-by">המתכון של: {recipe.made_by}</h4>
          )}
        </div>
        <div className="pill-row">
          <span className="pill">⏱ {recipe.time_minutes} דק׳</span>
          <span className="pill">🍽 {translateMealType(recipe.meal_type)}</span>
        </div>
      </header>

      <div className="recipe-body">
        <div className="recipe-column">
          <h3>מצרכים</h3>
          <ul>
            {recipe.ingredients.map((ing, idx) => (
              <li key={idx}>{ing}</li>
            ))}
          </ul>
        </div>

        <div className="recipe-column">
          <h3>שלבים</h3>
          <ol>
            {recipe.steps.map((step, idx) => (
              <li key={idx}>{step}</li>
            ))}
          </ol>
        </div>
      </div>

      {recipe.tags && recipe.tags.length > 0 && (
        <footer className="tags">
          {recipe.tags.map((tag, idx) => (
            <span key={idx} className="tag">
              #{tag}
            </span>
          ))}
        </footer>
      )}

      {isAuthenticated && currentUser && Number(recipe.user_id) === Number(currentUser.id) && (
        <div className="recipe-actions">
          <button className="btn ghost small" onClick={() => onEditClick(recipe)}>
            ✏️ ערוך
          </button>
          <button className="btn ghost small" onClick={handleDelete}>
            🗑 מחק
          </button>
        </div>
      )}
    </section>
  );
}

function translateMealType(type) {
  switch (type) {
    case "breakfast":
      return "בוקר";
    case "lunch":
      return "צהריים";
    case "dinner":
      return "ערב";
    case "snack":
      return "קינוחים";
    default:
      return type;
  }
}

export default RecipeDetails;