bakery-ia/frontend/src/components/domain/unified-wizard/wizards/RecipeWizard.tsx

import React, { useState, useEffect } from 'react';
import { WizardStep, WizardStepProps } from '../../../ui/WizardModal/WizardModal';
import { ChefHat, Package, ClipboardCheck, CheckCircle2, Loader2, Plus, X, Search } from 'lucide-react';
import { useTenant } from '../../../../stores/tenant.store';
import { recipesService } from '../../../../api/services/recipes';
import { inventoryService } from '../../../../api/services/inventory';
import { qualityTemplateService } from '../../../../api/services/qualityTemplates';
import { IngredientResponse } from '../../../../api/types/inventory';
import { RecipeCreate, RecipeIngredientCreate, MeasurementUnit, RecipeQualityConfiguration, RecipeStatus } from '../../../../api/types/recipes';
import { QualityCheckTemplateResponse } from '../../../../api/types/qualityTemplates';
import { showToast } from '../../../../utils/toast';
import { AdvancedOptionsSection } from '../../../ui/AdvancedOptionsSection';
import Tooltip from '../../../ui/Tooltip/Tooltip';

interface WizardDataProps extends WizardStepProps {
  data: Record<string, any>;
  onDataChange: (data: Record<string, any>) => void;
}

const RecipeDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange }) => {
  const { currentTenant } = useTenant();
  const [recipeData, setRecipeData] = useState({
    // Required fields
    name: data.name || '',
    finishedProductId: data.finishedProductId || '',
    yieldQuantity: data.yieldQuantity || '',
    yieldUnit: data.yieldUnit || 'units',

    // Optional basic fields
    category: data.category || 'bread',
    prepTime: data.prepTime || '',
    instructions: data.instructions || '',

    // Advanced optional fields
    recipeCode: data.recipeCode || '',
    version: data.version || '1.0',
    difficultyLevel: data.difficultyLevel || 3,
    cookTime: data.cookTime || '',
    restTime: data.restTime || '',
    totalTime: data.totalTime || '',
    description: data.description || '',
    preparationNotes: data.preparationNotes || '',
    storageInstructions: data.storageInstructions || '',
    servesCount: data.servesCount || '',
    batchSizeMultiplier: data.batchSizeMultiplier || 1.0,
    minBatchSize: data.minBatchSize || '',
    maxBatchSize: data.maxBatchSize || '',
    optimalProductionTemp: data.optimalProductionTemp || '',
    optimalHumidity: data.optimalHumidity || '',
    isSeasonal: data.isSeasonal || false,
    isSignatureItem: data.isSignatureItem || false,
    seasonStartMonth: data.seasonStartMonth || '',
    seasonEndMonth: data.seasonEndMonth || '',
    allergens: data.allergens || '',
    dietaryTags: data.dietaryTags || '',
    targetMargin: data.targetMargin || '',
  });
  const [finishedProducts, setFinishedProducts] = useState<IngredientResponse[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    fetchFinishedProducts();
  }, []);

  useEffect(() => {
    onDataChange({ ...data, ...recipeData });
  }, [recipeData]);

  const fetchFinishedProducts = async () => {
    if (!currentTenant?.id) return;
    setLoading(true);
    try {
      const result = await inventoryService.getIngredients(currentTenant.id, {
        category: 'finished_product'
      });
      setFinishedProducts(result);
    } catch (err) {
      console.error('Error loading finished products:', err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="space-y-6">
      <div className="text-center pb-4 border-b border-[var(--border-primary)]">
        <ChefHat className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
        <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">Recipe Details</h3>
        <p className="text-sm text-[var(--text-secondary)]">Essential information about your recipe</p>
      </div>

      {/* Required Fields */}
      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
            Recipe Name *
          </label>
          <input
            type="text"
            value={recipeData.name}
            onChange={(e) => setRecipeData({ ...recipeData, name: e.target.value })}
            placeholder="e.g., Traditional Baguette"
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
          />
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              Category *
            </label>
            <select
              value={recipeData.category}
              onChange={(e) => setRecipeData({ ...recipeData, category: e.target.value })}
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            >
              <option value="bread">Bread</option>
              <option value="pastries">Pastries</option>
              <option value="cakes">Cakes</option>
              <option value="cookies">Cookies</option>
              <option value="muffins">Muffins</option>
              <option value="sandwiches">Sandwiches</option>
              <option value="seasonal">Seasonal</option>
              <option value="other">Other</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2 inline-flex items-center gap-2">
              Finished Product *
              <Tooltip content="The final product this recipe produces. Must be created in inventory first.">
                <span />
              </Tooltip>
            </label>
            <select
              value={recipeData.finishedProductId}
              onChange={(e) => setRecipeData({ ...recipeData, finishedProductId: e.target.value })}
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              disabled={loading}
            >
              <option value="">Select product...</option>
              {finishedProducts.map(product => (
                <option key={product.id} value={product.id}>{product.name}</option>
              ))}
            </select>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              Yield Quantity *
            </label>
            <input
              type="number"
              value={recipeData.yieldQuantity}
              onChange={(e) => setRecipeData({ ...recipeData, yieldQuantity: e.target.value })}
              placeholder="12"
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              min="0.01"
              step="0.01"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              Yield Unit *
            </label>
            <select
              value={recipeData.yieldUnit}
              onChange={(e) => setRecipeData({ ...recipeData, yieldUnit: e.target.value })}
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            >
              <option value="units">Units</option>
              <option value="pieces">Pieces</option>
              <option value="kg">Kilograms (kg)</option>
              <option value="g">Grams (g)</option>
              <option value="l">Liters (l)</option>
              <option value="ml">Milliliters (ml)</option>
            </select>
          </div>
        </div>

        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
            Preparation Time (minutes)
          </label>
          <input
            type="number"
            value={recipeData.prepTime}
            onChange={(e) => setRecipeData({ ...recipeData, prepTime: e.target.value })}
            placeholder="60"
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            min="0"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
            Instructions
          </label>
          <textarea
            value={recipeData.instructions}
            onChange={(e) => setRecipeData({ ...recipeData, instructions: e.target.value })}
            placeholder="Step-by-step preparation instructions..."
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            rows={4}
          />
        </div>
      </div>

      {/* Advanced Options */}
      <AdvancedOptionsSection
        title="Advanced Options"
        description="Optional fields for detailed recipe management"
      >
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              Recipe Code/SKU
            </label>
            <input
              type="text"
              value={recipeData.recipeCode}
              onChange={(e) => setRecipeData({ ...recipeData, recipeCode: e.target.value })}
              placeholder="RCP-001"
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              Version
            </label>
            <input
              type="text"
              value={recipeData.version}
              onChange={(e) => setRecipeData({ ...recipeData, version: e.target.value })}
              placeholder="1.0"
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2 inline-flex items-center gap-2">
              Difficulty Level (1-5)
              <Tooltip content="1 = Very Easy, 5 = Expert Level">
                <span />
              </Tooltip>
            </label>
            <input
              type="number"
              value={recipeData.difficultyLevel}
              onChange={(e) => setRecipeData({ ...recipeData, difficultyLevel: parseInt(e.target.value) || 1 })}
              min="1"
              max="5"
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              Cook Time (minutes)
            </label>
            <input
              type="number"
              value={recipeData.cookTime}
              onChange={(e) => setRecipeData({ ...recipeData, cookTime: e.target.value })}
              placeholder="30"
              min="0"
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2 inline-flex items-center gap-2">
              Rest Time (minutes)
              <Tooltip content="Time for rising, cooling, or resting">
                <span />
              </Tooltip>
            </label>
            <input
              type="number"
              value={recipeData.restTime}
              onChange={(e) => setRecipeData({ ...recipeData, restTime: e.target.value })}
              placeholder="60"
              min="0"
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              Total Time (minutes)
            </label>
            <input
              type="number"
              value={recipeData.totalTime}
              onChange={(e) => setRecipeData({ ...recipeData, totalTime: e.target.value })}
              placeholder="90"
              min="0"
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              Serves Count
            </label>
            <input
              type="number"
              value={recipeData.servesCount}
              onChange={(e) => setRecipeData({ ...recipeData, servesCount: e.target.value })}
              placeholder="8"
              min="0"
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2 inline-flex items-center gap-2">
              Batch Size Multiplier
              <Tooltip content="Default scaling factor for batch production">
                <span />
              </Tooltip>
            </label>
            <input
              type="number"
              value={recipeData.batchSizeMultiplier}
              onChange={(e) => setRecipeData({ ...recipeData, batchSizeMultiplier: parseFloat(e.target.value) || 1 })}
              placeholder="1.0"
              min="0.1"
              step="0.1"
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              Min Batch Size
            </label>
            <input
              type="number"
              value={recipeData.minBatchSize}
              onChange={(e) => setRecipeData({ ...recipeData, minBatchSize: e.target.value })}
              placeholder="5"
              min="0"
              step="0.1"
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              Max Batch Size
            </label>
            <input
              type="number"
              value={recipeData.maxBatchSize}
              onChange={(e) => setRecipeData({ ...recipeData, maxBatchSize: e.target.value })}
              placeholder="100"
              min="0"
              step="0.1"
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              Optimal Production Temp (°C)
            </label>
            <input
              type="number"
              value={recipeData.optimalProductionTemp}
              onChange={(e) => setRecipeData({ ...recipeData, optimalProductionTemp: e.target.value })}
              placeholder="24"
              step="0.1"
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              Optimal Humidity (%)
            </label>
            <input
              type="number"
              value={recipeData.optimalHumidity}
              onChange={(e) => setRecipeData({ ...recipeData, optimalHumidity: e.target.value })}
              placeholder="65"
              min="0"
              max="100"
              step="0.1"
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              Target Margin (%)
            </label>
            <input
              type="number"
              value={recipeData.targetMargin}
              onChange={(e) => setRecipeData({ ...recipeData, targetMargin: e.target.value })}
              placeholder="30"
              min="0"
              max="100"
              step="0.1"
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="flex items-center gap-3">
            <input
              type="checkbox"
              id="isSeasonal"
              checked={recipeData.isSeasonal}
              onChange={(e) => setRecipeData({ ...recipeData, isSeasonal: e.target.checked })}
              className="w-4 h-4 text-[var(--color-primary)] border-[var(--border-secondary)] rounded focus:ring-2 focus:ring-[var(--color-primary)]"
            />
            <label htmlFor="isSeasonal" className="text-sm font-medium text-[var(--text-secondary)]">
              Seasonal Item
            </label>
          </div>

          <div className="flex items-center gap-3">
            <input
              type="checkbox"
              id="isSignatureItem"
              checked={recipeData.isSignatureItem}
              onChange={(e) => setRecipeData({ ...recipeData, isSignatureItem: e.target.checked })}
              className="w-4 h-4 text-[var(--color-primary)] border-[var(--border-secondary)] rounded focus:ring-2 focus:ring-[var(--color-primary)]"
            />
            <label htmlFor="isSignatureItem" className="text-sm font-medium text-[var(--text-secondary)]">
              Signature Item
            </label>
          </div>
        </div>

        {recipeData.isSeasonal && (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Season Start Month
              </label>
              <select
                value={recipeData.seasonStartMonth}
                onChange={(e) => setRecipeData({ ...recipeData, seasonStartMonth: e.target.value })}
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              >
                <option value="">Select month...</option>
                {Array.from({ length: 12 }, (_, i) => i + 1).map(month => (
                  <option key={month} value={month}>
                    {new Date(2000, month - 1).toLocaleString('default', { month: 'long' })}
                  </option>
                ))}
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Season End Month
              </label>
              <select
                value={recipeData.seasonEndMonth}
                onChange={(e) => setRecipeData({ ...recipeData, seasonEndMonth: e.target.value })}
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              >
                <option value="">Select month...</option>
                {Array.from({ length: 12 }, (_, i) => i + 1).map(month => (
                  <option key={month} value={month}>
                    {new Date(2000, month - 1).toLocaleString('default', { month: 'long' })}
                  </option>
                ))}
              </select>
            </div>
          </div>
        )}

        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
            Description
          </label>
          <textarea
            value={recipeData.description}
            onChange={(e) => setRecipeData({ ...recipeData, description: e.target.value })}
            placeholder="Detailed description of the recipe..."
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            rows={3}
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
            Preparation Notes
          </label>
          <textarea
            value={recipeData.preparationNotes}
            onChange={(e) => setRecipeData({ ...recipeData, preparationNotes: e.target.value })}
            placeholder="Tips and notes for preparation..."
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            rows={3}
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
            Storage Instructions
          </label>
          <textarea
            value={recipeData.storageInstructions}
            onChange={(e) => setRecipeData({ ...recipeData, storageInstructions: e.target.value })}
            placeholder="How to store the finished product..."
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            rows={3}
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
            Allergens
          </label>
          <input
            type="text"
            value={recipeData.allergens}
            onChange={(e) => setRecipeData({ ...recipeData, allergens: e.target.value })}
            placeholder="e.g., gluten, dairy, eggs (comma-separated)"
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
            Dietary Tags
          </label>
          <input
            type="text"
            value={recipeData.dietaryTags}
            onChange={(e) => setRecipeData({ ...recipeData, dietaryTags: e.target.value })}
            placeholder="e.g., vegan, gluten-free, organic (comma-separated)"
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
          />
        </div>
      </AdvancedOptionsSection>
    </div>
  );
};

interface SelectedIngredient {
  id: string;
  ingredientId: string;
  quantity: number;
  unit: MeasurementUnit;
  notes: string;
  order: number;
}

const IngredientsStep: React.FC<WizardDataProps> = ({ data, onDataChange }) => {
  const { currentTenant } = useTenant();
  const [ingredients, setIngredients] = useState<IngredientResponse[]>([]);
  const [selectedIngredients, setSelectedIngredients] = useState<SelectedIngredient[]>(data.ingredients || []);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    fetchIngredients();
  }, []);

  useEffect(() => {
    onDataChange({ ...data, ingredients: selectedIngredients });
  }, [selectedIngredients]);

  const fetchIngredients = async () => {
    if (!currentTenant?.id) return;
    setLoading(true);
    try {
      const result = await inventoryService.getIngredients(currentTenant.id);
      const rawIngredients = result.filter(ing => ing.category !== 'finished_product');
      setIngredients(rawIngredients);
    } catch (err) {
      setError('Error loading ingredients');
      console.error('Error loading ingredients:', err);
    } finally {
      setLoading(false);
    }
  };

  const handleAddIngredient = () => {
    const newIngredient: SelectedIngredient = {
      id: Date.now().toString(),
      ingredientId: '',
      quantity: 0,
      unit: MeasurementUnit.GRAMS,
      notes: '',
      order: selectedIngredients.length + 1,
    };
    setSelectedIngredients([...selectedIngredients, newIngredient]);
  };

  const handleUpdateIngredient = (id: string, field: keyof SelectedIngredient, value: any) => {
    setSelectedIngredients(
      selectedIngredients.map(ing =>
        ing.id === id ? { ...ing, [field]: value } : ing
      )
    );
  };

  const handleRemoveIngredient = (id: string) => {
    setSelectedIngredients(selectedIngredients.filter(ing => ing.id !== id));
  };

  const filteredIngredients = ingredients.filter(ing =>
    ing.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className="space-y-6">
      <div className="text-center pb-4 border-b border-[var(--border-primary)]">
        <Package className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
        <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">Ingredients</h3>
        <p className="text-sm text-[var(--text-secondary)]">{data.name}</p>
      </div>

      {error && (
        <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
          {error}
        </div>
      )}

      {loading ? (
        <div className="flex items-center justify-center py-12">
          <Loader2 className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
          <span className="ml-3 text-[var(--text-secondary)]">Loading ingredients...</span>
        </div>
      ) : (
        <>
          <div className="space-y-4">
            {selectedIngredients.length === 0 ? (
              <div className="text-center py-8 border-2 border-dashed border-[var(--border-secondary)] rounded-lg">
                <Package className="w-12 h-12 mx-auto mb-3 text-[var(--text-tertiary)]" />
                <p className="text-[var(--text-secondary)] mb-2">No ingredients added</p>
                <p className="text-sm text-[var(--text-tertiary)]">Click "Add Ingredient" to begin</p>
              </div>
            ) : (
              selectedIngredients.map((selectedIng) => (
                <div key={selectedIng.id} className="p-4 border border-[var(--border-secondary)] rounded-lg bg-[var(--bg-secondary)]">
                  <div className="grid grid-cols-1 md:grid-cols-12 gap-3 items-start">
                    <div className="md:col-span-5">
                      <label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">Ingredient *</label>
                      <div className="relative">
                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-[var(--text-tertiary)]" />
                        <select
                          value={selectedIng.ingredientId}
                          onChange={(e) => handleUpdateIngredient(selectedIng.id, 'ingredientId', e.target.value)}
                          className="w-full pl-9 pr-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-sm"
                        >
                          <option value="">Select...</option>
                          {filteredIngredients.map(ing => (
                            <option key={ing.id} value={ing.id}>
                              {ing.name} {ing.category ? `(${ing.category})` : ''}
                            </option>
                          ))}
                        </select>
                      </div>
                    </div>
                    <div className="md:col-span-2">
                      <label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">Quantity *</label>
                      <input
                        type="number"
                        value={selectedIng.quantity || ''}
                        onChange={(e) => handleUpdateIngredient(selectedIng.id, 'quantity', parseFloat(e.target.value) || 0)}
                        placeholder="0"
                        className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-sm"
                        min="0"
                        step="0.01"
                      />
                    </div>
                    <div className="md:col-span-2">
                      <label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">Unit *</label>
                      <select
                        value={selectedIng.unit}
                        onChange={(e) => handleUpdateIngredient(selectedIng.id, 'unit', e.target.value as MeasurementUnit)}
                        className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-sm"
                      >
                        <option value={MeasurementUnit.GRAMS}>Grams (g)</option>
                        <option value={MeasurementUnit.KILOGRAMS}>Kilograms (kg)</option>
                        <option value={MeasurementUnit.MILLILITERS}>Milliliters (ml)</option>
                        <option value={MeasurementUnit.LITERS}>Liters (l)</option>
                        <option value={MeasurementUnit.UNITS}>Units</option>
                        <option value={MeasurementUnit.PIECES}>Pieces</option>
                        <option value={MeasurementUnit.CUPS}>Cups</option>
                        <option value={MeasurementUnit.TABLESPOONS}>Tablespoons</option>
                        <option value={MeasurementUnit.TEASPOONS}>Teaspoons</option>
                      </select>
                    </div>
                    <div className="md:col-span-2">
                      <label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">Notes</label>
                      <input
                        type="text"
                        value={selectedIng.notes}
                        onChange={(e) => handleUpdateIngredient(selectedIng.id, 'notes', e.target.value)}
                        placeholder="Optional"
                        className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-sm"
                      />
                    </div>
                    <div className="md:col-span-1 flex items-end">
                      <button
                        type="button"
                        onClick={() => handleRemoveIngredient(selectedIng.id)}
                        className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                        title="Remove ingredient"
                      >
                        <X className="w-5 h-5" />
                      </button>
                    </div>
                  </div>
                </div>
              ))
            )}
          </div>

          <button
            type="button"
            onClick={handleAddIngredient}
            className="w-full py-3 border-2 border-dashed border-[var(--border-secondary)] rounded-lg text-[var(--text-secondary)] hover:border-[var(--color-primary)] hover:text-[var(--color-primary)] transition-colors inline-flex items-center justify-center gap-2"
          >
            <Plus className="w-5 h-5" />
            Add Ingredient
          </button>
        </>
      )}
    </div>
  );
};

