/**
 * AugmentationConfig component for configuring image augmentation during training.
 *
 * Provides preset selection and optional custom augmentation type configuration.
 */

import React from 'react'
import { Loader2, AlertTriangle } from 'lucide-react'
import { useAugmentation } from '../hooks/useAugmentation'
import type { AugmentationConfig as AugmentationConfigType } from '../api/endpoints/augmentation'

interface AugmentationConfigProps {
  enabled: boolean
  onEnabledChange: (enabled: boolean) => void
  config: Partial<AugmentationConfigType>
  onConfigChange: (config: Partial<AugmentationConfigType>) => void
  showCustomOptions?: boolean
}

export const AugmentationConfig: React.FC<AugmentationConfigProps> = ({
  enabled,
  onEnabledChange,
  config,
  onConfigChange,
  showCustomOptions = false,
}) => {
  const { augmentationTypes, presets, isLoadingTypes, isLoadingPresets } = useAugmentation()

  const isLoading = isLoadingTypes || isLoadingPresets

  const handlePresetSelect = (presetName: string) => {
    const preset = presets.find((p) => p.name === presetName)
    if (preset && preset.config) {
      onConfigChange(preset.config as Partial<AugmentationConfigType>)
    } else {
      // Apply a basic config based on preset name
      const presetConfigs: Record<string, Partial<AugmentationConfigType>> = {
        conservative: {
          gaussian_noise: { enabled: true, probability: 0.3, params: { std: 10 } },
          gaussian_blur: { enabled: true, probability: 0.2, params: { kernel_size: 3 } },
        },
        moderate: {
          gaussian_noise: { enabled: true, probability: 0.5, params: { std: 15 } },
          gaussian_blur: { enabled: true, probability: 0.3, params: { kernel_size: 5 } },
          lighting_variation: { enabled: true, probability: 0.3, params: {} },
          perspective_warp: { enabled: true, probability: 0.2, params: { max_warp: 0.02 } },
        },
        aggressive: {
          gaussian_noise: { enabled: true, probability: 0.7, params: { std: 20 } },
          gaussian_blur: { enabled: true, probability: 0.5, params: { kernel_size: 7 } },
          motion_blur: { enabled: true, probability: 0.3, params: {} },
          lighting_variation: { enabled: true, probability: 0.5, params: {} },
          shadow: { enabled: true, probability: 0.3, params: {} },
          perspective_warp: { enabled: true, probability: 0.3, params: { max_warp: 0.03 } },
          wrinkle: { enabled: true, probability: 0.2, params: {} },
          stain: { enabled: true, probability: 0.2, params: {} },
        },
      }
      onConfigChange(presetConfigs[presetName] || {})
    }
  }

  return (
    <div className="border border-warm-divider rounded-lg p-4 bg-warm-bg-secondary">
      {/* Enable checkbox */}
      <label className="flex items-center gap-2 cursor-pointer">
        <input
          type="checkbox"
          checked={enabled}
          onChange={(e) => onEnabledChange(e.target.checked)}
          className="w-4 h-4 rounded border-warm-divider text-warm-state-info focus:ring-warm-state-info"
          aria-label="Enable augmentation"
        />
        <span className="text-sm font-medium text-warm-text-secondary">Enable Augmentation</span>
        <span className="text-xs text-warm-text-muted">(Simulate real-world document conditions)</span>
      </label>

      {/* Expanded content when enabled */}
      {enabled && (
        <div className="mt-4 space-y-4">
          {isLoading ? (
            <div className="flex items-center justify-center py-4" data-testid="augmentation-loading">
              <Loader2 className="w-5 h-5 animate-spin text-warm-state-info" />
              <span className="ml-2 text-sm text-warm-text-muted">Loading augmentation options...</span>
            </div>
          ) : (
            <>
              {/* Preset selection */}
              <div>
                <label className="block text-sm font-medium text-warm-text-secondary mb-2">Preset</label>
                <div className="flex flex-wrap gap-2">
                  {presets.map((preset) => (
                    <button
                      key={preset.name}
                      onClick={() => handlePresetSelect(preset.name)}
                      className="px-3 py-1.5 text-sm rounded-md border border-warm-divider hover:bg-warm-bg-tertiary transition-colors"
                      title={preset.description}
                    >
                      {preset.name}
                    </button>
                  ))}
                </div>
              </div>

              {/* Custom options (if enabled) */}
              {showCustomOptions && (
                <div className="border-t border-warm-divider pt-4">
                  <h4 className="text-sm font-medium text-warm-text-secondary mb-3">Augmentation Types</h4>
                  <div className="grid gap-2">
                    {augmentationTypes.map((type) => (
                      <div
                        key={type.name}
                        className="flex items-center justify-between p-2 bg-warm-bg-primary rounded border border-warm-divider"
                      >
                        <div className="flex items-center gap-2">
                          <span className="text-sm text-warm-text-primary">{type.name}</span>
                          {type.affects_geometry && (
                            <span className="flex items-center gap-1 text-xs text-warm-state-warning">
                              <AlertTriangle size={12} />
                              affects bbox
                            </span>
                          )}
                        </div>
                        <span className="text-xs text-warm-text-muted">{type.stage}</span>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </>
          )}
        </div>
      )}
    </div>
  )
}
