/**
 * TriggerFilterBuilder Component
 *
 * Main wrapper component for building trigger filters.
 * Handles the empty state and provides enable/disable functionality.
 */

import { Plus, Filter, X } from 'lucide-react';
import { Button } from './ui/button';
import { FilterGroupBuilder } from './FilterGroupBuilder';
import { FilterGroup } from '../types/filter';
import { TriggerField } from '../types/trigger';

interface TriggerFilterBuilderProps {
  /** Current filter configuration (null if no filters) */
  filters: FilterGroup | null;
  /** Available trigger fields to filter on */
  availableFields: TriggerField[];
  /** Callback when filters change */
  onChange: (filters: FilterGroup | null) => void;
}

export function TriggerFilterBuilder({
  filters,
  availableFields,
  onChange,
}: TriggerFilterBuilderProps) {
  // Enable filters by creating a default group with one condition
  const handleEnableFilters = () => {
    const defaultField = availableFields[0]?.name || '';
    onChange({
      logic: 'and',
      conditions: [
        {
          field: defaultField,
          operator: 'equals',
          value: '',
        },
      ],
    });
  };

  // Disable filters by setting to null
  const handleDisableFilters = () => {
    onChange(null);
  };

  // Empty state - no filters configured
  if (!filters) {
    return (
      <div className="border border-dashed border-slate-200 rounded-lg p-6 text-center">
        <div className="flex justify-center mb-3">
          <div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center">
            <Filter className="w-5 h-5 text-slate-500" />
          </div>
        </div>
        <p className="text-sm text-slate-500 mb-4">
          No filters configured. This workflow will trigger for all events of this type.
        </p>
        <Button
          variant="outline"
          onClick={handleEnableFilters}
          disabled={availableFields.length === 0}
        >
          <Plus className="w-4 h-4 mr-2" />
          Add Filter Conditions
        </Button>
        {availableFields.length === 0 && (
          <p className="text-xs text-error mt-2">No fields available for this trigger type.</p>
        )}
      </div>
    );
  }

  // Filters are configured
  return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Filter className="w-4 h-4 text-slate-500" />
          <h4 className="text-sm font-medium text-slate-900">Filter Conditions</h4>
        </div>
        <Button
          variant="ghost"
          size="sm"
          onClick={handleDisableFilters}
          className="text-error hover:text-red-700 hover:bg-error-muted text-xs"
        >
          <X className="w-3.5 h-3.5 mr-1" />
          Remove All Filters
        </Button>
      </div>

      {/* Info text */}
      <p className="text-xs text-slate-500">
        Only trigger this workflow when the following conditions are met:
      </p>

      {/* Filter builder */}
      <FilterGroupBuilder group={filters} availableFields={availableFields} onChange={onChange} />
    </div>
  );
}