import React, { useState, KeyboardEvent } from 'react';
import { X } from 'lucide-react';

interface TagInputProps {
    values: string[];
    onChange: (values: string[]) => void;
    placeholder?: string;
    label?: string;
    error?: string;
    disabled?: boolean;
}

export const TagInput: React.FC<TagInputProps> = ({
    values,
    onChange,
    placeholder = "اضافه کنید و Enter بزنید...",
    label,
    error,
    disabled = false,
}) => {
    const [inputValue, setInputValue] = useState('');

    const addValue = (value: string) => {
        const trimmedValue = value.trim();
        if (trimmedValue && !values.includes(trimmedValue)) {
            onChange([...values, trimmedValue]);
            setInputValue('');
        }
    };

    const removeValue = (index: number) => {
        const newValues = values.filter((_, i) => i !== index);
        onChange(newValues);
    };

    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            addValue(inputValue);
        } else if (e.key === 'Backspace' && !inputValue && values.length > 0) {
            removeValue(values.length - 1);
        }
    };

    const handleInputBlur = () => {
        if (inputValue.trim()) {
            addValue(inputValue);
        }
    };

    return (
        <div className="space-y-2">
            {label && (
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                    {label}
                </label>
            )}

            <div
                className={`
          w-full min-h-[42px] px-3 py-2 border rounded-md 
          focus-within:outline-none focus-within:ring-1 focus-within:ring-primary-500
          ${error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'}
          ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white dark:bg-gray-700'}
        `}
            >
                <div className="flex flex-wrap gap-1 items-center">
                    {values.map((value, index) => (
                        <span
                            key={index}
                            className="inline-flex items-center gap-1 px-2.5 py-1.5 bg-primary-100 dark:bg-primary-500/30 text-primary-900 dark:text-white text-sm rounded-md border border-primary-200 dark:border-primary-500/60"
                        >
                            {value}
                            {!disabled && (
                                <button
                                    type="button"
                                    onClick={() => removeValue(index)}
                                    className="hover:bg-primary-200 dark:hover:bg-primary-500/50 rounded-full p-0.5"
                                >
                                    <X className="h-3 w-3" />
                                </button>
                            )}
                        </span>
                    ))}

                    {!disabled && (
                        <input
                            type="text"
                            value={inputValue}
                            onChange={(e) => setInputValue(e.target.value)}
                            onKeyDown={handleKeyDown}
                            onBlur={handleInputBlur}
                            placeholder={values.length === 0 ? placeholder : ""}
                            className="flex-1 min-w-[120px] border-none outline-none bg-transparent text-sm dark:text-gray-100"
                        />
                    )}
                </div>
            </div>

            {error && (
                <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
            )}

            {!disabled && (
                <p className="text-xs text-gray-500 dark:text-gray-400">
                    Enter بزنید یا روی جای دیگری کلیک کنید تا مقدار اضافه شود
                </p>
            )}
        </div>
    );
}; 