/**
 * Form Field - Individual field component in canvas
 */

import { __ } from '@wordpress/i18n';
import { Icon, chevronUp, chevronDown, trash } from '@wordpress/icons';
import { FIELD_TYPES } from '../../config/fieldTypes';
import './FormField.css';

export default function FormField({
    field,
    index,
    isSelected,
    onSelect,
    onUpdate,
    onMoveUp,
    onMoveDown,
    onDelete,
    onDragStart,
    onDragOver,
    onDrop,
}) {
    const fieldConfig = FIELD_TYPES[field.field_type] || FIELD_TYPES.text;
    const hasOptions = ['select', 'checkbox', 'radio'].includes(field.field_type);

    return (
        <div
            className={`formipay-field-item ${isSelected ? 'is-selected' : ''}`}
            draggable
            onDragStart={onDragStart}
            onDragOver={onDragOver}
            onDrop={onDrop}
            onClick={onSelect}
        >
            <div className="formipay-field-header">
                <div className="formipay-field-info">
                    <span className="field-type-badge">
                        { fieldConfig.label }
                    </span>
                    <span className="field-id">
                        #{field.field_id || index}
                    </span>
                </div>
                <div className="formipay-field-actions">
                    <button
                        type="button"
                        className="button-icon"
                        onClick={(e) => { e.stopPropagation(); onMoveUp?.(); }}
                        disabled={!onMoveUp}
                        title={ __('Move Up', 'formipay') }
                    >
                        <Icon icon={chevronUp} size={16} />
                    </button>
                    <button
                        type="button"
                        className="button-icon"
                        onClick={(e) => { e.stopPropagation(); onMoveDown?.(); }}
                        disabled={!onMoveDown}
                        title={ __('Move Down', 'formipay') }
                    >
                        <Icon icon={chevronDown} size={16} />
                    </button>
                    <button
                        type="button"
                        className="button-icon button-danger"
                        onClick={(e) => { e.stopPropagation(); onDelete?.(); }}
                        title={ __('Delete', 'formipay') }
                    >
                        <Icon icon={trash} size={16} />
                    </button>
                </div>
            </div>

            <div className="formipay-field-content">
                <div className="field-label-row">
                    <strong>{ field.label || <em>Untitled</em> }</strong>
                    { field.is_required && (
                        <span className="required-badge">
                            { __('Required', 'formipay') }
                        </span>
                    )}
                </div>

                { field.description && (
                    <p className="field-description">
                        { field.description }
                    </p>
                )}

                { hasOptions && field.field_options && field.field_options.length > 0 && (
                    <div className="field-options-preview">
                        <small>
                            { field.field_options.length } { __('options', 'formipay') }
                        </small>
                    </div>
                )}

                <div className="field-meta">
                    { field.placeholder && (
                        <span className="meta-item">
                            Placeholder: "{ field.placeholder }"
                        </span>
                    )}
                    { field.default_value && (
                        <span className="meta-item">
                            Default: "{ field.default_value }"
                        </span>
                    )}
                </div>
            </div>
        </div>
    );
}
