import { type ReactNode } from 'react';
import { Box, Byline, KeyboardShortcutHint } from '@anthropic/ink';
import { ConfigurableShortcutHint } from '../../../ConfigurableShortcutHint.js';
import { Select } from '../../../CustomSelect/select.js';
import { useWizard } from '../../../wizard/index.js';
import { WizardDialogLayout } from '../../../wizard/WizardDialogLayout.js';
import type { AgentWizardData } from '../types.js';

export function MethodStep(): ReactNode {
  const { goNext, goBack, updateWizardData, goToStep } = useWizard<AgentWizardData>();

  const methodOptions = [
    {
      label: 'Generate with Claude (recommended)',
      value: 'generate',
    },
    {
      label: 'Manual configuration',
      value: 'manual',
    },
  ];

  return (
    <WizardDialogLayout
      subtitle="Creation method"
      footerText={
        <Byline>
          <KeyboardShortcutHint shortcut="↑↓" action="navigate" />
          <KeyboardShortcutHint shortcut="Enter" action="select" />
          <ConfigurableShortcutHint action="confirm:no" context="Confirmation" fallback="Esc" description="go back" />
        </Byline>
      }
    >
      <Box>
        <Select
          key="method-select"
          options={methodOptions}
          onChange={(value: string) => {
            const method = value as 'generate' | 'manual';
            updateWizardData({
              method,
              wasGenerated: method === 'generate',
            });

            // Dynamic navigation based on method
            if (method === 'generate') {
              goNext(); // Go to GenerateStep (index 2)
            } else {
              goToStep(3); // Skip to TypeStep (index 3)
            }
          }}
          onCancel={() => goBack()}
        />
      </Box>
    </WizardDialogLayout>
  );
}