igny8/frontend/src/components/Automation/ConfigModal.tsx

/**
 * Config Modal Component
 * Modal for configuring automation settings
 */
import React, { useState } from 'react';
import { AutomationConfig } from '../../services/automationService';

interface ConfigModalProps {
  config: AutomationConfig;
  onSave: (config: Partial<AutomationConfig>) => void;
  onCancel: () => void;
}

const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) => {
  const [formData, setFormData] = useState<Partial<AutomationConfig>>({
    is_enabled: config.is_enabled,
    frequency: config.frequency,
    scheduled_time: config.scheduled_time,
    stage_1_batch_size: config.stage_1_batch_size,
    stage_2_batch_size: config.stage_2_batch_size,
    stage_3_batch_size: config.stage_3_batch_size,
    stage_4_batch_size: config.stage_4_batch_size,
    stage_5_batch_size: config.stage_5_batch_size,
    stage_6_batch_size: config.stage_6_batch_size,
    within_stage_delay: config.within_stage_delay || 3,
    between_stage_delay: config.between_stage_delay || 5,
  });

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

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg p-6 max-w-2xl w-full max-h-screen overflow-y-auto">
        <h2 className="text-2xl font-bold mb-4">Automation Configuration</h2>

        <form onSubmit={handleSubmit}>
          {/* Enable/Disable */}
          <div className="mb-4">
            <label className="flex items-center">
              <input
                type="checkbox"
                checked={formData.is_enabled || false}
                onChange={(e) =>
                  setFormData({ ...formData, is_enabled: e.target.checked })
                }
                className="mr-2"
              />
              <span className="font-semibold">Enable Automation</span>
            </label>
            <p className="text-sm text-gray-600 ml-6">
              When enabled, automation will run on the configured schedule
            </p>
          </div>

          {/* Frequency */}
          <div className="mb-4">
            <label className="block font-semibold mb-1">Frequency</label>
            <select
              value={formData.frequency || 'daily'}
              onChange={(e) =>
                setFormData({
                  ...formData,
                  frequency: e.target.value as 'daily' | 'weekly' | 'monthly',
                })
              }
              className="border rounded px-3 py-2 w-full"
            >
              <option value="daily">Daily</option>
              <option value="weekly">Weekly (Mondays)</option>
              <option value="monthly">Monthly (1st of month)</option>
            </select>
          </div>

          {/* Scheduled Time */}
          <div className="mb-4">
            <label className="block font-semibold mb-1">Scheduled Time</label>
            <input
              type="time"
              value={formData.scheduled_time || '02:00'}
              onChange={(e) =>
                setFormData({ ...formData, scheduled_time: e.target.value })
              }
              className="border rounded px-3 py-2 w-full"
            />
            <p className="text-sm text-gray-600 mt-1">
              Time of day to run automation (24-hour format)
            </p>
          </div>

          {/* Batch Sizes */}
          <div className="mb-4">
            <h3 className="font-semibold mb-2">Batch Sizes</h3>
            <p className="text-sm text-gray-600 mb-3">
              Configure how many items to process in each stage
            </p>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm mb-1">
                  Stage 1: Keywords → Clusters
                </label>
                <input
                  type="number"
                  value={formData.stage_1_batch_size || 20}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      stage_1_batch_size: parseInt(e.target.value),
                    })
                  }
                  min={1}
                  max={100}
                  className="border rounded px-3 py-2 w-full"
                />
              </div>

              <div>
                <label className="block text-sm mb-1">
                  Stage 2: Clusters → Ideas
                </label>
                <input
                  type="number"
                  value={formData.stage_2_batch_size || 1}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      stage_2_batch_size: parseInt(e.target.value),
                    })
                  }
                  min={1}
                  max={10}
                  className="border rounded px-3 py-2 w-full"
                />
              </div>

              <div>
                <label className="block text-sm mb-1">
                  Stage 3: Ideas → Tasks
                </label>
                <input
                  type="number"
                  value={formData.stage_3_batch_size || 20}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      stage_3_batch_size: parseInt(e.target.value),
                    })
                  }
                  min={1}
                  max={100}
                  className="border rounded px-3 py-2 w-full"
                />
              </div>

              <div>
                <label className="block text-sm mb-1">
                  Stage 4: Tasks → Content
                </label>
                <input
                  type="number"
                  value={formData.stage_4_batch_size || 1}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      stage_4_batch_size: parseInt(e.target.value),
                    })
                  }
                  min={1}
                  max={10}
                  className="border rounded px-3 py-2 w-full"
                />
              </div>

              <div>
                <label className="block text-sm mb-1">
                  Stage 5: Content → Image Prompts
                </label>
                <input
                  type="number"
                  value={formData.stage_5_batch_size || 1}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      stage_5_batch_size: parseInt(e.target.value),
                    })
                  }
                  min={1}
                  max={10}
                  className="border rounded px-3 py-2 w-full"
                />
              </div>

              <div>
                <label className="block text-sm mb-1">
                  Stage 6: Image Prompts → Images
                </label>
                <input
                  type="number"
                  value={formData.stage_6_batch_size || 1}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      stage_6_batch_size: parseInt(e.target.value),
                    })
                  }
                  min={1}
                  max={10}
                  className="border rounded px-3 py-2 w-full"
                />
              </div>
            </div>
          </div>

          {/* AI Request Delays */}
          <div className="mb-4 border-t pt-4">
            <h3 className="font-semibold mb-2">AI Request Delays</h3>
            <p className="text-sm text-gray-600 mb-3">
              Configure delays to prevent rate limiting and manage API load
            </p>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm mb-1">
                  Within-Stage Delay (seconds)
                </label>
                <input
                  type="number"
                  value={formData.within_stage_delay || 3}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      within_stage_delay: parseInt(e.target.value),
                    })
                  }
                  min={0}
                  max={30}
                  className="border rounded px-3 py-2 w-full"
                />
                <p className="text-xs text-gray-500 mt-1">
                  Delay between batches within a stage
                </p>
              </div>

              <div>
                <label className="block text-sm mb-1">
                  Between-Stage Delay (seconds)
                </label>
                <input
                  type="number"
                  value={formData.between_stage_delay || 5}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      between_stage_delay: parseInt(e.target.value),
                    })
                  }
                  min={0}
                  max={60}
                  className="border rounded px-3 py-2 w-full"
                />
                <p className="text-xs text-gray-500 mt-1">
                  Delay between stage transitions
                </p>
              </div>
            </div>
          </div>

          {/* Buttons */}
          <div className="flex justify-end gap-2 mt-6">
            <button
              type="button"
              onClick={onCancel}
              className="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300"
            >
              Cancel
            </button>
            <button
              type="submit"
              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
            >
              Save Configuration
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default ConfigModal;