function fieldVisible( field, sectionValues ) {
	const rule = field.showWhen;
	if ( ! rule || ! rule.field ) {
		return true;
	}
	return String( sectionValues[ rule.field ] ?? '' ) === String( rule.value );
}

export function Field( { fieldKey, field, value, onChange, labels, sectionValues, meta, onGeneratePolicy } ) {
	if ( field.hidden || ! fieldVisible( field, sectionValues || {} ) ) {
		return null;
	}

	const id = `newsroom-field-${ fieldKey }`;
	const type = field.type || 'text';
	const onLabel = labels?.on || 'On';
	const offLabel = labels?.off || 'Off';
	const disabled = !! field.disabled || !! field.locked;
	const placeholder = field.hasValue ? ( labels?.passwordKeep || '••••••••' ) : ( field.placeholder || '' );

	return (
		<div className={ `newsroom-settings__field newsroom-settings__field--${ type }${ disabled ? ' is-disabled' : '' }` }>
			<div className="newsroom-settings__field-meta">
				<label htmlFor={ id } className="newsroom-settings__field-label">
					{ field.label }
					{ field.proOnly && <span className="newsroom-settings__pro-pill">Pro</span> }
				</label>
				{ field.help && <p className="newsroom-settings__field-help">{ field.help }</p> }
				{ field.locked && <p className="newsroom-settings__field-help">{ labels?.passwordKeep }</p> }
			</div>
			<div className="newsroom-settings__field-control">
				{ type === 'toggle' && (
					<label className="newsroom-settings__switch">
						<input
							id={ id }
							type="checkbox"
							className="newsroom-settings__switch-input"
							checked={ !! value }
							disabled={ disabled }
							onChange={ ( e ) => onChange( e.target.checked ) }
						/>
						<span className="newsroom-settings__switch-track" aria-hidden="true" />
						<span className="newsroom-settings__switch-text">{ value ? onLabel : offLabel }</span>
					</label>
				) }
				{ type === 'select' && (
					<select
						id={ id }
						className="newsroom-settings__input"
						value={ value || '' }
						disabled={ disabled }
						onChange={ ( e ) => onChange( e.target.value ) }
					>
						{ Object.entries( field.choices || {} ).map( ( [ optVal, optLabel ] ) => (
							<option key={ optVal } value={ optVal }>{ optLabel }</option>
						) ) }
					</select>
				) }
				{ type === 'radio' && (
					<div className="newsroom-settings__radio-group newsroom-settings__radio-group--inline">
						{ Object.entries( field.choices || {} ).map( ( [ optVal, optLabel ] ) => (
							<label key={ optVal } className="newsroom-settings__radio-item">
								<input
									type="radio"
									name={ id }
									value={ optVal }
									checked={ String( value ) === String( optVal ) }
									disabled={ disabled }
									onChange={ () => onChange( optVal ) }
								/>
								<span>{ optLabel }</span>
							</label>
						) ) }
					</div>
				) }
				{ type === 'url' && (
					<>
						<input
							id={ id }
							type="url"
							className="newsroom-settings__input"
							value={ value || '' }
							placeholder={ placeholder }
							disabled={ disabled }
							onChange={ ( e ) => onChange( e.target.value ) }
						/>
						{ field.policy && meta?.aiPolicyReady && onGeneratePolicy && (
							<button
								type="button"
								className="button button-secondary newsroom-settings__policy-btn"
								disabled={ disabled }
								onClick={ () => onGeneratePolicy( field.policy, fieldKey ) }
							>
								{ labels?.generatePolicy }
							</button>
						) }
					</>
				) }
				{ type === 'email' && (
					<input
						id={ id }
						type="email"
						className="newsroom-settings__input"
						value={ value || '' }
						placeholder={ placeholder }
						disabled={ disabled }
						onChange={ ( e ) => onChange( e.target.value ) }
					/>
				) }
				{ type === 'password' && ! field.locked && (
					<input
						id={ id }
						type="password"
						className="newsroom-settings__input"
						value={ value || '' }
						placeholder={ placeholder }
						disabled={ disabled }
						autoComplete="new-password"
						onChange={ ( e ) => onChange( e.target.value ) }
					/>
				) }
				{ ( type === 'text' || ( type !== 'toggle' && type !== 'select' && type !== 'radio' && type !== 'url' && type !== 'email' && type !== 'password' && type !== 'number' && type !== 'range' && type !== 'textarea' ) ) && (
					<input
						id={ id }
						type="text"
						className="newsroom-settings__input"
						value={ value ?? '' }
						placeholder={ placeholder }
						disabled={ disabled }
						onChange={ ( e ) => onChange( e.target.value ) }
					/>
				) }
				{ type === 'number' && (
					<input
						id={ id }
						type="number"
						className="newsroom-settings__input newsroom-settings__input--number"
						value={ value ?? '' }
						min={ field.min }
						max={ field.max }
						disabled={ disabled }
						onChange={ ( e ) => onChange( e.target.value ) }
					/>
				) }
				{ type === 'range' && (
					<div className="newsroom-settings__range">
						<input
							id={ id }
							type="range"
							min={ field.min ?? 1 }
							max={ field.max ?? 15 }
							value={ value || field.min || 1 }
							disabled={ disabled }
							onChange={ ( e ) => onChange( e.target.value ) }
						/>
						<output>{ value }</output>
					</div>
				) }
				{ type === 'textarea' && (
					<textarea
						id={ id }
						className={ `newsroom-settings__input newsroom-settings__textarea${ field.mono ? ' is-mono' : '' }` }
						rows={ field.rows || 4 }
						value={ value || '' }
						disabled={ disabled }
						onChange={ ( e ) => onChange( e.target.value ) }
					/>
				) }
			</div>
		</div>
	);
}
