StepEditor.tsx

import React, { useEffect, useState } from 'react';
import { CATEGORIZED_ACTIONS, THEMES } from '../../types/demo';
import { getFieldsForAction, getRequiredFields } from '../../utils/actionHelpers';
import { validateStep } from '../../utils/validation';
import { SearchableDropdown } from '../ui/SearchableDropdown';
import { ComboBox } from '../ui/ComboBox';
import { PathInput } from '../ui/PathInput';
import { messageHandler } from '@estruyf/vscode/dist/client';
import { Switch } from '../ui/Switch';
import { SnippetArguments } from './SnippetArguments';
import { DemoIdPicker } from '../ui/DemoIdPicker';
import { Action, COMMAND, EngageTimeMessageType, Step, WebViewMessages } from '@demotime/common';
import { PollIdPicker } from './PollIdPicker';
import { useDemoConfigContext } from '../../hooks';
import { VSCodeCommandPicker } from './VSCodeCommandPicker';
import { InsertTypingModePicker } from '../ui/InsertTypingModePicker';
import { SettingField } from './SettingField';
import { StateField } from './StateField';
import { NoteBox } from '../ui/NoteBox';
import { KeybindingPicker } from './KeybindingPicker';

interface StepEditorProps {
  step: Step;
  onChange: (step: Step) => void;
}

