/**
 * Keyword Input Component
 *
 * Reusable component for managing multiple keyword/URL inputs
 *
 * @package ThinkRank
 * @since 1.0.0
 */

import { useState } from '@wordpress/element';
import { TextControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { plus, close } from '@wordpress/icons';

const KeywordInput = ({ 
    keywords = [''], 
    onChange, 
    label = __('Keywords', 'thinkrank'),
    help = '',
    placeholder = __('Enter keyword...', 'thinkrank'),
    maxItems = 10
}) => {
    /**
     * Handle keyword change
     */
    const handleKeywordChange = (index, value) => {
        const newKeywords = [...keywords];
        newKeywords[index] = value;
        onChange(newKeywords);
    };

    /**
     * Add new keyword input
     */
    const addKeyword = () => {
        if (keywords.length < maxItems) {
            onChange([...keywords, '']);
        }
    };

    /**
     * Remove keyword input
     */
    const removeKeyword = (index) => {
        if (keywords.length > 1) {
            const newKeywords = keywords.filter((_, i) => i !== index);
            onChange(newKeywords);
        }
    };

    return (
        <div className="thinkrank-mb-4">
            <label className="thinkrank-block thinkrank-text-sm thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-2">
                {label}
            </label>

            {help && (
                <p className="thinkrank-text-sm thinkrank-text-secondary thinkrank-mb-3">
                    {help}
                </p>
            )}

            <div className="thinkrank-space-y-3">
                {keywords.map((keyword, index) => (
                    <div key={index} className="thinkrank-flex thinkrank-gap-2">
                        <div className="thinkrank-flex-1">
                            <TextControl
                                value={keyword}
                                onChange={(value) => handleKeywordChange(index, value)}
                                placeholder={placeholder}
                                __next40pxDefaultSize={true}
                                __nextHasNoMarginBottom={true}
                            />
                        </div>

                        {keywords.length > 1 && (
                            <button
                                className="thinkrank-btn thinkrank-btn--danger thinkrank-btn--sm thinkrank-w-10 thinkrank-h-10 thinkrank-flex-center"
                                onClick={() => removeKeyword(index)}
                                title={__('Remove', 'thinkrank')}
                            >
                                <svg className="thinkrank-w-4 thinkrank-h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                                </svg>
                            </button>
                        )}
                    </div>
                ))}
            </div>

            {keywords.length < maxItems && (
                <button
                    className="thinkrank-btn thinkrank-btn--secondary thinkrank-btn--sm thinkrank-flex thinkrank-items-center thinkrank-gap-2 thinkrank-mt-2"
                    onClick={addKeyword}
                >
                    <svg className="thinkrank-w-4 thinkrank-h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                    </svg>
                    {label.includes('URL') ? __('Add URL', 'thinkrank') : __('Add Keyword', 'thinkrank')}
                </button>
            )}
        </div>
    );
};

export default KeywordInput;