/**
 * Action Wizard Screen - Step-by-step walkthrough for template actions.
 * 
 * Guides users through:
 * - Reviewing action requirements
 * - Entering variables (e.g., requestedSatoshis)
 * - Selecting inputs (UTXOs) for funding
 * - Reviewing outputs and change
 * - Creating and publishing invitation
 */

import React, { useState, useEffect, useCallback } from 'react';
import { Box, Text, useInput } from 'ink';
import TextInput from 'ink-text-input';
import { StepIndicator, type Step } from '../components/ProgressBar.js';
import { Button } from '../components/Button.js';
import { useNavigation } from '../hooks/useNavigation.js';
import { useAppContext, useStatus } from '../hooks/useAppContext.js';
import { colors, logoSmall, formatSatoshis, formatHex } from '../theme.js';
import { copyToClipboard } from '../utils/clipboard.js';
import type { XOTemplate, XOInvitation } from '@xo-cash/types';

/**
 * Wizard step types.
 */
type StepType = 'info' | 'variables' | 'inputs' | 'review' | 'publish';

/**
 * Wizard step definition.
 */
interface WizardStep {
  name: string;
  type: StepType;
}

/**
 * Variable input state.
 */
interface VariableInput {
  id: string;
  name: string;
  type: string;
  hint?: string;
  value: string;
}

/**
 * UTXO for selection.
 */
interface SelectableUTXO {
  outpointTransactionHash: string;
  outpointIndex: number;
  valueSatoshis: bigint;
  lockingBytecode?: string;
  selected: boolean;
}

/**
 * Action Wizard Screen Component.
 */
