import React, { useState, useCallback, useMemo } from 'react';
import { Card, Button, Badge, Input, Modal, Table, Select } from '../../ui';
import type { Recipe, RecipeIngredient, RecipeInstruction, NutritionalInfo, DifficultyLevel } from '../../../types/production.types';

interface RecipeDisplayProps {
  className?: string;
  recipe: Recipe;
  editable?: boolean;
  showNutrition?: boolean;
  showCosting?: boolean;
  onScaleChange?: (scaleFactor: number, scaledRecipe: Recipe) => void;
  onVersionUpdate?: (newVersion: Recipe) => void;
  onCostCalculation?: (totalCost: number, costPerUnit: number) => void;
}

interface ScaledIngredient extends RecipeIngredient {
  scaledQuantity: number;
  scaledCost?: number;
}

interface ScaledInstruction extends RecipeInstruction {
  scaledDuration?: number;
}

interface ScaledRecipe extends Omit<Recipe, 'ingredients' | 'instructions'> {
  scaledYieldQuantity: number;
  scaledTotalTime: number;
  ingredients: ScaledIngredient[];
  instructions: ScaledInstruction[];
  scaleFactor: number;
  estimatedTotalCost?: number;
  costPerScaledUnit?: number;
}

interface TimerState {
  instructionId: string;
  duration: number;
  remaining: number;
  isActive: boolean;
  isComplete: boolean;
}

const DIFFICULTY_COLORS = {
  [DifficultyLevel.BEGINNER]: 'bg-green-100 text-green-800',
  [DifficultyLevel.INTERMEDIATE]: 'bg-yellow-100 text-yellow-800',
  [DifficultyLevel.ADVANCED]: 'bg-orange-100 text-orange-800',
  [DifficultyLevel.EXPERT]: 'bg-red-100 text-red-800',
};

const DIFFICULTY_LABELS = {
  [DifficultyLevel.BEGINNER]: 'Principiante',
  [DifficultyLevel.INTERMEDIATE]: 'Intermedio',
  [DifficultyLevel.ADVANCED]: 'Avanzado',
  [DifficultyLevel.EXPERT]: 'Experto',
};

const ALLERGEN_ICONS: Record<string, string> = {
  gluten: '🌾',
  milk: '🥛',
  eggs: '🥚',
  nuts: '🥜',
  soy: '🫘',
  sesame: '🌰',
  fish: '🐟',
  shellfish: '🦐',
};

const EQUIPMENT_ICONS: Record<string, string> = {
  oven: '🔥',
  mixer: '🥄',
  scale: '⚖️',
  bowl: '🥣',
  whisk: '🔄',
  spatula: '🍴',
  thermometer: '🌡️',
  timer: '⏰',
};

