feat(production): TUI-Screens für Produktionsschritte verwalten

Produktionsschritte im RecipeDetailScreen anzeigen, hinzufügen und
entfernen. Neuer AddProductionStepScreen mit Formular für stepNumber,
description, durationMinutes und temperatureCelsius.

frontend/apps/cli/src/components/production/RecipeDetailScreen.tsx

@@ -1,23 +1,52 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Box, Text, useInput } from 'ink';
-import type { RecipeDTO, RecipeType } from '@effigenix/api-client';
+import type { RecipeDTO, RecipeType, ProductionStepDTO } from '@effigenix/api-client';
 import { RECIPE_TYPE_LABELS } from '@effigenix/api-client';
 import { useNavigation } from '../../state/navigation-context.js';
 import { LoadingSpinner } from '../shared/LoadingSpinner.js';
 import { ErrorDisplay } from '../shared/ErrorDisplay.js';
+import { SuccessDisplay } from '../shared/SuccessDisplay.js';
+import { ConfirmDialog } from '../shared/ConfirmDialog.js';
 import { client } from '../../utils/api-client.js';
 
+type MenuAction = 'add-step' | 'remove-step' | 'back';
+type Mode = 'menu' | 'select-step-to-remove' | 'confirm-remove';
+
 function errorMessage(err: unknown): string {
   return err instanceof Error ? err.message : 'Unbekannter Fehler';
 }
 
 export function RecipeDetailScreen() {
-  const { params, back } = useNavigation();
+  const { params, navigate, back } = useNavigation();
   const recipeId = params['recipeId'] ?? '';
 
   const [recipe, setRecipe] = useState<RecipeDTO | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [mode, setMode] = useState<Mode>('menu');
+  const [selectedAction, setSelectedAction] = useState(0);
+  const [actionLoading, setActionLoading] = useState(false);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+  const [selectedStepIndex, setSelectedStepIndex] = useState(0);
+  const [stepToRemove, setStepToRemove] = useState<ProductionStepDTO | null>(null);
+
+  const isDraft = recipe?.status === 'DRAFT';
+
+  const menuItems: { id: MenuAction; label: string }[] = [
+    ...(isDraft ? [
+      { id: 'add-step' as const, label: '[Schritt hinzufügen]' },
+      { id: 'remove-step' as const, label: '[Schritt entfernen]' },
+    ] : []),
+    { id: 'back' as const, label: '[Zurück]' },
+  ];
+
+  useEffect(() => {
+    setSelectedAction(0);
+  }, [isDraft]);
+
+  const sortedSteps = recipe?.productionSteps
+    ? [...recipe.productionSteps].sort((a, b) => a.stepNumber - b.stepNumber)
+    : [];
 
   const loadRecipe = useCallback(() => {
     setLoading(true);
@@ -30,10 +59,65 @@ export function RecipeDetailScreen() {
   useEffect(() => { if (recipeId) loadRecipe(); }, [loadRecipe, recipeId]);
 
   useInput((_input, key) => {
-    if (loading) return;
-    if (key.backspace || key.escape) back();
+    if (loading || actionLoading) return;
+
+    if (mode === 'menu') {
+      if (key.upArrow) setSelectedAction((i) => Math.max(0, i - 1));
+      if (key.downArrow) setSelectedAction((i) => Math.min(menuItems.length - 1, i + 1));
+      if (key.return) void handleAction();
+      if (key.backspace || key.escape) back();
+    }
+
+    if (mode === 'select-step-to-remove') {
+      if (key.upArrow) setSelectedStepIndex((i) => Math.max(0, i - 1));
+      if (key.downArrow) setSelectedStepIndex((i) => Math.min(sortedSteps.length - 1, i + 1));
+      if (key.return && sortedSteps.length > 0) {
+        setStepToRemove(sortedSteps[selectedStepIndex] ?? null);
+        setMode('confirm-remove');
+      }
+      if (key.escape) { setMode('menu'); setSelectedStepIndex(0); }
+    }
   });
 
+  const handleAction = async () => {
+    if (!recipe) return;
+    const item = menuItems[selectedAction];
+    if (!item) return;
+
+    switch (item.id) {
+      case 'add-step':
+        navigate('recipe-add-production-step', { recipeId });
+        break;
+      case 'remove-step':
+        if (sortedSteps.length === 0) {
+          setError('Keine Produktionsschritte vorhanden.');
+          return;
+        }
+        setSelectedStepIndex(0);
+        setMode('select-step-to-remove');
+        break;
+      case 'back':
+        back();
+        break;
+    }
+  };
+
+  const handleRemoveStep = useCallback(async () => {
+    if (!recipe || !stepToRemove) return;
+    setMode('menu');
+    setActionLoading(true);
+    try {
+      await client.recipes.removeProductionStep(recipe.id, stepToRemove.stepNumber);
+      const updated = await client.recipes.getById(recipe.id);
+      setRecipe(updated);
+      setSuccessMessage(`Schritt ${stepToRemove.stepNumber} entfernt.`);
+    } catch (err: unknown) {
+      setError(errorMessage(err));
+    }
+    setActionLoading(false);
+    setStepToRemove(null);
+  }, [recipe, stepToRemove]);
+
   if (loading) return <LoadingSpinner label="Lade Rezept..." />;
   if (error && !recipe) return <ErrorDisplay message={error} onDismiss={back} />;
   if (!recipe) return <Text color="red">Rezept nicht gefunden.</Text>;
@@ -45,6 +129,7 @@ export function RecipeDetailScreen() {
       <Text color="cyan" bold>Rezept: {recipe.name}</Text>
 
       {error && <ErrorDisplay message={error} onDismiss={() => setError(null)} />}
+      {successMessage && <SuccessDisplay message={successMessage} onDismiss={() => setSuccessMessage(null)} />}
 
       <Box flexDirection="column" borderStyle="round" borderColor="gray" paddingX={2} paddingY={1}>
         <Box gap={2}>
@@ -93,10 +178,60 @@ export function RecipeDetailScreen() {
             ))}
           </Box>
         )}
+
+        {sortedSteps.length > 0 && (
+          <Box flexDirection="column" marginTop={1}>
+            <Text color="gray">Produktionsschritte:</Text>
+            {sortedSteps.map((step) => (
+              <Box key={step.id} paddingLeft={2} gap={1}>
+                <Text color="yellow">{step.stepNumber}.</Text>
+                <Text>{step.description}</Text>
+                {step.durationMinutes != null && <Text color="gray">({step.durationMinutes} min)</Text>}
+                {step.temperatureCelsius != null && <Text color="gray">[{step.temperatureCelsius}°C]</Text>}
+              </Box>
+            ))}
+          </Box>
+        )}
       </Box>
 
+      {mode === 'select-step-to-remove' && (
+        <Box flexDirection="column">
+          <Text color="yellow" bold>Schritt zum Entfernen auswählen:</Text>
+          {sortedSteps.map((step, index) => (
+            <Box key={step.id}>
+              <Text color={index === selectedStepIndex ? 'cyan' : 'white'}>
+                {index === selectedStepIndex ? '▶ ' : '  '}Schritt {step.stepNumber}: {step.description}
+              </Text>
+            </Box>
+          ))}
+          <Text color="gray" dimColor>↑↓ auswählen · Enter bestätigen · Escape abbrechen</Text>
+        </Box>
+      )}
+
+      {mode === 'confirm-remove' && stepToRemove && (
+        <ConfirmDialog
+          message={`Schritt ${stepToRemove.stepNumber} "${stepToRemove.description}" entfernen?`}
+          onConfirm={() => void handleRemoveStep()}
+          onCancel={() => { setMode('menu'); setStepToRemove(null); }}
+        />
+      )}
+
+      {mode === 'menu' && (
+        <Box flexDirection="column">
+          <Text color="gray" bold>Aktionen:</Text>
+          {actionLoading && <LoadingSpinner label="Aktion wird ausgeführt..." />}
+          {!actionLoading && menuItems.map((item, index) => (
+            <Box key={item.id}>
+              <Text color={index === selectedAction ? 'cyan' : 'white'}>
+                {index === selectedAction ? '▶ ' : '  '}{item.label}
+              </Text>
+            </Box>
+          ))}
+        </Box>
+      )}
+
       <Box marginTop={1}>
-        <Text color="gray" dimColor>Backspace Zurück</Text>
+        <Text color="gray" dimColor>↑↓ navigieren · Enter ausführen · Backspace Zurück</Text>
       </Box>
     </Box>
   );