export function ActionWizardScreen(): React.ReactElement {
  const { navigate, goBack, data: navData } = useNavigation();
  const { walletController, invitationController, showError, showInfo } = useAppContext();
  const { setStatus } = useStatus();

  // Extract navigation data
  const templateIdentifier = navData.templateIdentifier as string | undefined;
  const actionIdentifier = navData.actionIdentifier as string | undefined;
  const roleIdentifier = navData.roleIdentifier as string | undefined;
  const template = navData.template as XOTemplate | undefined;

  // Wizard state
  const [steps, setSteps] = useState<WizardStep[]>([]);
  const [currentStep, setCurrentStep] = useState(0);
  
  // Variable inputs
  const [variables, setVariables] = useState<VariableInput[]>([]);
  
  // UTXO selection
  const [availableUtxos, setAvailableUtxos] = useState<SelectableUTXO[]>([]);
  const [selectedUtxoIndex, setSelectedUtxoIndex] = useState(0);
  const [requiredAmount, setRequiredAmount] = useState<bigint>(0n);
  const [fee, setFee] = useState<bigint>(500n); // Default fee estimate
  
  // Invitation state
  const [invitation, setInvitation] = useState<XOInvitation | null>(null);
  const [invitationId, setInvitationId] = useState<string | null>(null);
  
  // UI state
  const [focusedInput, setFocusedInput] = useState(0);
  const [focusedButton, setFocusedButton] = useState<'back' | 'cancel' | 'next'>('next');
  const [focusArea, setFocusArea] = useState<'content' | 'buttons'>('content');
  const [isProcessing, setIsProcessing] = useState(false);

  /**
   * Initialize wizard on mount.
   */
  useEffect(() => {
    if (!template || !actionIdentifier || !roleIdentifier) {
      showError('Missing wizard data');
      goBack();
      return;
    }

    // Build steps based on template
    const action = template.actions?.[actionIdentifier];
    const role = action?.roles?.[roleIdentifier];
    const requirements = role?.requirements;

    const wizardSteps: WizardStep[] = [
      { name: 'Welcome', type: 'info' },
    ];

    // Add variables step if needed
    if (requirements?.variables && requirements.variables.length > 0) {
      wizardSteps.push({ name: 'Variables', type: 'variables' });

      // Initialize variable inputs
      const varInputs = requirements.variables.map(varId => {
        const varDef = template.variables?.[varId];
        return {
          id: varId,
          name: varDef?.name || varId,
          type: varDef?.type || 'string',
          hint: varDef?.hint,
          value: '',
        };
      });
      setVariables(varInputs);
    }

    // Add inputs step if role requires slots (funding inputs)
    // Slots indicate the role needs to provide transaction inputs/outputs
    if (requirements?.slots && requirements.slots.min > 0) {
      wizardSteps.push({ name: 'Select UTXOs', type: 'inputs' });
    }

    wizardSteps.push({ name: 'Review', type: 'review' });
    wizardSteps.push({ name: 'Publish', type: 'publish' });

    setSteps(wizardSteps);
    setStatus(`${actionIdentifier}/${roleIdentifier}`);
  }, [template, actionIdentifier, roleIdentifier, showError, goBack, setStatus]);

  /**
   * Get current step data.
   */
  const currentStepData = steps[currentStep];

  /**
   * Calculate selected amount.
   */
  const selectedAmount = availableUtxos
    .filter(u => u.selected)
    .reduce((sum, u) => sum + u.valueSatoshis, 0n);

  /**
   * Calculate change amount.
   */
  const changeAmount = selectedAmount - requiredAmount - fee;

  /**
   * Load available UTXOs for the inputs step.
   */
  const loadAvailableUtxos = useCallback(async () => {
    if (!invitation || !templateIdentifier) return;

    try {
      setIsProcessing(true);
      setStatus('Finding suitable UTXOs...');

      // First, get the required amount from variables (e.g., requestedSatoshis)
      const requestedVar = variables.find(v => 
        v.id.toLowerCase().includes('satoshi') || 
        v.id.toLowerCase().includes('amount')
      );
      const requested = requestedVar ? BigInt(requestedVar.value || '0') : 0n;
      setRequiredAmount(requested);

      // Find suitable resources
      const resources = await walletController.findSuitableResources(invitation, {
        templateIdentifier,
        outputIdentifier: 'receiveOutput', // Common output identifier
      });

      // Convert to selectable UTXOs
      const utxos: SelectableUTXO[] = (resources.unspentOutputs || []).map((utxo: any) => ({
        outpointTransactionHash: utxo.outpointTransactionHash,
        outpointIndex: utxo.outpointIndex,
        valueSatoshis: BigInt(utxo.valueSatoshis),
        lockingBytecode: utxo.lockingBytecode 
          ? typeof utxo.lockingBytecode === 'string'
            ? utxo.lockingBytecode
            : Buffer.from(utxo.lockingBytecode).toString('hex')
          : undefined,
        selected: false,
      }));

      // Auto-select UTXOs to cover required amount + fee
      let accumulated = 0n;
      const seenLockingBytecodes = new Set<string>();
      
      for (const utxo of utxos) {
        // Ensure lockingBytecode uniqueness
        if (utxo.lockingBytecode && seenLockingBytecodes.has(utxo.lockingBytecode)) {
          continue;
        }
        if (utxo.lockingBytecode) {
          seenLockingBytecodes.add(utxo.lockingBytecode);
        }

        utxo.selected = true;
        accumulated += utxo.valueSatoshis;
        
        if (accumulated >= requested + fee) {
          break;
        }
      }

      setAvailableUtxos(utxos);
      setStatus('Ready');
    } catch (error) {
      showError(`Failed to load UTXOs: ${error instanceof Error ? error.message : String(error)}`);
    } finally {
      setIsProcessing(false);
    }
  }, [invitation, templateIdentifier, variables, walletController, showError, setStatus]);

  /**
   * Toggle UTXO selection.
   */
  const toggleUtxoSelection = useCallback((index: number) => {
    setAvailableUtxos(prev => {
      const updated = [...prev];
      const utxo = updated[index];
      if (utxo) {
        updated[index] = { ...utxo, selected: !utxo.selected };
      }
      return updated;
    });
  }, []);

  /**
   * Navigate to next step.
   */
  const nextStep = useCallback(async () => {
    if (currentStep >= steps.length - 1) return;

    const stepType = currentStepData?.type;

    // Handle step-specific logic
    if (stepType === 'variables') {
      // Create invitation and add variables
      await createInvitationWithVariables();
      return;
    }

    if (stepType === 'inputs') {
      // Add selected inputs and outputs to invitation
      await addInputsAndOutputs();
      return;
    }

    if (stepType === 'review') {
      // Publish invitation
      await publishInvitation();
      return;
    }

    setCurrentStep(prev => prev + 1);
    setFocusArea('content');
    setFocusedInput(0);
  }, [currentStep, steps.length, currentStepData]);

  /**
   * Create invitation and add variables.
   */
  const createInvitationWithVariables = useCallback(async () => {
    if (!templateIdentifier || !actionIdentifier || !roleIdentifier || !template) return;

    setIsProcessing(true);
    setStatus('Creating invitation...');

    try {
      // Create invitation
      const tracked = await invitationController.createInvitation(
        templateIdentifier,
        actionIdentifier,
      );

      let inv = tracked.invitation;
      const invId = inv.invitationIdentifier;
      setInvitationId(invId);

      // Add variables if any
      if (variables.length > 0) {
        const variableData = variables.map(v => {
          // Determine if this is a numeric type that should be BigInt
          // Template types include: 'integer', 'number', 'satoshis'
          // Hints include: 'satoshis', 'amount'
          const isNumeric = ['integer', 'number', 'satoshis'].includes(v.type) ||
                           (v.hint && ['satoshis', 'amount'].includes(v.hint));
          
          return {
            variableIdentifier: v.id,
            roleIdentifier: roleIdentifier,
            value: isNumeric ? BigInt(v.value || '0') : v.value,
          };
        });
        const updated = await invitationController.addVariables(invId, variableData);
        inv = updated.invitation;
      }

      // Add template-required outputs for the current role
      // This is critical - the template defines which outputs the initiator must create
      const action = template.actions?.[actionIdentifier];
      const transaction = action?.transaction ? template.transactions?.[action.transaction] : null;
      
      if (transaction?.outputs && transaction.outputs.length > 0) {
        setStatus('Adding required outputs...');
        
        // Add each required output with just its identifier
        // IMPORTANT: Do NOT pass roleIdentifier here - if roleIdentifier is set,
        // the engine skips generating the lockingBytecode (see engine.ts appendInvitation)
        // The engine will automatically generate the locking bytecode based on the template
        const outputsToAdd = transaction.outputs.map((outputId: string) => ({
          outputIdentifier: outputId,
          // Note: roleIdentifier intentionally omitted to trigger lockingBytecode generation
        }));
        
        const updated = await invitationController.addOutputs(invId, outputsToAdd);
        inv = updated.invitation;
      }

      setInvitation(inv);

      // Check if next step is inputs
      const nextStepType = steps[currentStep + 1]?.type;
      if (nextStepType === 'inputs') {
        setCurrentStep(prev => prev + 1);
        // Load UTXOs after step change
        setTimeout(() => loadAvailableUtxos(), 100);
      } else {
        setCurrentStep(prev => prev + 1);
      }

      setStatus('Invitation created');
    } catch (error) {
      showError(`Failed to create invitation: ${error instanceof Error ? error.message : String(error)}`);
    } finally {
      setIsProcessing(false);
    }
  }, [templateIdentifier, actionIdentifier, roleIdentifier, template, variables, invitationController, steps, currentStep, showError, setStatus, loadAvailableUtxos]);

  /**
   * Add selected inputs and change output to invitation.
   */
  const addInputsAndOutputs = useCallback(async () => {
    if (!invitationId || !invitation) return;

    const selectedUtxos = availableUtxos.filter(u => u.selected);
    
    if (selectedUtxos.length === 0) {
      showError('Please select at least one UTXO');
      return;
    }

    if (selectedAmount < requiredAmount + fee) {
      showError(`Insufficient funds. Need ${formatSatoshis(requiredAmount + fee)}, selected ${formatSatoshis(selectedAmount)}`);
      return;
    }

    if (changeAmount < 546n) { // Dust threshold
      showError(`Change amount (${changeAmount}) is below dust threshold (546 sats)`);
      return;
    }

    setIsProcessing(true);
    setStatus('Adding inputs and outputs...');

    try {
      // Add inputs
      const inputs = selectedUtxos.map(utxo => ({
        outpointTransactionHash: utxo.outpointTransactionHash,
        outpointIndex: utxo.outpointIndex,
      }));
      
      await invitationController.addInputs(invitationId, inputs);

      // Add change output
      const outputs = [{
        valueSatoshis: changeAmount,
        // The engine will automatically generate the locking bytecode for change
      }];
      
      await invitationController.addOutputs(invitationId, outputs);

      // Add transaction metadata
      // Note: This would be done via appendInvitation but we don't have direct access here
      // The engine should handle defaults

      setCurrentStep(prev => prev + 1);
      setStatus('Inputs and outputs added');
    } catch (error) {
      showError(`Failed to add inputs/outputs: ${error instanceof Error ? error.message : String(error)}`);
    } finally {
      setIsProcessing(false);
    }
  }, [invitationId, invitation, availableUtxos, selectedAmount, requiredAmount, fee, changeAmount, invitationController, showError, setStatus]);

  /**
   * Publish invitation.
   */
  const publishInvitation = useCallback(async () => {
    if (!invitationId) return;

    setIsProcessing(true);
    setStatus('Publishing invitation...');

    try {
      await invitationController.publishAndSubscribe(invitationId);
      setCurrentStep(prev => prev + 1);
      setStatus('Invitation published');
    } catch (error) {
      showError(`Failed to publish: ${error instanceof Error ? error.message : String(error)}`);
    } finally {
      setIsProcessing(false);
    }
  }, [invitationId, invitationController, showError, setStatus]);

  /**
   * Navigate to previous step.
   */
  const previousStep = useCallback(() => {
    if (currentStep <= 0) {
      goBack();
      return;
    }
    setCurrentStep(prev => prev - 1);
    setFocusArea('content');
    setFocusedInput(0);
  }, [currentStep, goBack]);

  /**
   * Cancel wizard.
   */
  const cancel = useCallback(() => {
    goBack();
  }, [goBack]);

  /**
   * Copy invitation ID to clipboard.
   */
  const copyId = useCallback(async () => {
    if (!invitationId) return;

    try {
      await copyToClipboard(invitationId);
      showInfo(`Copied to clipboard!\n\n${invitationId}`);
    } catch (error) {
      showError(`Failed to copy: ${error instanceof Error ? error.message : String(error)}`);
    }
  }, [invitationId, showInfo, showError]);

  /**
   * Update variable value.
   */
  const updateVariable = useCallback((index: number, value: string) => {
    setVariables(prev => {
      const updated = [...prev];
      const variable = updated[index];
      if (variable) {
        updated[index] = { ...variable, value };
      }
      return updated;
    });
  }, []);

  // Handle keyboard navigation
  useInput((input, key) => {
    // Tab to switch between content and buttons
    if (key.tab) {
      if (focusArea === 'content') {
        // Handle tab based on current step type
        if (currentStepData?.type === 'variables' && variables.length > 0) {
          if (focusedInput < variables.length - 1) {
            setFocusedInput(prev => prev + 1);
            return;
          }
        }
        if (currentStepData?.type === 'inputs' && availableUtxos.length > 0) {
          if (selectedUtxoIndex < availableUtxos.length - 1) {
            setSelectedUtxoIndex(prev => prev + 1);
            return;
          }
        }
        setFocusArea('buttons');
        setFocusedButton('next');
      } else {
        if (focusedButton === 'back') {
          setFocusedButton('cancel');
        } else if (focusedButton === 'cancel') {
          setFocusedButton('next');
        } else {
          setFocusArea('content');
          setFocusedInput(0);
          setSelectedUtxoIndex(0);
        }
      }
      return;
    }

    // Arrow keys for UTXO selection
    if (focusArea === 'content' && currentStepData?.type === 'inputs') {
      if (key.upArrow) {
        setSelectedUtxoIndex(prev => Math.max(0, prev - 1));
      } else if (key.downArrow) {
        setSelectedUtxoIndex(prev => Math.min(availableUtxos.length - 1, prev + 1));
      } else if (key.return || input === ' ') {
        toggleUtxoSelection(selectedUtxoIndex);
      }
      return;
    }

    // Arrow keys in buttons area
    if (focusArea === 'buttons') {
      if (key.leftArrow) {
        setFocusedButton(prev => 
          prev === 'next' ? 'cancel' : prev === 'cancel' ? 'back' : 'back'
        );
      } else if (key.rightArrow) {
        setFocusedButton(prev => 
          prev === 'back' ? 'cancel' : prev === 'cancel' ? 'next' : 'next'
        );
      }
    }

    // Enter on buttons
    if (key.return && focusArea === 'buttons') {
      if (focusedButton === 'back') previousStep();
      else if (focusedButton === 'cancel') cancel();
      else if (focusedButton === 'next') nextStep();
    }

    // 'c' to copy on publish step
    if (input === 'c' && currentStepData?.type === 'publish' && invitationId) {
      copyId();
    }

    // 'a' to select all UTXOs
    if (input === 'a' && currentStepData?.type === 'inputs') {
      setAvailableUtxos(prev => prev.map(u => ({ ...u, selected: true })));
    }

    // 'n' to deselect all UTXOs
    if (input === 'n' && currentStepData?.type === 'inputs') {
      setAvailableUtxos(prev => prev.map(u => ({ ...u, selected: false })));
    }
  });

  // Get action details
  const action = template?.actions?.[actionIdentifier ?? ''];
  const actionName = action?.name || actionIdentifier || 'Unknown';

  // Render step content
  const renderStepContent = () => {
    if (!currentStepData) return null;

    switch (currentStepData.type) {
      case 'info':
        return (
          <Box flexDirection="column">
            <Text color={colors.primary} bold>Action: {actionName}</Text>
            <Text color={colors.textMuted}>{action?.description || 'No description'}</Text>
            <Box marginTop={1}>
              <Text color={colors.text}>Your Role: </Text>
              <Text color={colors.accent}>{roleIdentifier}</Text>
            </Box>
            
            {action?.roles?.[roleIdentifier ?? '']?.requirements && (
              <Box marginTop={1} flexDirection="column">
                <Text color={colors.text}>Requirements:</Text>
                {action.roles[roleIdentifier ?? '']?.requirements?.variables?.map(v => (
                  <Text key={v} color={colors.textMuted}>  • Variable: {v}</Text>
                ))}
                {action.roles[roleIdentifier ?? '']?.requirements?.slots && (
                  <Text color={colors.textMuted}>  • Slots: {action.roles[roleIdentifier ?? '']?.requirements?.slots?.min} min (UTXO selection required)</Text>
                )}
              </Box>
            )}
          </Box>
        );

      case 'variables':
        return (
          <Box flexDirection="column">
            <Text color={colors.text} bold>Enter required values:</Text>
            <Box marginTop={1} flexDirection="column">
              {variables.map((variable, index) => (
                <Box key={variable.id} flexDirection="column" marginBottom={1}>
                  <Text color={colors.primary}>{variable.name}</Text>
                  {variable.hint && (
                    <Text color={colors.textMuted} dimColor>({variable.hint})</Text>
                  )}
                  <Box
                    borderStyle="single"
                    borderColor={focusArea === 'content' && focusedInput === index ? colors.focus : colors.border}
                    paddingX={1}
                    marginTop={1}
                  >
                    <TextInput
                      value={variable.value}
                      onChange={value => updateVariable(index, value)}
                      focus={focusArea === 'content' && focusedInput === index}
                      placeholder={`Enter ${variable.name}...`}
                    />
                  </Box>
                </Box>
              ))}
            </Box>
          </Box>
        );

      case 'inputs':
        return (
          <Box flexDirection="column">
            <Text color={colors.text} bold>Select UTXOs to fund the transaction:</Text>
            
            <Box marginTop={1} flexDirection="column">
              <Text color={colors.textMuted}>
                Required: {formatSatoshis(requiredAmount)} + {formatSatoshis(fee)} fee
              </Text>
              <Text color={selectedAmount >= requiredAmount + fee ? colors.success : colors.warning}>
                Selected: {formatSatoshis(selectedAmount)}
              </Text>
              {selectedAmount > requiredAmount + fee && (
                <Text color={colors.info}>
                  Change: {formatSatoshis(changeAmount)}
                </Text>
              )}
            </Box>

            <Box marginTop={1} flexDirection="column" borderStyle="single" borderColor={colors.border} paddingX={1}>
              {availableUtxos.length === 0 ? (
                <Text color={colors.textMuted}>No UTXOs available</Text>
              ) : (
                availableUtxos.map((utxo, index) => (
                  <Box key={`${utxo.outpointTransactionHash}:${utxo.outpointIndex}`}>
                    <Text
                      color={selectedUtxoIndex === index && focusArea === 'content' ? colors.focus : colors.text}
                      bold={selectedUtxoIndex === index && focusArea === 'content'}
                    >
                      {selectedUtxoIndex === index && focusArea === 'content' ? '▸ ' : '  '}
                      [{utxo.selected ? 'X' : ' '}] {formatSatoshis(utxo.valueSatoshis)} - {formatHex(utxo.outpointTransactionHash, 12)}:{utxo.outpointIndex}
                    </Text>
                  </Box>
                ))
              )}
            </Box>

            <Box marginTop={1}>
              <Text color={colors.textMuted} dimColor>
                Space/Enter: Toggle • a: Select all • n: Deselect all
              </Text>
            </Box>
          </Box>
        );

      case 'review':
        const selectedUtxos = availableUtxos.filter(u => u.selected);
        return (
          <Box flexDirection="column">
            <Text color={colors.text} bold>Review your invitation:</Text>
            
            <Box marginTop={1} flexDirection="column">
              <Text color={colors.textMuted}>Template: {template?.name}</Text>
              <Text color={colors.textMuted}>Action: {actionName}</Text>
              <Text color={colors.textMuted}>Role: {roleIdentifier}</Text>
            </Box>
            
            {variables.length > 0 && (
              <Box marginTop={1} flexDirection="column">
                <Text color={colors.text}>Variables:</Text>
                {variables.map(v => (
                  <Text key={v.id} color={colors.textMuted}>
                    {'  '}{v.name}: {v.value || '(empty)'}
                  </Text>
                ))}
              </Box>
            )}

            {selectedUtxos.length > 0 && (
              <Box marginTop={1} flexDirection="column">
                <Text color={colors.text}>Inputs ({selectedUtxos.length}):</Text>
                {selectedUtxos.slice(0, 3).map(u => (
                  <Text key={`${u.outpointTransactionHash}:${u.outpointIndex}`} color={colors.textMuted}>
                    {'  '}{formatSatoshis(u.valueSatoshis)}
                  </Text>
                ))}
                {selectedUtxos.length > 3 && (
                  <Text color={colors.textMuted}>  ...and {selectedUtxos.length - 3} more</Text>
                )}
              </Box>
            )}

            {changeAmount > 0 && (
              <Box marginTop={1} flexDirection="column">
                <Text color={colors.text}>Outputs:</Text>
                <Text color={colors.textMuted}>  Change: {formatSatoshis(changeAmount)}</Text>
              </Box>
            )}
            
            <Box marginTop={1}>
              <Text color={colors.warning}>
                Press Next to create and publish the invitation.
              </Text>
            </Box>
          </Box>
        );

      case 'publish':
        return (
          <Box flexDirection="column">
            <Text color={colors.success} bold>✓ Invitation Created & Published!</Text>
            <Box marginTop={1} flexDirection="column">
              <Text color={colors.text}>Invitation ID:</Text>
              <Box 
                borderStyle="single" 
                borderColor={colors.primary}
                paddingX={1}
                marginTop={1}
              >
                <Text color={colors.accent}>{invitationId}</Text>
              </Box>
            </Box>
            
            <Box marginTop={1}>
              <Text color={colors.textMuted}>
                Share this ID with the other party to complete the transaction.
              </Text>
            </Box>
            
            <Box marginTop={1}>
              <Text color={colors.warning}>Press 'c' to copy ID to clipboard</Text>
            </Box>
          </Box>
        );

      default:
        return null;
    }
  };

  // Convert steps to StepIndicator format
  const stepIndicatorSteps: Step[] = steps.map(s => ({ label: s.name }));

  return (
    <Box flexDirection="column" flexGrow={1}>
      {/* Header */}
      <Box borderStyle="single" borderColor={colors.secondary} paddingX={1} flexDirection="column">
        <Text color={colors.primary} bold>{logoSmall} - Action Wizard</Text>
        <Text color={colors.textMuted}>
          {template?.name} {'>'} {actionName} (as {roleIdentifier})
        </Text>
      </Box>

      {/* Progress indicator */}
      <Box marginTop={1} paddingX={1}>
        <StepIndicator steps={stepIndicatorSteps} currentStep={currentStep} />
      </Box>

      {/* Content area */}
      <Box
        borderStyle="single"
        borderColor={focusArea === 'content' ? colors.focus : colors.primary}
        flexDirection="column"
        paddingX={1}
        paddingY={1}
        marginTop={1}
        marginX={1}
        flexGrow={1}
      >
        <Text color={colors.primary} bold>
          {' '}{currentStepData?.name} ({currentStep + 1}/{steps.length}){' '}
        </Text>
        <Box marginTop={1}>
          {isProcessing ? (
            <Text color={colors.info}>Processing...</Text>
          ) : (
            renderStepContent()
          )}
        </Box>
      </Box>

      {/* Buttons */}
      <Box marginTop={1} marginX={1} justifyContent="space-between">
        <Box gap={1}>
          <Button 
            label="Back" 
            focused={focusArea === 'buttons' && focusedButton === 'back'}
            disabled={currentStepData?.type === 'publish'}
          />
          <Button 
            label="Cancel" 
            focused={focusArea === 'buttons' && focusedButton === 'cancel'}
          />
        </Box>
        <Button 
          label={currentStepData?.type === 'publish' ? 'Done' : 'Next'}
          focused={focusArea === 'buttons' && focusedButton === 'next'}
          disabled={isProcessing}
        />
      </Box>

      {/* Help text */}
      <Box marginTop={1} marginX={1}>
        <Text color={colors.textMuted} dimColor>
          Tab: Navigate • Enter: Select • Esc: Back
          {currentStepData?.type === 'publish' ? ' • c: Copy ID' : ''}
        </Text>
      </Box>
    </Box>
  );
}