/**
 * Content Plan Plugin - Dynamic Form Field Component
 */

import React from 'react';
import { __ } from '@wordpress/i18n';
import { useContentPlan } from '../context/ContentPlanContext';
import { DynamicFormFieldProps } from '../types';

const DynamicFormField: React.FC<DynamicFormFieldProps> = ({
    fieldKey,
    config,
    value,
    onChange,
}) => {
    const { getString } = useContentPlan();
    const baseClasses =
        'w-full h-10 sm:h-12 px-2 sm:px-3 py-2 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent';
    const labelClasses = 'block font-medium text-gray-900 mb-1 sm:mb-2';
    const descriptionClasses = 'text-gray-600 mt-1';

    // Special width handling for publish_interval_days field
    const getInputClasses = (): string => {
        if (fieldKey === 'publish_interval_days') {
            return `${baseClasses} md:max-w-[250px]`;
        }
        return baseClasses;
    };

    const renderField = (): JSX.Element => {
        switch (config.type) {
            case 'text':
            case 'email':
            case 'url':
            case 'number':
                return (
                    <input
                        type={config.type}
                        id={fieldKey}
                        name={fieldKey}
                        value={value || ''}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                            onChange(fieldKey, e.target.value)
                        }
                        className={getInputClasses()}
                        placeholder={config.placeholder || ''}
                        required={config.required}
                    />
                );

            case 'password':
                return (
                    <input
                        type="password"
                        id={fieldKey}
                        name={fieldKey}
                        value={value || ''}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                            onChange(fieldKey, e.target.value)
                        }
                        className={baseClasses}
                        placeholder={config.placeholder || ''}
                        required={config.required}
                    />
                );

            case 'textarea':
                return (
                    <textarea
                        id={fieldKey}
                        name={fieldKey}
                        value={value || ''}
                        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
                            onChange(fieldKey, e.target.value)
                        }
                        className="w-full px-2 sm:px-3 py-2 text-sm sm:text-base border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                        rows={config.rows || 3}
                        placeholder={config.placeholder || ''}
                        required={config.required}
                    />
                );

            case 'select':
                return (
                    <select
                        id={fieldKey}
                        name={fieldKey}
                        value={value || ''}
                        onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
                            onChange(fieldKey, e.target.value)
                        }
                        className={`${baseClasses} h-10 sm:h-12`}
                        required={config.required}
                    >
                        {!value && (
                            <option value="">
                                {getString(
                                    'form_fields',
                                    'select_option',
                                    'Select an option'
                                )}
                            </option>
                        )}
                        {config.options &&
                            Object.entries(config.options).map(
                                ([optionValue, optionLabel]) => (
                                    <option
                                        key={optionValue}
                                        value={optionValue}
                                    >
                                        {optionLabel}
                                    </option>
                                )
                            )}
                    </select>
                );

            case 'radio':
                return (
                    <div className="space-y-2">
                        {config.options &&
                            Object.entries(config.options).map(
                                ([optionValue, optionLabel]) => (
                                    <label
                                        key={optionValue}
                                        className="flex items-center"
                                    >
                                        <input
                                            type="radio"
                                            name={fieldKey}
                                            value={optionValue}
                                            checked={value === optionValue}
                                            onChange={(
                                                e: React.ChangeEvent<HTMLInputElement>
                                            ) =>
                                                onChange(
                                                    fieldKey,
                                                    e.target.value
                                                )
                                            }
                                            className="mr-2 text-primary focus:ring-primary"
                                            required={config.required}
                                        />
                                        <span className="text-xs sm:text-sm text-gray-900">
                                            {optionLabel}
                                        </span>
                                    </label>
                                )
                            )}
                    </div>
                );

            case 'checkbox':
                return (
                    <label className="flex items-center">
                        <input
                            type="checkbox"
                            id={fieldKey}
                            name={fieldKey}
                            checked={value || false}
                            onChange={(
                                e: React.ChangeEvent<HTMLInputElement>
                            ) => onChange(fieldKey, e.target.checked)}
                            className="mr-2 text-primary focus:ring-primary"
                        />
                        <span className="text-xs sm:text-sm text-gray-900">
                            {config.label}
                        </span>
                    </label>
                );

            default:
                return (
                    <input
                        type="text"
                        id={fieldKey}
                        name={fieldKey}
                        value={value || ''}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                            onChange(fieldKey, e.target.value)
                        }
                        className={baseClasses}
                        placeholder={config.placeholder || ''}
                        required={config.required}
                    />
                );
        }
    };

    return (
        // Note: Using mb-0 instead of mb-8 sm:mb-12 md:mb-16 to prevent spacing issues
        // in select dropdown options (margin-bottom was affecting first option spacing)
        <div className="mb-0">
            {config.type !== 'checkbox' && (
                <label
                    htmlFor={fieldKey}
                    className={`${labelClasses} text-xs sm:text-sm`}
                >
                    {config.label}
                    {config.required && (
                        <span className="text-red-500 ml-1">*</span>
                    )}
                </label>
            )}
            {renderField()}
            {config.description && (
                <p className={`${descriptionClasses} text-xs`}>
                    {config.description}
                </p>
            )}
        </div>
    );
};

export default DynamicFormField;