ColaFlow-Web/components/projects/acceptance-criteria-editor.tsx

'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Checkbox } from '@/components/ui/checkbox';
import { X, Plus } from 'lucide-react';

interface AcceptanceCriteriaEditorProps {
  criteria: string[];
  onChange: (criteria: string[]) => void;
  disabled?: boolean;
}

export function AcceptanceCriteriaEditor({
  criteria,
  onChange,
  disabled,
}: AcceptanceCriteriaEditorProps) {
  const [newCriterion, setNewCriterion] = useState('');

  const addCriterion = () => {
    if (newCriterion.trim()) {
      onChange([...criteria, newCriterion.trim()]);
      setNewCriterion('');
    }
  };

  const removeCriterion = (index: number) => {
    onChange(criteria.filter((_, i) => i !== index));
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      addCriterion();
    }
  };

  return (
    <div className="space-y-3">
      {/* Existing criteria list */}
      {criteria.length > 0 && (
        <div className="space-y-2">
          {criteria.map((criterion, index) => (
            <div
              key={index}
              className="flex items-start gap-2 p-2 rounded-md border bg-muted/50"
            >
              <Checkbox checked disabled className="mt-0.5" />
              <span className="flex-1 text-sm">{criterion}</span>
              {!disabled && (
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  className="h-6 w-6 p-0"
                  onClick={() => removeCriterion(index)}
                >
                  <X className="h-3 w-3" />
                </Button>
              )}
            </div>
          ))}
        </div>
      )}

      {/* Add new criterion */}
      {!disabled && (
        <div className="flex gap-2">
          <Input
            placeholder="Add acceptance criterion..."
            value={newCriterion}
            onChange={(e) => setNewCriterion(e.target.value)}
            onKeyPress={handleKeyPress}
          />
          <Button
            type="button"
            variant="outline"
            size="sm"
            onClick={addCriterion}
            disabled={!newCriterion.trim()}
          >
            <Plus className="h-4 w-4" />
          </Button>
        </div>
      )}

      {criteria.length === 0 && disabled && (
        <p className="text-sm text-muted-foreground">
          No acceptance criteria defined
        </p>
      )}
    </div>
  );
}