/**
 * 可复用的标签列表组件
 * 
 * 用于管理标签列表的通用UI组件，支持添加、删除标签，以及自定义验证
 */
import React from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Plus, X } from 'lucide-react';
import { cn } from '@/lib/utils';

interface TagListProps {
  /** 标签列表 */
  tags: string[];
  
  /** 新标签输入值 */
  newTag: string;
  
  /** 标签列表标题 */
  label: string;
  
  /** 输入框占位符 */
  placeholder: string;
  
  /** 输入框类型 */
  inputType?: 'text' | 'email' | 'tel';
  
  /** 是否必填 */
  required?: boolean;
  
  /** 是否禁用 */
  disabled?: boolean;
  
  /** 最大标签数量 */
  maxTags?: number;
  
  /** 自定义样式类名 */
  className?: string;
  
  /** 标签样式变体 */
  variant?: 'default' | 'secondary' | 'outline';
  
  /** 新标签输入变化回调 */
  onNewTagChange: (value: string) => void;
  
  /** 添加标签回调 */
  onAddTag: () => void;
  
  /** 删除标签回调 */
  onRemoveTag: (index: number) => void;
  
  /** 验证函数 */
  validate?: (value: string) => boolean;
  
  /** 验证错误信息 */
  validationError?: string;
}

const tagVariants = {
  default: 'bg-primary text-primary-foreground',
  secondary: 'bg-secondary text-secondary-foreground',
  outline: 'border border-input bg-background',
};

export const TagList: React.FC<TagListProps> = ({
  tags,
  newTag,
  label,
  placeholder,
  inputType = 'text',
  required = false,
  disabled = false,
  maxTags,
  className,
  variant = 'secondary',
  onNewTagChange,
  onAddTag,
  onRemoveTag,
  validate,
  validationError,
}) => {
  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      handleAddClick();
    }
  };

  const handleAddClick = () => {
    if (!newTag.trim()) return;
    if (disabled) return;
    if (maxTags && tags.length >= maxTags) return;
    if (validate && !validate(newTag.trim())) return;
    if (tags.includes(newTag.trim())) return;
    
    onAddTag();
  };

  const canAddMore = !maxTags || tags.length < maxTags;
  const hasValidationError = validate && newTag.trim() && !validate(newTag.trim());

  return (
    <div className={cn('space-y-2', className)}>
      <Label>
        {label} {required && <span className="text-destructive">*</span>}
        {maxTags && (
          <span className="text-xs text-muted-foreground ml-2">
            ({tags.length}/{maxTags})
          </span>
        )}
      </Label>
      
      <div className="flex gap-2">
        <Input
          type={inputType}
          placeholder={placeholder}
          value={newTag}
          onChange={(e) => onNewTagChange(e.target.value)}
          onKeyPress={handleKeyPress}
          disabled={disabled || !canAddMore}
          className={hasValidationError ? 'border-destructive' : ''}
        />
        <Button 
          type="button" 
          variant="outline" 
          onClick={handleAddClick}
          disabled={disabled || !newTag.trim() || !canAddMore || hasValidationError}
        >
          <Plus className="h-4 w-4" />
        </Button>
      </div>
      
      {hasValidationError && validationError && (
        <p className="text-sm text-destructive">{validationError}</p>
      )}
      
      {tags.length > 0 && (
        <div className="flex flex-wrap gap-2 mt-2">
          {tags.map((tag, index) => (
            <div
              key={index}
              className={cn(
                'flex items-center gap-1 px-2 py-1 rounded-md text-sm',
                tagVariants[variant]
              )}
            >
              <span>{tag}</span>
              <Button
                type="button"
                variant="ghost"
                size="sm"
                className="h-4 w-4 p-0 hover:bg-transparent"
                onClick={() => onRemoveTag(index)}
                disabled={disabled}
              >
                <X className="h-3 w-3" />
              </Button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

TagList.displayName = 'TagList';