export const RecipeDisplay: React.FC<RecipeDisplayProps> = ({
  className = '',
  recipe,
  editable = false,
  showNutrition = true,
  showCosting = false,
  onScaleChange,
  onVersionUpdate,
  onCostCalculation,
}) => {
  const [scaleFactor, setScaleFactor] = useState<number>(1);
  const [activeTimers, setActiveTimers] = useState<Record<string, TimerState>>({});
  const [isNutritionModalOpen, setIsNutritionModalOpen] = useState(false);
  const [isCostingModalOpen, setIsCostingModalOpen] = useState(false);
  const [isEquipmentModalOpen, setIsEquipmentModalOpen] = useState(false);
  const [selectedInstruction, setSelectedInstruction] = useState<RecipeInstruction | null>(null);
  const [showAllergensDetail, setShowAllergensDetail] = useState(false);

  // Mock ingredient costs for demonstration
  const ingredientCosts: Record<string, number> = {
    flour: 1.2, // €/kg
    water: 0.001, // €/l
    salt: 0.8, // €/kg
    yeast: 8.5, // €/kg
    sugar: 1.5, // €/kg
    butter: 6.2, // €/kg
    milk: 1.3, // €/l
    eggs: 0.25, // €/unit
  };

  const scaledRecipe = useMemo((): ScaledRecipe => {
    const scaledIngredients: ScaledIngredient[] = recipe.ingredients.map(ingredient => ({
      ...ingredient,
      scaledQuantity: ingredient.quantity * scaleFactor,
      scaledCost: ingredientCosts[ingredient.ingredient_id] 
        ? ingredientCosts[ingredient.ingredient_id] * ingredient.quantity * scaleFactor
        : undefined,
    }));

    const scaledInstructions: ScaledInstruction[] = recipe.instructions.map(instruction => ({
      ...instruction,
      scaledDuration: instruction.duration_minutes ? Math.ceil(instruction.duration_minutes * scaleFactor) : undefined,
    }));

    const estimatedTotalCost = scaledIngredients.reduce((total, ingredient) => 
      total + (ingredient.scaledCost || 0), 0
    );

    const scaledYieldQuantity = recipe.yield_quantity * scaleFactor;
    const costPerScaledUnit = scaledYieldQuantity > 0 ? estimatedTotalCost / scaledYieldQuantity : 0;

    return {
      ...recipe,
      scaledYieldQuantity,
      scaledTotalTime: Math.ceil(recipe.total_time_minutes * scaleFactor),
      ingredients: scaledIngredients,
      instructions: scaledInstructions,
      scaleFactor,
      estimatedTotalCost,
      costPerScaledUnit,
    };
  }, [recipe, scaleFactor, ingredientCosts]);

  const handleScaleChange = useCallback((newScaleFactor: number) => {
    setScaleFactor(newScaleFactor);
    if (onScaleChange) {
      onScaleChange(newScaleFactor, scaledRecipe as unknown as Recipe);
    }
  }, [scaledRecipe, onScaleChange]);

  const startTimer = (instruction: RecipeInstruction) => {
    if (!instruction.duration_minutes) return;

    const timerState: TimerState = {
      instructionId: instruction.step_number.toString(),
      duration: instruction.duration_minutes * 60, // Convert to seconds
      remaining: instruction.duration_minutes * 60,
      isActive: true,
      isComplete: false,
    };

    setActiveTimers(prev => ({
      ...prev,
      [instruction.step_number.toString()]: timerState,
    }));

    // Start countdown
    const interval = setInterval(() => {
      setActiveTimers(prev => {
        const current = prev[instruction.step_number.toString()];
        if (!current || current.remaining <= 0) {
          clearInterval(interval);
          return {
            ...prev,
            [instruction.step_number.toString()]: {
              ...current,
              remaining: 0,
              isActive: false,
              isComplete: true,
            }
          };
        }

        return {
          ...prev,
          [instruction.step_number.toString()]: {
            ...current,
            remaining: current.remaining - 1,
          }
        };
      });
    }, 1000);
  };

  const stopTimer = (instructionId: string) => {
    setActiveTimers(prev => ({
      ...prev,
      [instructionId]: {
        ...prev[instructionId],
        isActive: false,
      }
    }));
  };

  const formatTime = (seconds: number): string => {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;

    if (hours > 0) {
      return `${hours}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
    }
    return `${minutes}:${String(secs).padStart(2, '0')}`;
  };

  const renderScalingControls = () => (
    <Card className="p-4">
      <h3 className="font-semibold text-lg mb-4">Escalado de receta</h3>
      
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Factor de escala
          </label>
          <Input
            type="number"
            min="0.1"
            max="10"
            step="0.1"
            value={scaleFactor}
            onChange={(e) => handleScaleChange(parseFloat(e.target.value) || 1)}
            className="w-full"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Cantidad original
          </label>
          <p className="text-lg font-semibold text-gray-900">
            {recipe.yield_quantity} {recipe.yield_unit}
          </p>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Cantidad escalada
          </label>
          <p className="text-lg font-semibold text-blue-600">
            {scaledRecipe.scaledYieldQuantity} {recipe.yield_unit}
          </p>
        </div>
      </div>

      <div className="flex gap-2 mt-4">
        <Button
          variant="outline"
          size="sm"
          onClick={() => handleScaleChange(0.5)}
          className={scaleFactor === 0.5 ? 'bg-blue-50 border-blue-300' : ''}
        >
          1/2
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => handleScaleChange(1)}
          className={scaleFactor === 1 ? 'bg-blue-50 border-blue-300' : ''}
        >
          1x
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => handleScaleChange(2)}
          className={scaleFactor === 2 ? 'bg-blue-50 border-blue-300' : ''}
        >
          2x
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => handleScaleChange(3)}
          className={scaleFactor === 3 ? 'bg-blue-50 border-blue-300' : ''}
        >
          3x
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => handleScaleChange(5)}
          className={scaleFactor === 5 ? 'bg-blue-50 border-blue-300' : ''}
        >
          5x
        </Button>
      </div>

      {scaleFactor !== 1 && (
        <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
          <p className="text-sm text-blue-800">
            <span className="font-medium">Tiempo total escalado:</span> {Math.ceil(scaledRecipe.scaledTotalTime / 60)}h {scaledRecipe.scaledTotalTime % 60}m
          </p>
          {showCosting && scaledRecipe.estimatedTotalCost && (
            <p className="text-sm text-blue-800 mt-1">
              <span className="font-medium">Costo estimado:</span> €{scaledRecipe.estimatedTotalCost.toFixed(2)} 
              (€{scaledRecipe.costPerScaledUnit?.toFixed(3)}/{recipe.yield_unit})
            </p>
          )}
        </div>
      )}
    </Card>
  );

  const renderRecipeHeader = () => (
    <Card className="p-6">
      <div className="flex flex-col lg:flex-row gap-6">
        <div className="flex-1">
          <div className="flex items-start justify-between mb-4">
            <div>
              <h1 className="text-3xl font-bold text-gray-900">{recipe.name}</h1>
              <p className="text-gray-600 mt-1">{recipe.description}</p>
            </div>
            
            <div className="flex gap-2">
              <Badge className={DIFFICULTY_COLORS[recipe.difficulty_level]}>
                {DIFFICULTY_LABELS[recipe.difficulty_level]}
              </Badge>
              <Badge className="bg-blue-100 text-blue-800">
                v{recipe.version}
              </Badge>
            </div>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div>
              <p className="text-sm text-gray-600">Preparación</p>
              <p className="font-semibold">{recipe.prep_time_minutes} min</p>
            </div>
            <div>
              <p className="text-sm text-gray-600">Cocción</p>
              <p className="font-semibold">{recipe.cook_time_minutes} min</p>
            </div>
            <div>
              <p className="text-sm text-gray-600">Total</p>
              <p className="font-semibold">{Math.ceil(recipe.total_time_minutes / 60)}h {recipe.total_time_minutes % 60}m</p>
            </div>
            <div>
              <p className="text-sm text-gray-600">Rendimiento</p>
              <p className="font-semibold">{scaledRecipe.scaledYieldQuantity} {recipe.yield_unit}</p>
            </div>
          </div>

          {recipe.allergen_warnings.length > 0 && (
            <div className="mt-4">
              <div className="flex items-center justify-between">
                <p className="text-sm font-medium text-gray-700">Alérgenos:</p>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => setShowAllergensDetail(!showAllergensDetail)}
                >
                  {showAllergensDetail ? 'Ocultar' : 'Ver detalles'}
                </Button>
              </div>
              <div className="flex flex-wrap gap-2 mt-2">
                {recipe.allergen_warnings.map((allergen) => (
                  <Badge
                    key={allergen}
                    className="bg-red-100 text-red-800 border border-red-200"
                  >
                    {ALLERGEN_ICONS[allergen]} {allergen}
                  </Badge>
                ))}
              </div>
              
              {showAllergensDetail && (
                <div className="mt-3 p-3 bg-red-50 border border-red-200 rounded-lg">
                  <p className="text-sm text-red-800">
                    ⚠️ Este producto contiene los siguientes alérgenos. Revisar cuidadosamente 
                    antes del consumo si existe alguna alergia o intolerancia alimentaria.
                  </p>
                </div>
              )}
            </div>
          )}

          {recipe.storage_instructions && (
            <div className="mt-4 p-3 bg-gray-50 border border-gray-200 rounded-lg">
              <p className="text-sm text-gray-700">
                <span className="font-medium">Conservación:</span> {recipe.storage_instructions}
                {recipe.shelf_life_hours && (
                  <span className="ml-2">
                    • Vida útil: {Math.ceil(recipe.shelf_life_hours / 24)} días
                  </span>
                )}
              </p>
            </div>
          )}
        </div>

        <div className="flex flex-col gap-2 lg:w-48">
          {showNutrition && (
            <Button
              variant="outline"
              onClick={() => setIsNutritionModalOpen(true)}
              className="w-full"
            >
              📊 Información nutricional
            </Button>
          )}
          
          {showCosting && (
            <Button
              variant="outline"
              onClick={() => setIsCostingModalOpen(true)}
              className="w-full"
            >
              💰 Análisis de costos
            </Button>
          )}
          
          <Button
            variant="outline"
            onClick={() => setIsEquipmentModalOpen(true)}
            className="w-full"
          >
            🔧 Equipo necesario
          </Button>
          
          {editable && onVersionUpdate && (
            <Button variant="primary" className="w-full">
              ✏️ Editar receta
            </Button>
          )}
        </div>
      </div>
    </Card>
  );

  const renderIngredients = () => (
    <Card className="p-6">
      <h2 className="text-xl font-semibold mb-4">Ingredientes</h2>
      
      <div className="space-y-3">
        {scaledRecipe.ingredients.map((ingredient, index) => (
          <div
            key={`${ingredient.ingredient_id}-${index}`}
            className="flex items-center justify-between py-2 border-b border-gray-100 last:border-b-0"
          >
            <div className="flex-1">
              <p className="font-medium text-gray-900">{ingredient.ingredient_name}</p>
              {ingredient.preparation_notes && (
                <p className="text-sm text-gray-600 italic">{ingredient.preparation_notes}</p>
              )}
              {ingredient.is_optional && (
                <Badge className="bg-gray-100 text-gray-600 text-xs mt-1">
                  Opcional
                </Badge>
              )}
            </div>
            
            <div className="text-right ml-4">
              <p className="font-semibold text-lg">
                {ingredient.scaledQuantity.toFixed(ingredient.scaledQuantity < 1 ? 2 : 0)} {ingredient.unit}
              </p>
              {scaleFactor !== 1 && (
                <p className="text-sm text-gray-500">
                  (original: {ingredient.quantity} {ingredient.unit})
                </p>
              )}
              {showCosting && ingredient.scaledCost && (
                <p className="text-sm text-green-600">
                  €{ingredient.scaledCost.toFixed(2)}
                </p>
              )}
            </div>
          </div>
        ))}
      </div>

      {showCosting && scaledRecipe.estimatedTotalCost && (
        <div className="mt-4 pt-4 border-t border-gray-200">
          <div className="flex justify-between items-center">
            <span className="font-semibold">Costo total estimado:</span>
            <span className="text-xl font-bold text-green-600">
              €{scaledRecipe.estimatedTotalCost.toFixed(2)}
            </span>
          </div>
          <p className="text-sm text-gray-600 text-right">
            €{scaledRecipe.costPerScaledUnit?.toFixed(3)} por {recipe.yield_unit}
          </p>
        </div>
      )}
    </Card>
  );

  const renderInstructions = () => (
    <Card className="p-6">
      <h2 className="text-xl font-semibold mb-4">Instrucciones</h2>
      
      <div className="space-y-4">
        {scaledRecipe.instructions.map((instruction, index) => {
          const timer = activeTimers[instruction.step_number.toString()];
          
          return (
            <div
              key={instruction.step_number}
              className={`p-4 border rounded-lg ${
                instruction.critical_control_point 
                  ? 'border-orange-300 bg-orange-50' 
                  : 'border-gray-200 bg-gray-50'
              }`}
            >
              <div className="flex items-start gap-4">
                <div className="flex-shrink-0">
                  <div className="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-semibold">
                    {instruction.step_number}
                  </div>
                </div>
                
                <div className="flex-1">
                  <div className="flex items-center justify-between mb-2">
                    <div className="flex items-center gap-2">
                      {instruction.duration_minutes && (
                        <Badge className="bg-blue-100 text-blue-800">
                          ⏱️ {instruction.scaledDuration || instruction.duration_minutes} min
                        </Badge>
                      )}
                      
                      {instruction.temperature && (
                        <Badge className="bg-red-100 text-red-800">
                          🌡️ {instruction.temperature}°C
                        </Badge>
                      )}
                      
                      {instruction.critical_control_point && (
                        <Badge className="bg-orange-100 text-orange-800">
                          🚨 PCC
                        </Badge>
                      )}
                    </div>
                    
                    {instruction.duration_minutes && (
                      <div className="flex gap-2">
                        {!timer?.isActive && !timer?.isComplete && (
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => startTimer(instruction)}
                          >
                            ▶️ Iniciar timer
                          </Button>
                        )}
                        
                        {timer?.isActive && (
                          <div className="flex items-center gap-2">
                            <span className="text-lg font-mono font-bold text-blue-600">
                              {formatTime(timer.remaining)}
                            </span>
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => stopTimer(instruction.step_number.toString())}
                            >
                              ⏸️
                            </Button>
                          </div>
                        )}
                        
                        {timer?.isComplete && (
                          <Badge className="bg-green-100 text-green-800 animate-pulse">
                            ✅ Completado
                          </Badge>
                        )}
                      </div>
                    )}
                  </div>
                  
                  <p className="text-gray-800 leading-relaxed mb-2">
                    {instruction.instruction}
                  </p>
                  
                  {instruction.equipment && instruction.equipment.length > 0 && (
                    <div className="mb-2">
                      <p className="text-sm text-gray-600 mb-1">Equipo necesario:</p>
                      <div className="flex flex-wrap gap-1">
                        {instruction.equipment.map((equipment, idx) => (
                          <Badge key={idx} className="bg-gray-100 text-gray-700 text-xs">
                            {EQUIPMENT_ICONS[equipment.toLowerCase()] || '🔧'} {equipment}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  )}
                  
                  {instruction.tips && (
                    <div className="mt-3 p-2 bg-yellow-50 border border-yellow-200 rounded">
                      <p className="text-sm text-yellow-800">
                        💡 <span className="font-medium">Tip:</span> {instruction.tips}
                      </p>
                    </div>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </Card>
  );

  const renderNutritionModal = () => (
    <Modal
      isOpen={isNutritionModalOpen}
      onClose={() => setIsNutritionModalOpen(false)}
      title="Información Nutricional"
    >
      {recipe.nutritional_info ? (
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div className="bg-gray-50 p-4 rounded-lg">
              <p className="text-sm text-gray-600">Calorías por porción</p>
              <p className="text-2xl font-bold text-gray-900">
                {recipe.nutritional_info.calories_per_serving || 'N/A'}
              </p>
            </div>
            
            <div className="bg-gray-50 p-4 rounded-lg">
              <p className="text-sm text-gray-600">Tamaño de porción</p>
              <p className="text-lg font-semibold text-gray-900">
                {recipe.nutritional_info.serving_size || 'N/A'}
              </p>
            </div>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
            <div>
              <p className="text-sm text-gray-600">Proteínas</p>
              <p className="text-lg font-semibold">{recipe.nutritional_info.protein_g || 0}g</p>
            </div>
            <div>
              <p className="text-sm text-gray-600">Carbohidratos</p>
              <p className="text-lg font-semibold">{recipe.nutritional_info.carbohydrates_g || 0}g</p>
            </div>
            <div>
              <p className="text-sm text-gray-600">Grasas</p>
              <p className="text-lg font-semibold">{recipe.nutritional_info.fat_g || 0}g</p>
            </div>
            <div>
              <p className="text-sm text-gray-600">Fibra</p>
              <p className="text-lg font-semibold">{recipe.nutritional_info.fiber_g || 0}g</p>
            </div>
            <div>
              <p className="text-sm text-gray-600">Azúcares</p>
              <p className="text-lg font-semibold">{recipe.nutritional_info.sugar_g || 0}g</p>
            </div>
            <div>
              <p className="text-sm text-gray-600">Sodio</p>
              <p className="text-lg font-semibold">{recipe.nutritional_info.sodium_mg || 0}mg</p>
            </div>
          </div>

          <div className="bg-blue-50 p-4 rounded-lg">
            <p className="text-sm text-blue-800">
              <span className="font-medium">Porciones por lote escalado:</span> {
                recipe.nutritional_info.servings_per_batch 
                  ? Math.ceil(recipe.nutritional_info.servings_per_batch * scaleFactor)
                  : 'N/A'
              }
            </p>
          </div>
        </div>
      ) : (
        <p className="text-gray-500 text-center py-8">
          No hay información nutricional disponible para esta receta.
        </p>
      )}
    </Modal>
  );

  const renderCostingModal = () => (
    <Modal
      isOpen={isCostingModalOpen}
      onClose={() => setIsCostingModalOpen(false)}
      title="Análisis de Costos"
    >
      <div className="space-y-4">
        <div className="bg-green-50 border border-green-200 p-4 rounded-lg">
          <div className="flex justify-between items-center mb-2">
            <span className="font-semibold text-green-900">Costo total</span>
            <span className="text-2xl font-bold text-green-600">
              €{scaledRecipe.estimatedTotalCost?.toFixed(2)}
            </span>
          </div>
          <p className="text-sm text-green-700">
            €{scaledRecipe.costPerScaledUnit?.toFixed(3)} por {recipe.yield_unit}
          </p>
        </div>

        <div>
          <h4 className="font-semibold mb-3">Desglose por ingrediente</h4>
          <div className="space-y-2">
            {scaledRecipe.ingredients.map((ingredient, index) => (
              <div key={index} className="flex justify-between items-center py-2 border-b border-gray-100">
                <div>
                  <p className="font-medium">{ingredient.ingredient_name}</p>
                  <p className="text-sm text-gray-600">
                    {ingredient.scaledQuantity.toFixed(2)} {ingredient.unit}
                  </p>
                </div>
                <p className="font-semibold text-green-600">
                  €{ingredient.scaledCost?.toFixed(2) || '0.00'}
                </p>
              </div>
            ))}
          </div>
        </div>

        <div className="bg-blue-50 p-4 rounded-lg">
          <h4 className="font-semibold text-blue-900 mb-2">Análisis de rentabilidad</h4>
          <div className="space-y-1 text-sm text-blue-800">
            <p>• Costo de ingredientes: €{scaledRecipe.estimatedTotalCost?.toFixed(2)}</p>
            <p>• Margen sugerido (300%): €{((scaledRecipe.estimatedTotalCost || 0) * 3).toFixed(2)}</p>
            <p>• Precio de venta sugerido por {recipe.yield_unit}: €{((scaledRecipe.costPerScaledUnit || 0) * 4).toFixed(2)}</p>
          </div>
        </div>
      </div>
    </Modal>
  );

  const renderEquipmentModal = () => (
    <Modal
      isOpen={isEquipmentModalOpen}
      onClose={() => setIsEquipmentModalOpen(false)}
      title="Equipo Necesario"
    >
      <div className="space-y-4">
        <div>
          <h4 className="font-semibold mb-3">Equipo general de la receta</h4>
          <div className="grid grid-cols-2 gap-2">
            {recipe.equipment_needed.map((equipment, index) => (
              <div key={index} className="flex items-center gap-2 p-2 bg-gray-50 rounded">
                <span className="text-xl">
                  {EQUIPMENT_ICONS[equipment.toLowerCase()] || '🔧'}
                </span>
                <span className="text-sm">{equipment}</span>
              </div>
            ))}
          </div>
        </div>

        <div>
          <h4 className="font-semibold mb-3">Equipo por instrucción</h4>
          <div className="space-y-2">
            {recipe.instructions
              .filter(instruction => instruction.equipment && instruction.equipment.length > 0)
              .map((instruction) => (
                <div key={instruction.step_number} className="border border-gray-200 p-3 rounded">
                  <p className="font-medium text-sm mb-2">
                    Paso {instruction.step_number}
                  </p>
                  <div className="flex flex-wrap gap-1">
                    {instruction.equipment?.map((equipment, idx) => (
                      <Badge key={idx} className="bg-blue-100 text-blue-800 text-xs">
                        {EQUIPMENT_ICONS[equipment.toLowerCase()] || '🔧'} {equipment}
                      </Badge>
                    ))}
                  </div>
                </div>
              ))}
          </div>
        </div>
      </div>
    </Modal>
  );

  return (
    <div className={`space-y-6 ${className}`}>
      {renderRecipeHeader()}
      {renderScalingControls()}
      
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {renderIngredients()}
        <div className="space-y-6">
          {renderInstructions()}
        </div>
      </div>

      {renderNutritionModal()}
      {renderCostingModal()}
      {renderEquipmentModal()}
    </div>
  );
};

export default RecipeDisplay;