export const StepEditor: React.FC<StepEditorProps> = ({ step, onChange }) => {
  // Local state for id field (ExecuteScript only)
  const [localId, setLocalId] = React.useState(step.id || '');
  React.useEffect(() => {
    setLocalId(step.id || '');
  }, [step.id]);

  const commitId = () => {
    if (localId !== step.id) {
      handleChange('id', localId || undefined);
    }
  };
  const availableFields = getFieldsForAction(step?.action);
  const requiredFields = getRequiredFields(step?.action);
  const stepValidation = validateStep(step);
  const { config } = useDemoConfigContext();

  // State for fetched themes
  const [fetchedThemes, setFetchedThemes] = useState<string[]>([]);
  const [loadingThemes, setLoadingThemes] = useState(false);
  const [themeError, setThemeError] = useState<string | null>(null);

  // State for available snippet files (used in contentPath suggestions)
  const [snippetSuggestions, setSnippetSuggestions] = useState<{ label: string; path: string; description?: string }[]>([]);
  const [loadingSnippetSuggestions, setLoadingSnippetSuggestions] = useState(false);

  useEffect(() => {
    setLoadingSnippetSuggestions(true);
    messageHandler
      .request<{ label: string; path: string; description?: string }[]>(
        WebViewMessages.toVscode.configEditor.listSnippets,
      )
      .then((data) => {
        setSnippetSuggestions(Array.isArray(data) ? data : []);
      })
      .catch(() => setSnippetSuggestions([]))
      .finally(() => setLoadingSnippetSuggestions(false));
  }, []);

  useEffect(() => {
    const fetchThemes = async () => {
      setLoadingThemes(true);
      setThemeError(null);
      try {
        messageHandler.request<string[]>(WebViewMessages.toVscode.configEditor.getThemes).then((data) => {
          setFetchedThemes(Array.isArray(data) ? data : THEMES);
        });
      } catch (err) {
        console.log('Error fetching themes:', (err as Error).message);
        setFetchedThemes(THEMES);
      } finally {
        setLoadingThemes(false);
      }
    };
    fetchThemes();
  }, []);

  // Parse position into separate fields
  const parsePosition = (position?: string | number) => {
    if (!position) { return { startLine: '', startChar: '', endLine: '', endChar: '' }; }

    const pos = position.toString().trim();

    // Handle special cases
    if (pos === 'start' || pos === 'end') {
      return { startLine: pos, startChar: '', endLine: '', endChar: '' };
    }

    // Handle full range: "10,5:20,10"
    const fullRangeMatch = pos.match(/^(\d+),(\d+):(\d+),(\d+)$/);
    if (fullRangeMatch) {
      return {
        startLine: fullRangeMatch[1],
        startChar: fullRangeMatch[2],
        endLine: fullRangeMatch[3],
        endChar: fullRangeMatch[4]
      };
    }

    // Handle line range: "10:20"
    const lineRangeMatch = pos.match(/^(\d+):(\d+)$/);
    if (lineRangeMatch) {
      return {
        startLine: lineRangeMatch[1],
        startChar: '',
        endLine: lineRangeMatch[2],
        endChar: ''
      };
    }

    // Handle line,character: "10,5"
    const lineCharMatch = pos.match(/^(\d+),(\d+)$/);
    if (lineCharMatch) {
      return {
        startLine: lineCharMatch[1],
        startChar: lineCharMatch[2],
        endLine: '',
        endChar: ''
      };
    }

    // Handle single line: "10"
    if (/^\d+$/.test(pos)) {
      return {
        startLine: pos,
        startChar: '',
        endLine: '',
        endChar: ''
      };
    }

    return { startLine: pos, startChar: '', endLine: '', endChar: '' };
  };

  // Combine position fields into position string
  const combinePosition = (startLine: string, startChar: string, endLine: string, endChar: string): string | undefined => {
    if (!startLine.trim()) { return undefined; }

    const start = startLine.trim();
    const startC = startChar.trim();
    const end = endLine.trim();
    const endC = endChar.trim();

    // Handle special cases
    if (start === 'start' || start === 'end') {
      return start;
    }

    // Build position string based on what's filled
    if (end && endC) {
      // Full range: "10,5:20,10"
      return `${start},${startC || '0'}:${end},${endC}`;
    } else if (end) {
      // Line range: "10:20"
      return `${start}:${end}`;
    } else if (startC) {
      // Line,character: "10,5"
      return `${start},${startC}`;
    } else {
      // Single line: "10"
      return start;
    }
  };

  // Validate position ranges
  const validatePositionRange = (startLine: string, startChar: string, endLine: string, endChar: string): string | null => {
    if (!startLine.trim()) { return null; }

    const start = startLine.trim();
    const startC = startChar.trim();
    const end = endLine.trim();
    const endC = endChar.trim();

    // Skip validation for special cases
    if (start === 'start' || start === 'end') { return null; }

    // Validate that all values are numbers when provided
    if (!/^\d+$/.test(start)) { return 'Start line must be a number'; }
    if (startC && !/^\d+$/.test(startC)) { return 'Start character must be a number'; }
    if (end && !/^\d+$/.test(end)) { return 'End line must be a number'; }
    if (endC && !/^\d+$/.test(endC)) { return 'End character must be a number'; }

    if (end) {
      const startLineNum = parseInt(start);
      const endLineNum = parseInt(end);

      if (endLineNum < startLineNum) {
        return 'End line cannot be lower than start line';
      }

      if (startC && endC && startLineNum === endLineNum) {
        const startCharNum = parseInt(startC);
        const endCharNum = parseInt(endC);

        if (endCharNum < startCharNum) {
          return 'End character cannot be lower than start character on the same line';
        }
      }
    }

    return null;
  };

  const handleChange = <K extends keyof Step>(field: K, value: Step[K]) => {
    const newStep = { ...step };
    if (value === '' || value === undefined) {
      delete newStep[field];
    } else {
      newStep[field] = value;
    }

    // Special logic for highlightWholeLine based on position
    if (field === 'position' && typeof value === 'string') {
      // Full range: "10,5:20,10"
      const fullRangeMatch = value.match(/^(\d+),(\d+):(\d+),(\d+)$/);
      if (fullRangeMatch) {
        newStep.highlightWholeLine = false;
      } else if (typeof newStep.highlightWholeLine === 'undefined') {
        // If not a full range and highlightWholeLine is undefined, default to true
        newStep.highlightWholeLine = true;
      }
    }

    onChange(newStep);
  };

  const handleSettingChange = (key: string, value: string | number | boolean | object | null | undefined) => {
    handleChange('setting', { key, value: value === undefined ? null : value });
  };

  const handleStateChange = (key: string, value?: string) => {
    const k = (key || '').trim();
    const v = value === undefined ? undefined : value;

    // If both key and value are empty/undefined, remove the state entirely
    if (!k && v === undefined) {
      handleChange('state', undefined);
      return;
    }

    // Otherwise ensure we set the state object; default missing value to empty string to preserve previous behavior
    handleChange('state', { key: k, value: v ?? '' });
  };

  // Keep EngageTime poll toggles mutually exclusive in a single update
  const handleExclusivePollToggle = (field: 'startOnOpen' | 'closeOnOpen', checked: boolean) => {
    const opposite = field === 'startOnOpen' ? 'closeOnOpen' : 'startOnOpen';
    const updatedStep: Step = { ...step, [field]: checked } as Step;

    if (checked) {
      updatedStep[opposite] = false;
    }

    onChange(updatedStep);
  };

  // Handle position field changes
  const handlePositionChange = (field: 'startLine' | 'startChar' | 'endLine' | 'endChar', value: string) => {
    const currentPos = parsePosition(step.position);
    const newPos = { ...currentPos, [field]: value };
    const combinedPosition = combinePosition(newPos.startLine, newPos.startChar, newPos.endLine, newPos.endChar);
    handleChange('position', combinedPosition);
  };

  const getQrFieldsForLayout = (layout: Step['qrLayout']): string[] => {
    switch (layout) {
      case 'minimal': return ['qrLayout', 'url'];
      case 'stacked':
      case 'text-left':
      case 'text-right': return ['qrLayout', 'url', 'topText', 'title', 'description'];
      default: return ['qrLayout', 'url', 'topText', 'title', 'description', 'logo'];
    }
  };

  const renderField = (field: string) => {
    if (step.action === Action.ShowQR && field !== 'action') {
      const allowedQrFields = getQrFieldsForLayout(step.qrLayout);
      if (!allowedQrFields.includes(field)) {
        return null;
      }
    }

    const isRequired = requiredFields.includes(field);
    const fieldErrors = stepValidation.errors.filter(error => error.field === field || error[`field:${field}`] !== undefined);
    const hasError = fieldErrors.length > 0;
    let label = field.charAt(0).toUpperCase() + field.slice(1).replace(/([A-Z])/g, ' $1');

    if (field === "slide") {
      label = "Slide Number (1-based index)";
    } else if (field === 'timeout') {
      label = "Timeout (ms)";
    } else if (field === 'zoom') {
      label = "Zoom Level (times to use VS Code zoom)";
    } else if (field === 'insertTypingSpeed') {
      label = "Insert Typing Speed (ms)";
    } else if (field === 'highlightBlur') {
      label = "Highlight Blur (0-10px)";
    } else if (field === 'highlightOpacity') {
      label = "Highlight Opacity (0-1)";
    } else if (step.action === Action.RunDemoById) {
      label = "Scene ID";
    } else if (step.action === Action.ExecuteScript && field === 'id') {
      label = "Script ID";
    } else if (field === 'openInVSCode') {
      label = 'Open in VS Code';
    } else if (field === 'startOnOpen') {
      label = 'Start the poll when opening it';
    } else if (field === 'closeOnOpen') {
      label = 'Close the poll when opening it';
    } else if (field === 'pollDarkTheme') {
      label = 'Use dark theme';
    } else if (field === 'pollControls') {
      label = 'Show poll controls';
    }

    switch (field) {
      case 'action':
        return (
          <div key={field}>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Action {isRequired && <span className="text-red-500">*</span>}
            </label>
            <SearchableDropdown
              value={step.action}
              options={CATEGORIZED_ACTIONS}
              onChange={(value) => handleChange('action', value as Action)}
              placeholder="Select action..."
              autoFocus={!step.action}
            />

            {
              step.action && step.action.toLowerCase().includes('engagetime') && (
                <>
                  <NoteBox variant="warning" className="mt-2 space-y-1">
                    <>
                      <strong>Note:</strong> Make sure to set the EngageTime Session ID in the demo configuration.
                      <button
                        type="button"
                        className="bg-transparent p-0 m-0 border-none underline decoration-dotted hover:decoration-solid text-blue-700 dark:text-blue-300 cursor-pointer"
                        style={{ font: 'inherit' }}
                        onClick={(e) => {
                          e.preventDefault();
                          window.dispatchEvent(new CustomEvent('engagetime:open-config', {}));
                        }}
                      >
                        Open EngageTime Config
                      </button>
                    </>
                  </NoteBox>
                  {config.engageTime?.sessionId ? null : (
                    <NoteBox variant="error" className="mt-2">
                      <strong>Error:</strong> No EngageTime Session ID is set in the demo configuration.
                    </NoteBox>
                  )}
                </>
              )
            }
          </div>
        );

      case 'theme':
        return (
          <div key={field}>
            <ComboBox
              label="Theme"
              required={isRequired}
              value={step.theme || ''}
              onChange={(value) => handleChange('theme', value || undefined)}
              options={loadingThemes ? THEMES : (fetchedThemes.length > 0 ? fetchedThemes : THEMES)}
              placeholder={loadingThemes ? 'Loading themes...' : 'Select or enter custom theme'}
              error={themeError || (fieldErrors.length > 0 ? fieldErrors[0].message : undefined)}
            />
            {themeError && (
              <p className="text-sm text-red-600 dark:text-red-400 mt-1">{themeError}</p>
            )}
          </div>
        );

      case 'pollId':
        return (
          <div key={field}>
            <PollIdPicker
              label="Poll ID"
              required={isRequired}
              sessionId={config.engageTime?.sessionId || ''}
              value={step.pollId || ''}
              onChange={(value) => handleChange('pollId', value || undefined)}
              error={fieldErrors.length > 0 ? fieldErrors[0].message : undefined}
            />
          </div>
        );

      case 'type':
        return (
          <div key={field}>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              {label} {isRequired && <span className="text-red-500">*</span>}
            </label>
            <SearchableDropdown
              value={step[field] || ''}
              options={["demo", "slide", "custom"] as EngageTimeMessageType[]}
              onChange={(value) => handleChange(field, value as typeof step.type)}
              placeholder="Select type..."
            />
          </div>
        );

      case 'qrLayout':
        return (
          <div key={field}>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              QR Layout {isRequired && <span className="text-red-500">*</span>}
            </label>
            <SearchableDropdown
              value={step.qrLayout || 'default'}
              options={['default', 'reversed', 'minimal', 'stacked', 'text-left', 'text-right']}
              onChange={(value) => handleChange('qrLayout', value as Step['qrLayout'])}
              placeholder="Select QR layout..."
            />
          </div>
        );

      case 'insertTypingMode':
        return (
          <InsertTypingModePicker
            key={field}
            value={step.insertTypingMode}
            action={step.action}
            required={isRequired}
            fieldErrors={fieldErrors}
            onChange={(value) => handleChange('insertTypingMode', value)}
          />
        );

      case 'highlightWholeLine': {
        // Disable the field if position is a full range (start line/char:end line/char)
        const pos = step.position?.toString() || '';
        const isFullRange = /^\d+,\d+:\d+,\d+$/.test(pos);
        return (
          <div key={field}>
            <label className="h-full flex items-center space-x-2">
              <input
                type="checkbox"
                checked={typeof step[field] === 'undefined' ? true : step[field]}
                onChange={(e) => handleChange(field, e.target.checked)}
                className="rounded-sm border-gray-300 text-blue-600 focus:ring-blue-500"
                disabled={isFullRange}
              />
              <span className="text-sm font-medium text-gray-600 dark:text-gray-300">
                {label} {isRequired && <span className="text-red-500">*</span>}
                {isFullRange && (
                  <span className="ml-2 text-xs text-gray-400">(Disabled for full range position)</span>
                )}
              </span>
            </label>
          </div>
        );
      }

      case 'focusTop':
      case 'overwrite':
      case 'openInVSCode':
      case 'autoExecute':
      case 'showProgress':
        return (
          <div key={field}>
            <label className="h-full flex items-center space-x-2">
              <input
                type="checkbox"
                checked={typeof step[field] === 'undefined' ? true : step[field]}
                onChange={(e) => handleChange(field, e.target.checked)}
                className="rounded-sm border-gray-300 text-blue-600 focus:ring-blue-500"
              />
              <span className="text-sm font-medium text-gray-600 dark:text-gray-300">
                {label} {isRequired && <span className="text-red-500">*</span>}
              </span>
            </label>
          </div>
        );

      case 'startOnOpen':
        return (
          <div key={field}>
            <label className="h-full flex items-center space-x-2">
              <input
                type="checkbox"
                checked={typeof step[field] === 'undefined' ? false : step[field]}
                onChange={(e) => handleExclusivePollToggle('startOnOpen', e.target.checked)}
                className="rounded-sm border-gray-300 text-blue-600 focus:ring-blue-500"
              />
              <span className="text-sm font-medium text-gray-600 dark:text-gray-300">
                {label} {isRequired && <span className="text-red-500">*</span>}
              </span>
            </label>
          </div>
        );

      case 'closeOnOpen':
        return (
          <div key={field}>
            <label className="h-full flex items-center space-x-2">
              <input
                type="checkbox"
                checked={typeof step[field] === 'undefined' ? false : step[field]}
                onChange={(e) => handleExclusivePollToggle('closeOnOpen', e.target.checked)}
                className="rounded-sm border-gray-300 text-blue-600 focus:ring-blue-500"
              />
              <span className="text-sm font-medium text-gray-600 dark:text-gray-300">
                {label} {isRequired && <span className="text-red-500">*</span>}
              </span>
            </label>
          </div>
        );

      case 'pollDarkTheme':
        return (
          <div key={field}>
            <label className="h-full flex items-center space-x-2">
              <input
                type="checkbox"
                checked={typeof step.pollDarkTheme === 'undefined' ? false : step.pollDarkTheme}
                onChange={(e) => handleChange('pollDarkTheme', e.target.checked)}
                className="rounded-sm border-gray-300 text-blue-600 focus:ring-blue-500"
              />
              <span className="text-sm font-medium text-gray-600 dark:text-gray-300">
                {label} {isRequired && <span className="text-red-500">*</span>}
              </span>
            </label>
          </div>
        );

      case 'pollControls':
        return (
          <div key={field}>
            <label className="h-full flex items-center space-x-2">
              <input
                type="checkbox"
                checked={typeof step.pollControls === 'undefined' ? true : step.pollControls}
                onChange={(e) => handleChange('pollControls', e.target.checked)}
                className="rounded-sm border-gray-300 text-blue-600 focus:ring-blue-500"
              />
              <span className="text-sm font-medium text-gray-600 dark:text-gray-300">
                {label} {isRequired && <span className="text-red-500">*</span>}
              </span>
            </label>
          </div>
        );

      case 'timeout':
      case 'zoom':
      case 'insertTypingSpeed':
      case 'slide':
        return (
          <div key={field}>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              {label} {isRequired && <span className="text-red-500">*</span>}
            </label>
            <input
              type="number"
              value={typeof step[field] !== 'undefined' ? step[field] : ''}
              onChange={(e) => handleChange(field, e.target.value ? parseInt(e.target.value) : undefined)}
              className={`w-full px-3 py-2 border rounded-md focus:outline-hidden focus:ring-2 focus:ring-demo-time-accent focus:border-demo-time-accent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 ${hasError ? 'border-red-300 bg-red-50 dark:border-red-400 dark:bg-red-900/20' : 'border-gray-300 dark:border-gray-600'
                }`}
              placeholder={`Enter ${label.toLowerCase()}`}
              min={0}
            />
            {fieldErrors.map((error, index) => (
              <p key={index} className="text-sm text-red-600 dark:text-red-400 mt-1">{error.message}</p>
            ))}
          </div>
        );

      case 'highlightBlur':
        return (
          <div key={field}>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              {label} {isRequired && <span className="text-red-500">*</span>}
            </label>
            <input
              type="number"
              value={typeof step[field] !== 'undefined' ? step[field] : ''}
              onChange={(e) => handleChange(field, e.target.value ? parseFloat(e.target.value) : undefined)}
              className={`w-full px-3 py-2 border rounded-md focus:outline-hidden focus:ring-2 focus:ring-demo-time-accent focus:border-demo-time-accent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 ${hasError ? 'border-red-300 bg-red-50 dark:border-red-400 dark:bg-red-900/20' : 'border-gray-300 dark:border-gray-600'
                }`}
              placeholder="Enter blur value (0-10)"
              min={0}
              max={10}
              step={1}
            />
            {fieldErrors.map((error, index) => (
              <p key={index} className="text-sm text-red-600 dark:text-red-400 mt-1">{error.message}</p>
            ))}
          </div>
        );

      case 'highlightOpacity':
        return (
          <div key={field}>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              {label} {isRequired && <span className="text-red-500">*</span>}
            </label>
            <input
              type="number"
              value={typeof step[field] !== 'undefined' ? step[field] : ''}
              onChange={(e) => handleChange(field, e.target.value ? parseFloat(e.target.value) : undefined)}
              className={`w-full px-3 py-2 border rounded-md focus:outline-hidden focus:ring-2 focus:ring-demo-time-accent focus:border-demo-time-accent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 ${hasError ? 'border-red-300 bg-red-50 dark:border-red-400 dark:bg-red-900/20' : 'border-gray-300 dark:border-gray-600'
                }`}
              placeholder="Enter opacity value (0-1)"
              min={0}
              max={1}
              step={0.05}
            />
            {fieldErrors.map((error, index) => (
              <p key={index} className="text-sm text-red-600 dark:text-red-400 mt-1">{error.message}</p>
            ))}
          </div>
        );

      case 'content':
      case 'message':
        return (
          <div key={field}>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              {label} {isRequired && <span className="text-red-500">*</span>}
            </label>
            <textarea
              value={step[field] || ''}
              onChange={(e) => handleChange(field, e.target.value || undefined)}
              rows={3}
              className={`w-full px-3 py-2 border rounded-md focus:outline-hidden focus:ring-2 focus:ring-demo-time-accent focus:border-demo-time-accent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 ${hasError ? 'border-red-300 bg-red-50 dark:border-red-400 dark:bg-red-900/20' : 'border-gray-300 dark:border-gray-600'
                }`}
              placeholder={`Enter ${label.toLowerCase()}`}
            />
            {fieldErrors.map((error, index) => (
              <p key={index} className="text-sm text-red-600 dark:text-red-400 mt-1">{error.message}</p>
            ))}
          </div>
        );

      case 'setting':
        return (
          <div key={field}>
            <SettingField
              setting={step.setting}
              onChange={handleSettingChange}
              fieldErrors={fieldErrors}
              isRequired={isRequired}
            />
          </div>
        );

      case 'state':
        return (
          <div key={field}>
            <StateField
              state={step.state}
              onChange={handleStateChange}
              fieldErrors={fieldErrors}
              isRequired={isRequired}
            />
          </div>
        );

      case 'keybinding':
        return (
          <div key={field}>
            <KeybindingPicker
              value={step.keybinding || ''}
              onChange={(value) => handleChange('keybinding', value || undefined)}
              required={isRequired}
              error={fieldErrors.length > 0 ? fieldErrors[0].message : undefined}
            />
          </div>
        );

      case 'args':
        return (
          <div key={field} className='col-span-1 md:col-span-2'>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Arguments {isRequired && <span className="text-red-500">*</span>}
              {step.action !== 'snippet' && (
                <span className="text-xs text-gray-600 dark:text-gray-400 block mt-1">
                  For VS Code commands: JSON object/array. For scripts: positional args array
                </span>
              )}
            </label>
            {step.action === 'snippet' && step.contentPath ? (
              <SnippetArguments
                path={step.contentPath}
                args={typeof step.args === 'object' && step.args !== null ? step.args : undefined}
                onChange={(newArgs) => handleChange('args', newArgs)}
              />
            ) : (
              <textarea
                value={typeof step.args === 'string' ? step.args : JSON.stringify(step.args, null, 2)}
                onChange={(e) => {
                  try {
                    const parsed = JSON.parse(e.target.value);
                    handleChange('args', parsed);
                  } catch {
                    handleChange('args', e.target.value);
                  }
                }}
                rows={3}
                className={`w-full px-3 py-2 border rounded-md focus:outline-hidden focus:ring-2 focus:ring-demo-time-accent focus:border-demo-time-accent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 ${hasError ? 'border-red-300 bg-red-50 dark:border-red-400 dark:bg-red-900/20' : 'border-gray-300 dark:border-gray-600'
                  }`}
                placeholder="Enter arguments (JSON or string)"
              />
            )}
            {fieldErrors.map((error, index) => (
              <p key={index} className="text-sm text-red-600 dark:text-red-400 mt-1">{error.message}</p>
            ))}
          </div>
        );

      case 'waitForMessage':
        return (
          <div key={field}>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Wait For Message
              <span className="text-xs text-gray-600 dark:text-gray-400 block mt-1">
                Optional: wait until stdout contains this string before advancing
              </span>
            </label>
            <input
              type="text"
              value={step.waitForMessage || ''}
              onChange={(e) => handleChange('waitForMessage', e.target.value || undefined)}
              className={`w-full px-3 py-2 border rounded-md focus:outline-hidden focus:ring-2 focus:ring-demo-time-accent focus:border-demo-time-accent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 ${hasError ? 'border-red-300 bg-red-50 dark:border-red-400 dark:bg-red-900/20' : 'border-gray-300 dark:border-gray-600'}`}
              placeholder="e.g. done"
            />
            {fieldErrors.map((error, index) => (
              <p key={index} className="text-sm text-red-600 dark:text-red-400 mt-1">{error.message}</p>
            ))}
          </div>
        );

      case 'command': {
        // Different placeholders based on action type
        const commandPlaceholder = step.action === 'executeTerminalCommand'
          ? 'Enter terminal command (e.g., npm install)'
          : step.action === 'executeScript'
            ? 'Enter script command (e.g., node, bash, python)'
            : step.action === 'executeVSCodeCommand'
              ? 'Enter VS Code command ID (e.g., workbench.action.files.save)'
              : 'Enter command';

        return (
          <div key={field}>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Command {isRequired && <span className="text-red-500">*</span>}
            </label>
            {
              step.action === 'executeVSCodeCommand' ? (
                <VSCodeCommandPicker
                  value={step.command || ''}
                  onChange={(value) => handleChange('command', value || undefined)}
                  placeholder={commandPlaceholder}
                  error={fieldErrors.length > 0 ? fieldErrors[0].message : undefined}
                />
              ) : (
                <>
                  <input
                    type="text"
                    value={step[field] || ''}
                    onChange={(e) => handleChange(field, e.target.value || undefined)}
                    className={`w-full px-3 py-2 border rounded-md focus:outline-hidden focus:ring-2 focus:ring-demo-time-accent focus:border-demo-time-accent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 ${hasError ? 'border-red-300 bg-red-50 dark:border-red-400 dark:bg-red-900/20' : 'border-gray-300 dark:border-gray-600'
                      }`}
                    placeholder={commandPlaceholder}
                  />
                  {fieldErrors.map((error, index) => (
                    <p key={index} className="text-sm text-red-600 dark:text-red-400 mt-1">{error.message}</p>
                  ))}
                </>
              )
            }
          </div>
        );
      }

      case 'position': {
        const positionFields = parsePosition(step.position);
        const positionError = validatePositionRange(positionFields.startLine, positionFields.startChar, positionFields.endLine, positionFields.endChar);

        return (
          <div key={field} className="space-y-2">
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Position {isRequired && <span className="text-red-500">*</span>}
            </label>
            <div className="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-4 flex flex-col gap-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="flex flex-col gap-1">
                  <label className="text-xs font-medium text-gray-600 dark:text-gray-200 mb-1" htmlFor="position-start-line">Start Line</label>
                  <input
                    id="position-start-line"
                    type="text"
                    value={positionFields.startLine}
                    onChange={(e) => handlePositionChange('startLine', e.target.value)}
                    className={`px-3 py-2 border rounded-md focus:outline-hidden focus:ring-2 focus:ring-demo-time-accent focus:border-demo-time-accent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 ${positionError ? 'border-red-300 dark:border-red-400' : 'border-gray-300 dark:border-gray-600'}`}
                    placeholder="10 or start"
                  />
                </div>
                <div className="flex flex-col gap-1">
                  <label className="text-xs font-medium text-gray-600 dark:text-gray-200 mb-1" htmlFor="position-start-char">Start Character</label>
                  <input
                    id="position-start-char"
                    type="text"
                    value={positionFields.startChar}
                    onChange={(e) => handlePositionChange('startChar', e.target.value)}
                    className={`px-3 py-2 border rounded-md focus:outline-hidden focus:ring-2 focus:ring-demo-time-accent focus:border-demo-time-accent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 ${positionError ? 'border-red-300 dark:border-red-400' : 'border-gray-300 dark:border-gray-600'}`}
                    placeholder="5 (optional)"
                  />
                </div>
                <div className="flex flex-col gap-1">
                  <label className="text-xs font-medium text-gray-600 mb-1" htmlFor="position-end-line">End Line</label>
                  <input
                    id="position-end-line"
                    type="text"
                    value={positionFields.endLine}
                    onChange={(e) => handlePositionChange('endLine', e.target.value)}
                    className={`px-3 py-2 border rounded-md focus:outline-hidden focus:ring-2 focus:ring-demo-time-accent focus:border-demo-time-accent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 ${positionError ? 'border-red-300 dark:border-red-400' : 'border-gray-300 dark:border-gray-600'}`}
                    placeholder="20 (optional)"
                  />
                </div>
                <div className="flex flex-col gap-1">
                  <label className="text-xs font-medium text-gray-600 mb-1" htmlFor="position-end-char">End Character</label>
                  <input
                    id="position-end-char"
                    type="text"
                    value={positionFields.endChar}
                    onChange={(e) => handlePositionChange('endChar', e.target.value)}
                    className={`px-3 py-2 border rounded-md focus:outline-hidden focus:ring-2 focus:ring-demo-time-accent focus:border-demo-time-accent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 ${positionError ? 'border-red-300 dark:border-red-400' : 'border-gray-300 dark:border-gray-600'}`}
                    placeholder="10 (optional)"
                  />
                </div>
              </div>

              {positionError && (
                <p className="text-sm text-red-600 dark:text-red-400">{positionError}</p>
              )}

              <div className="bg-blue-50 dark:bg-gray-800 border border-blue-100 dark:border-blue-900 rounded-lg p-3">
                <p className="text-sm text-blue-800 dark:text-blue-200 mb-2">
                  <strong>Position Examples:</strong>
                </p>
                <div className="text-xs text-blue-700 dark:text-blue-200 space-y-1">
                  <p><code className="px-1 rounded-xs">10</code> - Line 10 (Start Line only)</p>
                  <p><code className="px-1 rounded-xs">10:20</code> - Lines 10 to 20 (Start + End Line)</p>
                  <p><code className="px-1 rounded-xs">10,5</code> - Line 10, character 5 (Start Line + Character)</p>
                  <p><code className="px-1 rounded-xs">10,5:20,10</code> - From line 10, char 5 to line 20, char 10 (All fields)</p>
                  <p><code className="px-1 rounded-xs">start</code> or <code className="px-1 rounded-xs">end</code> - Special keywords (Start Line only)</p>
                </div>
              </div>
            </div>
          </div>
        );
      }

      case 'startPlaceholder': {
        // Handle both startPlaceholder and endPlaceholder together
        if (availableFields.includes('endPlaceholder')) {
          const startError = stepValidation.errors.find(error => error.field === 'startPlaceholder');
          const endError = stepValidation.errors.find(error => error.field === 'endPlaceholder');

          return (
            <div key="placeholders" className="space-y-2">
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Placeholders {(requiredFields.includes('startPlaceholder') || requiredFields.includes('endPlaceholder')) && <span className="text-red-500">*</span>}
              </label>
              <div className="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-4 flex flex-col gap-4">
                <div className="grid grid-cols-1 gap-4">
                  <div className="flex flex-col gap-1">
                    <label className="text-xs font-medium text-gray-600 dark:text-gray-200  mb-1" htmlFor="start-placeholder">Start Placeholder</label>
                    <input
                      id="start-placeholder"
                      type="text"
                      value={step.startPlaceholder || ''}
                      onChange={(e) => handleChange('startPlaceholder', e.target.value || undefined)}
                      className={`px-3 py-2 border rounded-md focus:outline-hidden focus:ring-2 focus:ring-demo-time-accent focus:border-demo-time-accent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 ${startError ? 'border-red-300 dark:border-red-400' : 'border-gray-300 dark:border-gray-600'}`}
                      placeholder="<!-- START -->"
                    />
                    {startError && (
                      <p className="text-sm text-red-600 dark:text-red-400">{startError.message}</p>
                    )}
                  </div>
                  <div className="flex flex-col gap-1">
                    <label className="text-xs font-medium text-gray-600 dark:text-gray-200 mb-1" htmlFor="end-placeholder">End Placeholder</label>
                    <input
                      id="end-placeholder"
                      type="text"
                      value={step.endPlaceholder || ''}
                      onChange={(e) => handleChange('endPlaceholder', e.target.value || undefined)}
                      className={`px-3 py-2 border rounded-md focus:outline-hidden focus:ring-2 focus:ring-demo-time-accent focus:border-demo-time-accent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 ${endError ? 'border-red-300 dark:border-red-400' : 'border-gray-300 dark:border-gray-600'}`}
                      placeholder="<!-- END -->"
                    />
                    {endError && (
                      <p className="text-sm text-red-600 dark:text-red-400">{endError.message}</p>
                    )}
                  </div>
                </div>
              </div>
            </div>
          );
        }
        // Fall through to default case if endPlaceholder is not available
        return null;
      }

      case 'id': {
        if (step.action === Action.ExecuteScript) {
          return (
            <div key={field}>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                {label} {isRequired && <span className="text-red-500">*</span>}
              </label>
              <input
                type="text"
                value={localId}
                onChange={e => setLocalId(e.target.value)}
                onBlur={commitId}
                onKeyDown={e => { if (e.key === 'Enter') { commitId(); } }}
                className={`w-full px-3 py-2 border rounded-md focus:outline-hidden focus:ring-2 focus:ring-demo-time-accent focus:border-demo-time-accent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 ${hasError ? 'border-red-300 bg-red-50 dark:border-red-400 dark:bg-red-900/20' : 'border-gray-300 dark:border-gray-600'}`}
                placeholder={`Enter script ID`}
              />
              {fieldErrors.map((error, index) => (
                <p key={index} className="text-sm text-red-600 dark:text-red-400 mt-1">{error.message}</p>
              ))}
            </div>
          );
        }

        return (
          <div key={field}>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              {label} {isRequired && <span className="text-red-500">*</span>}
            </label>
            <DemoIdPicker
              value={step[field as keyof Step] || ''}
              onDemoSelect={(demo) => handleChange(field as keyof Step, demo.id)}
              placeholder="Select a demo..."
            />
            {fieldErrors.map((error, index) => (
              <p key={index} className="text-sm text-red-600 dark:text-red-400 mt-1">{error.message}</p>
            ))}
          </div>
        );
      }

      default:
        // Handle path fields with file picker
        if (field === 'path' || field === 'contentPath' || field === 'dest') {
          const fileTypes = step.action === 'openSlide' ? ['md'] : undefined;
          const isSnippetContentPath = field === 'contentPath' && step.action === 'snippet';
          return (
            <div key={field}>
              <PathInput
                label={label === "Dest" ? "Destination Path" : label}
                required={isRequired}
                value={step[field] || ''}
                onChange={(value) => handleChange(field, value || undefined)}
                placeholder={`Enter ${label.toLowerCase()}`}
                error={fieldErrors.length > 0 ? fieldErrors[0].message : undefined}
                type={field === 'contentPath' ? 'file' : 'file'}
                fileTypes={fileTypes}
                suggestions={isSnippetContentPath ? snippetSuggestions : undefined}
                loadingSuggestions={isSnippetContentPath ? loadingSnippetSuggestions : false}
              />
              {isSnippetContentPath && (
                <div className="mt-2 flex justify-end">
                  <button
                    type="button"
                    onClick={() => messageHandler.send(WebViewMessages.toVscode.runCommand, { command: COMMAND.showGallery })}
                    className="text-xs text-demo-time-accent hover:underline"
                  >
                    Open Snippet Gallery
                  </button>
                </div>
              )}
            </div>
          );
        }

        return (
          <div key={field}>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              {label} {isRequired && <span className="text-red-500">*</span>}
            </label>
            <input
              type="text"
              value={step[field as keyof Step] || ''}
              onChange={(e) => handleChange(field as keyof Step, e.target.value || undefined)}
              className={`w-full px-3 py-2 border rounded-md focus:outline-hidden focus:ring-2 focus:ring-demo-time-accent focus:border-demo-time-accent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 ${hasError ? 'border-red-300 bg-red-50 dark:border-red-400 dark:bg-red-900/20' : 'border-gray-300 dark:border-gray-600'
                }`}
              placeholder={`Enter ${label.toLowerCase()}`}
            />
            {fieldErrors.map((error, index) => (
              <p key={index} className="text-sm text-red-600 dark:text-red-400 mt-1">{error.message}</p>
            ))}
          </div>
        );
    }
  };

  return (
    <div className="space-y-4 h-full">
      <div className="flex items-center justify-between bg-white dark:bg-gray-800 z-10 pb-2">
        <h4 className="text-lg font-semibold text-gray-900 dark:text-white">Move Configuration</h4>
        <div className="flex items-center gap-2">
          <span className="text-sm text-gray-700 dark:text-gray-300">{step.disabled ? 'Disabled' : 'Enabled'}</span>
          <Switch
            checked={!step.disabled}
            onCheckedChange={(checked: boolean) => onChange({ ...step, disabled: !checked })}
            className="ml-2"
          />
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {renderField('action')}
        {availableFields.filter(field => {
          // Skip endPlaceholder if startPlaceholder is available (they're grouped together)
          if (field === 'endPlaceholder' && availableFields.includes('startPlaceholder')) {
            return false;
          }
          return true;
        }).map(field => renderField(field))}
      </div>

      {/* Show validation hints for complex actions */}
      {(step.action === 'insert' || step.action === 'replace') && (
        <NoteBox className="mt-2" variant="info">
          <><strong>Note:</strong> This action requires either content OR contentPath, and either position OR startPlaceholder.</>
        </NoteBox>
      )}

      {step.action === 'create' && (
        <NoteBox className="mt-2" variant="info">
          <><strong>Note:</strong> This action requires a path. You can optionally provide either content OR contentPath (but not both), or leave both empty to create an empty file.</>
        </NoteBox>
      )}

      {step.action === 'highlight' && (
        <NoteBox className="mt-2" variant="info">
          <><strong>Note:</strong> This action requires either position OR both startPlaceholder and endPlaceholder.</>
        </NoteBox>
      )}

      {step.action === 'copyToClipboard' && (
        <NoteBox className="mt-2" variant="info">
          <>
            <strong>Note:</strong> This action requires either <code className="bg-white px-1 rounded-xs">content</code> OR <code className="bg-white px-1 rounded-xs">contentPath</code>.
          </>
        </NoteBox>
      )}
    </div>
  );
};