const QualityTemplatesStep: React.FC<WizardDataProps> = ({ data, onDataChange, onComplete }) => {
  const { currentTenant } = useTenant();
  const [templates, setTemplates] = useState<QualityCheckTemplateResponse[]>([]);
  const [selectedTemplateIds, setSelectedTemplateIds] = useState<string[]>(data.selectedTemplates || []);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchTemplates();
  }, []);

  useEffect(() => {
    onDataChange({ ...data, selectedTemplates: selectedTemplateIds });
  }, [selectedTemplateIds]);

  const fetchTemplates = async () => {
    if (!currentTenant?.id) return;
    setLoading(true);
    try {
      const result = await qualityTemplateService.getTemplates(currentTenant.id, { is_active: true });
      setTemplates(result.templates || []);
    } catch (err) {
      console.error('Error loading quality templates:', err);
      setError('Error loading quality templates');
    } finally {
      setLoading(false);
    }
  };

  const toggleTemplate = (templateId: string) => {
    setSelectedTemplateIds(prev =>
      prev.includes(templateId)
        ? prev.filter(id => id !== templateId)
        : [...prev, templateId]
    );
  };

  const handleCreateRecipe = async () => {
    if (!currentTenant?.id) {
      setError('Could not obtain tenant information');
      return;
    }

    setSaving(true);
    setError(null);

    try {
      const recipeIngredients: RecipeIngredientCreate[] = data.ingredients.map((ing: any, index: number) => ({
        ingredient_id: ing.ingredientId,
        quantity: ing.quantity,
        unit: ing.unit,
        ingredient_notes: ing.notes || null,
        is_optional: false,
        ingredient_order: index + 1,
      }));

      let qualityConfig: RecipeQualityConfiguration | undefined;
      if (selectedTemplateIds.length > 0) {
        qualityConfig = {
          stages: {
            production: {
              template_ids: selectedTemplateIds,
              required_checks: [],
              optional_checks: [],
              blocking_on_failure: true,
              min_quality_score: 7.0,
            }
          },
          overall_quality_threshold: 7.0,
          critical_stage_blocking: true,
          auto_create_quality_checks: true,
          quality_manager_approval_required: false,
        };
      }

      const recipeData: RecipeCreate = {
        name: data.name,
        category: data.category,
        finished_product_id: data.finishedProductId,
        yield_quantity: parseFloat(data.yieldQuantity),
        yield_unit: data.yieldUnit as MeasurementUnit,
        version: data.version || '1.0',
        difficulty_level: data.difficultyLevel || 3,
        prep_time_minutes: data.prepTime ? parseInt(data.prepTime) : null,
        cook_time_minutes: data.cookTime ? parseInt(data.cookTime) : null,
        rest_time_minutes: data.restTime ? parseInt(data.restTime) : null,
        total_time_minutes: data.totalTime ? parseInt(data.totalTime) : null,
        recipe_code: data.recipeCode || null,
        description: data.description || null,
        preparation_notes: data.preparationNotes || null,
        storage_instructions: data.storageInstructions || null,
        serves_count: data.servesCount ? parseInt(data.servesCount) : null,
        batch_size_multiplier: data.batchSizeMultiplier || 1.0,
        minimum_batch_size: data.minBatchSize ? parseFloat(data.minBatchSize) : null,
        maximum_batch_size: data.maxBatchSize ? parseFloat(data.maxBatchSize) : null,
        optimal_production_temperature: data.optimalProductionTemp ? parseFloat(data.optimalProductionTemp) : null,
        optimal_humidity: data.optimalHumidity ? parseFloat(data.optimalHumidity) : null,
        target_margin_percentage: data.targetMargin ? parseFloat(data.targetMargin) : null,
        is_seasonal: data.isSeasonal || false,
        is_signature_item: data.isSignatureItem || false,
        season_start_month: data.seasonStartMonth ? parseInt(data.seasonStartMonth) : null,
        season_end_month: data.seasonEndMonth ? parseInt(data.seasonEndMonth) : null,
        instructions: data.instructions ? { steps: data.instructions } : null,
        allergen_info: data.allergens ? data.allergens.split(',').map((a: string) => a.trim()) : null,
        dietary_tags: data.dietaryTags ? data.dietaryTags.split(',').map((t: string) => t.trim()) : null,
        ingredients: recipeIngredients,
        quality_check_configuration: qualityConfig,
      };

      await recipesService.createRecipe(currentTenant.id, recipeData);
      showToast.success('Recipe created successfully');
      onComplete();
    } catch (err: any) {
      console.error('Error creating recipe:', err);
      const errorMessage = err.response?.data?.detail || 'Error creating recipe';
      setError(errorMessage);
      showToast.error(errorMessage);
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="space-y-6">
      <div className="text-center pb-4 border-b border-[var(--border-primary)]">
        <ClipboardCheck className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
        <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
          Quality Templates (Optional)
        </h3>
        <p className="text-sm text-[var(--text-secondary)]">
          Select quality control templates to apply to this recipe
        </p>
      </div>

      {error && (
        <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
          {error}
        </div>
      )}

      {loading ? (
        <div className="flex items-center justify-center py-12">
          <Loader2 className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
          <span className="ml-3 text-[var(--text-secondary)]">Loading templates...</span>
        </div>
      ) : (
        <>
          {templates.length === 0 ? (
            <div className="text-center py-12 border-2 border-dashed border-[var(--border-secondary)] rounded-lg">
              <ClipboardCheck className="w-12 h-12 mx-auto mb-3 text-[var(--text-tertiary)]" />
              <p className="text-[var(--text-secondary)] mb-2">No quality templates available</p>
              <p className="text-sm text-[var(--text-tertiary)]">
                You can create templates from the main wizard
              </p>
            </div>
          ) : (
            <div className="space-y-3 max-h-96 overflow-y-auto">
              {templates.map((template) => (
                <button
                  key={template.id}
                  type="button"
                  onClick={() => toggleTemplate(template.id)}
                  className={`w-full p-4 rounded-lg border-2 transition-all text-left ${
                    selectedTemplateIds.includes(template.id)
                      ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
                      : 'border-[var(--border-secondary)] hover:border-[var(--color-primary)]/50'
                  }`}
                >
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-1">
                        <h4 className="font-semibold text-[var(--text-primary)]">{template.name}</h4>
                        {template.is_required && (
                          <span className="px-2 py-0.5 text-xs bg-orange-100 text-orange-700 rounded-full">
                            Required
                          </span>
                        )}
                      </div>
                      {template.description && (
                        <p className="text-sm text-[var(--text-secondary)] line-clamp-2">
                          {template.description}
                        </p>
                      )}
                      <div className="flex items-center gap-3 mt-2 text-xs text-[var(--text-tertiary)]">
                        <span>Type: {template.check_type}</span>
                        {template.frequency_days && (
                          <span>• Every {template.frequency_days} days</span>
                        )}
                      </div>
                    </div>
                    {selectedTemplateIds.includes(template.id) && (
                      <CheckCircle2 className="w-5 h-5 text-[var(--color-primary)] flex-shrink-0 ml-3" />
                    )}
                  </div>
                </button>
              ))}
            </div>
          )}

          {selectedTemplateIds.length > 0 && (
            <div className="p-4 bg-[var(--color-primary)]/5 rounded-lg border border-[var(--color-primary)]/20">
              <p className="text-sm text-[var(--text-primary)]">
                <strong>{selectedTemplateIds.length}</strong> template(s) selected
              </p>
            </div>
          )}
        </>
      )}

      <div className="flex justify-center pt-4 border-t border-[var(--border-primary)]">
        <button
          type="button"
          onClick={handleCreateRecipe}
          disabled={saving || loading}
          className="px-8 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 font-semibold inline-flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {saving ? (
            <>
              <Loader2 className="w-5 h-5 animate-spin" />
              Creating recipe...
            </>
          ) : (
            <>
              <CheckCircle2 className="w-5 h-5" />
              Create Recipe
            </>
          )}
        </button>
      </div>
    </div>
  );
};

export const RecipeWizardSteps = (data: Record<string, any>, setData: (data: Record<string, any>) => void): WizardStep[] => [
  {
    id: 'recipe-details',
    title: 'Recipe Details',
    description: 'Name, category, yield',
    component: (props) => <RecipeDetailsStep {...props} data={data} onDataChange={setData} />,
    validate: () => {
      return !!(data.name && data.finishedProductId && data.yieldQuantity);
    },
  },
  {
    id: 'recipe-ingredients',
    title: 'Ingredients',
    description: 'Selection and quantities',
    component: (props) => <IngredientsStep {...props} data={data} onDataChange={setData} />,
    validate: () => {
      if (!data.ingredients || data.ingredients.length === 0) {
        return false;
      }
      const invalidIngredients = data.ingredients.filter(
        (ing: any) => !ing.ingredientId || ing.quantity <= 0
      );
      return invalidIngredients.length === 0;
    },
  },
  {
    id: 'recipe-quality-templates',
    title: 'Quality Templates',
    description: 'Applicable quality controls',
    component: (props) => <QualityTemplatesStep {...props} data={data} onDataChange={setData} />,
    isOptional: true,
  },
];