import { Loader2, AlertCircle } from 'lucide-react';
import { Trigger } from '../../types/trigger';
import { FilterGroup } from '../../types/filter';
import { Button } from '../ui/button';
import { TriggerFilterBuilder } from '../TriggerFilterBuilder';

interface TriggerConfigContentProps {
  trigger: Trigger | undefined;
  isLoading: boolean;
  error: string | null;
  onRetry: () => void;
  filters: FilterGroup | null;
  onFiltersChange: (filters: FilterGroup | null) => void;
}

/**
 * Renders the trigger configuration content including filter builder.
 * Handles loading, error, and empty states.
 */
export function TriggerConfigContent({
  trigger,
  isLoading,
  error,
  onRetry,
  filters,
  onFiltersChange,
}: TriggerConfigContentProps) {
  if (isLoading) {
    return (
      <div className="flex flex-col items-center justify-center py-8 space-y-2">
        <Loader2 className="w-6 h-6 animate-spin text-cyan-600" />
        <p className="text-sm text-slate-500">Loading trigger fields...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="bg-red-50 border border-red-200 rounded p-4 space-y-2">
        <div className="flex items-start space-x-2">
          <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
          <div className="flex-1">
            <p className="text-sm text-red-800">{error}</p>
            <Button
              onClick={onRetry}
              variant="outline"
              size="sm"
              className="mt-2 border-red-300 text-red-700 hover:bg-red-100"
            >
              Retry
            </Button>
          </div>
        </div>
      </div>
    );
  }

  if (!trigger) {
    return <p className="text-sm text-slate-500">No trigger fields available for filtering.</p>;
  }

  return (
    <TriggerFilterBuilder
      filters={filters}
      availableFields={trigger.available_fields || []}
      onChange={onFiltersChange}
    />
  );
}