Atomizer/atomizer-dashboard/frontend/src/components/canvas/panels/ExecuteDialog.tsx

/**
 * Execute Dialog - Prompts for study name before executing canvas intent
 */

import { useState } from 'react';

interface ExecuteDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onExecute: (studyName: string, autoRun: boolean) => void;
  isExecuting: boolean;
}

export function ExecuteDialog({
  isOpen,
  onClose,
  onExecute,
  isExecuting,
}: ExecuteDialogProps) {
  const [studyName, setStudyName] = useState('');
  const [autoRun, setAutoRun] = useState(false);
  const [error, setError] = useState<string | null>(null);

  if (!isOpen) return null;

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    // Validate study name
    const trimmed = studyName.trim();
    if (!trimmed) {
      setError('Study name is required');
      return;
    }

    // Check for valid snake_case
    if (!/^[a-z][a-z0-9_]*$/.test(trimmed)) {
      setError('Study name must be snake_case (lowercase letters, numbers, underscores)');
      return;
    }

    setError(null);
    onExecute(trimmed, autoRun);
  };

  const handleClose = () => {
    setStudyName('');
    setAutoRun(false);
    setError(null);
    onClose();
  };

  return (
    <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 backdrop-blur-sm">
      <div className="bg-dark-850 rounded-xl shadow-2xl w-full max-w-md p-6 border border-dark-700">
        <h2 className="text-xl font-semibold text-white mb-4">
          Execute with Claude
        </h2>

        <form onSubmit={handleSubmit}>
          <div className="mb-4">
            <label
              htmlFor="study-name"
              className="block text-sm font-medium text-dark-300 mb-1"
            >
              Study Name
            </label>
            <input
              id="study-name"
              type="text"
              value={studyName}
              onChange={(e) => setStudyName(e.target.value.toLowerCase().replace(/\s+/g, '_'))}
              placeholder="my_optimization_study"
              className="w-full px-3 py-2 bg-dark-800 border border-dark-600 text-white placeholder-dark-400 rounded-lg font-mono focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-colors"
              disabled={isExecuting}
              autoFocus
            />
            {error && (
              <p className="mt-1 text-sm text-red-400">{error}</p>
            )}
            <p className="mt-1 text-xs text-dark-500">
              Use snake_case (e.g., bracket_mass_v1, mirror_wfe_optimization)
            </p>
          </div>

          <div className="mb-6">
            <label className="flex items-center gap-2">
              <input
                type="checkbox"
                checked={autoRun}
                onChange={(e) => setAutoRun(e.target.checked)}
                disabled={isExecuting}
                className="w-4 h-4 rounded bg-dark-800 border-dark-600 text-primary-500 focus:ring-primary-500"
              />
              <span className="text-sm text-dark-300">
                Start optimization immediately after creation
              </span>
            </label>
          </div>

          <div className="flex gap-3 justify-end">
            <button
              type="button"
              onClick={handleClose}
              disabled={isExecuting}
              className="px-4 py-2 text-dark-300 hover:text-white disabled:opacity-50 transition-colors"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={isExecuting}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-colors"
            >
              {isExecuting ? (
                <>
                  <span className="animate-spin">⏳</span>
                  Executing...
                </>
              ) : (
                <>
                  Send to Claude
                </>
              )}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}